ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-19 10:07:07 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Merge branch 'master' into dev/badge_search

Browse Source 
# Conflicts:
#	components.json
#	packages/zanui-css/src/index.css
#	src/index.js
This commit is contained in:
zhuxiang
2017-03-01 14:54:32 +08:00
parent 6808b06372 d4950678e6
commit 5b34ea74ec
152 changed files with 76771 additions and 19323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
docs/examples-docs/button.md
View File

@@ -1,92 +1,80 @@
<style lang="css">
@component-namespace z {
@component button-group {
.z-button-1 {
margin-bottom: 15px;
}
}
}
</style>
## Button组件
### 按钮功能
:::demo 只接受primary, default, danger三种类型，默认default
只接受primary, default, danger三种类型，默认default。
```html
<div class="z-button-group">
<div class="z-button-1">
<z-button>default</z-button>
<div class="zan-button-group">
<div class="zan-button-1">
<zan-button>default</zan-button>
</div>
<div class="z-button-1">
<z-button type="primary">primary</z-button>
<div class="zan-button-1">
<zan-button type="primary">primary</zan-button>
</div>
<div class="z-button-1">
<z-button type="danger">danger</z-button>
<div class="zan-button-1">
<zan-button type="danger">danger</zan-button>
</div>
</div>
```
:::
### 禁用状态
:::demo
```html
<div class="z-button-group">
<div class="z-button-1">
<z-button disabled>diabled</z-button>
<div class="zan-button-group">
<div class="zan-button-1">
<zan-button disabled>diabled</zan-button>
</div>
</div>
```
:::
### 按钮尺寸
:::demo 只接受large, normal, small, mini四种尺寸，默认normal
只接受large, normal, small, mini四种尺寸，默认normal。
```html
<div class="z-button-group">
<div class="z-button-1">
<z-button size="large">large</z-button>
<div class="zan-button-group">
<div class="zan-button-1">
<zan-button size="large">large</zan-button>
</div>
</div>
<div class="z-button-group" :style="{ width: '50%' }">
<div class="z-button-3">
<z-button type="primary">normal</z-button>
<div class="zan-button-group" :style="{ width: '50%' }">
<div class="zan-button-3">
<zan-button type="primary">normal</zan-button>
</div>
<div class="z-button-3">
<z-button size="small">small</z-button>
<div class="zan-button-3">
<zan-button size="small">small</zan-button>
</div>
<div class="z-button-3">
<z-button size="mini">mini</z-button>
<div class="zan-button-3">
<zan-button size="mini">mini</zan-button>
</div>
</div>
```
:::
### 自定义按钮标签
:::demo 按钮默认是button标签，可以使用tag属性修改为一个a标签
按钮默认是button标签，可以使用tag属性修改为一个a标签。
```html
<div class="z-button-group">
<div class="z-button-1">
<z-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</z-button>
<div class="zan-button-group">
<div class="zan-button-1">
<zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
</div>
</div>
```
:::
### button group
:::demo 一组按钮
一组按钮。
```html
<div class="z-button-group">
<z-button type="primary" size="small">确认付款</z-button>
<z-button size="small">确认收货</z-button>
<z-button size="small">取消订单</z-button>
<div class="zan-button-group">
<zan-button type="primary" size="small">确认付款</zan-button>
<zan-button size="small">确认收货</zan-button>
<zan-button size="small">取消订单</zan-button>
</div>
```
:::
### API

56
docs/examples-docs/card.md Normal file
View File

@@ -0,0 +1,56 @@
## Card 图文组件
### 基础用法
当没有底部按钮时，右侧内容会居中显示。
```html
<zan-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="描述"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
</zan-card>
```
### 高级用法
可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
```html
<zan-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="商品SKU1，商品SKU2"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
<div class="zan-card__row" slot="title">
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="zan-card__price">¥ 2.00</span>
</div>
<div class="zan-card__row" slot="desc">
<h4 class="zan-card__desc">商品sku</h4>
<span class="zan-card__num">x 2</span>
</div>
<div class="zan-card__footer" slot="footer">
<zan-button size="mini">按钮一</zan-button>
<zan-button size="mini">按钮二</zan-button>
</div>
</zan-card>
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| thumb | 左侧图片 | string | '' | '' |
| title | 标题 | string | '' | '' |
| desc | 描述 | string | '' | '' |
### Slot
| name | 描述 |
|-----------|-----------|
| title | 自定义标题 |
| desc | 自定义描述 |
| tags | 自定义tags |
| footer | 自定义footer |

62
docs/examples-docs/cell.md
View File

@@ -20,65 +20,61 @@ export default {
### 基础用法
:::demo 样例代码
```html
<z-cell-group>
<z-cell title="单元格1" value="单元格1内容"></z-cell>
<z-cell title="单元格2" value="单元格2内容"></z-cell>
</z-cell-group>
<zan-cell-group>
<zan-cell title="单元格1" value="单元格1内容"></zan-cell>
<zan-cell title="单元格2" value="单元格2内容"></zan-cell>
</zan-cell-group>
```
:::
### 标题带描述信息
:::demo 传入`label`属性，属性值为描述信息的值。
传入`label`属性，属性值为描述信息的值。
```html
<z-cell-group>
<z-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></z-cell>
<z-cell title="单元格2" label="描述信息"></z-cell>
</z-cell-group>
<zan-cell-group>
<zan-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></zan-cell>
<zan-cell title="单元格2" label="描述信息"></zan-cell>
</zan-cell-group>
```
:::
### 带图标
:::demo 传入`icon`属性
传入`icon`属性。
```html
<z-cell-group>
<z-cell title="起码运动馆" icon="home"></z-cell>
<z-cell title="线下门店" icon="location"></z-cell>
</z-cell-group>
<zan-cell-group>
<zan-cell title="起码运动馆" icon="home"></zan-cell>
<zan-cell title="线下门店" icon="location"></zan-cell>
</zan-cell-group>
```
:::
### 可点击的链接
:::demo 传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
```html
<z-cell-group>
<z-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></z-cell>
<z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
</z-cell-group>
<zan-cell-group>
<zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></zan-cell>
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
</zan-cell-group>
```
:::
### 高级用法
如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。
如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。
:::demo 包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。
```html
<z-cell-group>
<z-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
<zan-cell-group>
<zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
<template slot="title">
<span class="z-cell-text">起码运动馆</span>
<span class="zan-cell-text">起码运动馆</span>
<img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
</template>
</z-cell>
<z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
</z-cell-group>
</zan-cell>
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
</zan-cell-group>
```
:::
### API

132
docs/examples-docs/checkbox.md
View File

@@ -1 +1,131 @@
## Checkbox组件
## Checkbox组件
### 基础用法
```html
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
<script>
export default {
data() {
return {
checkbox1: true
};
}
};
</script>
```
### 禁用状态
```html
<zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
<script>
export default {
data() {
return {
checkbox2: true
};
}
};
</script>
```
### Checkbox组
```html
<zan-checkbox-group v-model="result">
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
</zan-checkbox-group>
<script>
export default {
data() {
return {
list: [
'a',
'b',
'c'
],
result: ['a', 'b']
};
},
watch: {
result(val) {
console.log(val);
}
}
};
</script>
```
### 禁用Checkbox组
```html
<zan-checkbox-group v-model="result" disabled>
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
</zan-checkbox-group>
<script>
export default {
data() {
return {
list: [
'a',
'b',
'c'
],
result: ['a', 'b']
};
}
};
</script>
```
### 与Cell组件一起使用
```html
<zan-checkbox-group v-model="result">
<zan-cell-group>
<zan-cell v-for="item in list">
<zan-checkbox :name="item">复选框{{item}}</zan-checkbox>
</zan-cell>
</zan-cell-group>
</zan-checkbox-group>
<script>
export default {
data() {
return {
list: [
'a',
'b',
'c'
],
result: ['a', 'b']
};
}
};
</script>
```
### Checkbox API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| disabled | 是否禁用单选框 | Boolean | false | |
| name | 根据这个来判断radio是否选中 | Boolean | false | |
### CheckboxGroup API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| disabled | 是否禁用单选框 | Boolean | false | |
### CheckboxGroup Event
| 事件名称 | 说明 | 回调参数 |
|-----------|-----------|-----------|
| change | 当绑定值变化时触发的事件 | 当前组件的值 |

34
docs/examples-docs/dialog.md
View File

@@ -30,13 +30,39 @@ export default {
### 基础用法
:::demo
```html
<z-button @click="handleAlertClick">alert</z-button>
<zan-button @click="handleAlertClick">alert</zan-button>
<z-button @click="handleConfirmClick">confirm</z-button>
<zan-button @click="handleConfirmClick">confirm</zan-button>
<script>
import { Dialog } from 'src/index';
export default {
methods: {
handleAlertClick() {
Dialog.alert({
title: 'alert标题',
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
}).then((action) => {
console.log(action);
});
},
handleConfirmClick() {
Dialog.confirm({
title: 'confirm标题',
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
}).then((action) => {
console.log(action);
}, (error) => {
console.log(error);
});
}
}
};
</script>
```
:::
### API

50
docs/examples-docs/field.md
View File

@@ -1,54 +1,38 @@
<script>
export default {
data() {
return {
name: ''
};
},
methods: {
handleChange() {
console.log(this.name);
}
}
};
</script>
## Field组件
表单中`input`或`textarea`的输入框。
### 基础用法
:::demo 根据`type`属性显示不同的输入框。
根据`type`属性显示不同的输入框。
```html
<z-cell-group>
<z-field type="text" label="用户名：" placeholder="请输入用户名"></z-field>
<z-field type="password" label="密码：" placeholder="请输入密码"></z-field>
<z-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></z-field>
</z-cell-group>
<zan-cell-group>
<zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
<zan-field type="password" label="密码：" placeholder="请输入密码"></zan-field>
<zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
</zan-cell-group>
```
:::
### 无label的输入框
:::demo 不传入`label`属性即可。
不传入`label`属性即可。
```html
<z-cell-group>
<z-field type="text" placeholder="请输入用户名"></z-field>
</z-cell-group>
<zan-cell-group>
<zan-field type="text" placeholder="请输入用户名"></zan-field>
</zan-cell-group>
```
:::
### 监听change事件
:::demo 监听组件的`change`事件。
监听组件的`change`事件。
```html
<z-cell-group>
<z-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></z-field>
</z-cell-group>
<zan-cell-group>
<zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
</zan-cell-group>
```
:::
### API

80
docs/examples-docs/panel.md Normal file
View File

@@ -0,0 +1,80 @@
## Panel 面板
面板只是一个容器，里面可以放入自定义的内容。
### 基础用法
```html
<zan-panel title="标题" desc="标题描述" status="状态">
<zan-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="商品SKU1，商品SKU2"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
<div class="zan-card__row" slot="title">
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="zan-card__price">¥ 2.00</span>
</div>
<div class="zan-card__row" slot="desc">
<h4 class="zan-card__desc">商品sku</h4>
<span class="zan-card__num">x 2</span>
</div>
<div class="zan-card__footer" slot="footer">
<zan-button size="mini">按钮一</zan-button>
<zan-button size="mini">按钮二</zan-button>
</div>
</zan-card>
<div class="zan-panel-sum">
合计：<span>¥ 1999.90</span>
</div>
</zan-panel>
```
### 高级用法
使用具名`slot`自定义内容。
```html
<zan-panel title="标题" desc="标题描述" status="状态">
<zan-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="商品SKU1，商品SKU2"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
<div class="zan-card__row" slot="title">
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="zan-card__price">¥ 2.00</span>
</div>
<div class="zan-card__row" slot="desc">
<h4 class="zan-card__desc">商品sku</h4>
<span class="zan-card__num">x 2</span>
</div>
<div class="zan-card__footer" slot="footer">
<zan-button size="mini">按钮一</zan-button>
<zan-button size="mini">按钮二</zan-button>
</div>
</zan-card>
<div class="zan-panel-sum">
合计：<span>¥ 1999.90</span>
</div>
<div class="zan-panel-buttons" slot="footer">
<zan-button size="small">按钮一</zan-button>
<zan-button size="small" type="danger">按钮二</zan-button>
</div>
</zan-panel>
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| title | 标题 | string | '' | '' |
| desc | 描述 | string | '' | '' |
| status | 状态 | string | '' | '' |
### Slot
| name | 描述 |
|-----------|-----------|
| - | 自定义内容 |
| header | 自定义header |
| footer | 自定义footer |

35
docs/examples-docs/picker.md
View File

@@ -1,45 +1,12 @@
<script>
const citys = {
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
'福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
'湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
};
export default {
data() {
return {
pickerColumns: [
{
values: Object.keys(citys),
className: 'column1'
},
{
values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
className: 'column2'
}
]
};
},
methods: {
handlePickerChange(picker, values) {
picker.setColumnValues(1, citys[values[0]]);
}
}
};
</script>
## Picker组件
模仿iOS中的`UIPickerView`。
### 基础用法
:::demo 基础用法
```html
<z-picker :columns="pickerColumns" @change="handlePickerChange"></z-picker>
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
```
:::
### API

88
docs/examples-docs/popup.md
View File

@@ -1,3 +1,36 @@
## Popup组件
### 基础用法
```html
<div class="zan-button-1">
<zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
xxxx
</zan-popup>
<div class="zan-button-1">
<zan-button @click="popupShow2 = true">从上方方弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow2" position="top" class="zan-popup-2" :overlay="false">
更新成功
</zan-popup>
<div class="zan-button-1">
<zan-button @click="popupShow3 = true">从右方弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow3" position="right" class="zan-popup-3" :overlay="false">
<zan-button @click.native="popupShow3 = false">关闭 popup</zan-button>
</zan-popup>
<div class="zan-button-1">
<zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow4" transition="popup-fade" class="zan-popup-4">
一些内容
</zan-popup>
<script>
export default {
data() {
@@ -20,62 +53,7 @@ export default {
}
};
</script>
<style>
.z-popup-1 {
width: 100%;
height: 200px;
}
.z-popup-2 {
width: 100%;
line-height: 44px;
background-color: rgba(0, 0, 0, 0.701961);
text-align: center;
color: #fff;
}
.z-popup-3 {
width: 100%;
height: 100%;
background-color: #fff;
}
.z-popup-4 {
width: 50%;
height: 200px;
background: #fff;
border-radius: 10px;
}
</style>
## Popup组件
### 基础用法
:::demo
```html
<z-button @click="popupShow1 = true">从下方弹出popup</z-button>
<z-popup v-model="popupShow1" position="bottom" class="z-popup-1">
xxxx
</z-popup>
<z-button @click="popupShow2 = true">从上方方弹出popup</z-button>
<z-popup v-model="popupShow2" position="top" class="z-popup-2" :overlay="false">
更新成功
</z-popup>
<z-button @click="popupShow3 = true">从右方弹出popup</z-button>
<z-popup v-model="popupShow3" position="right" class="z-popup-3" :overlay="false">
<z-button @click.native="popupShow3 = false">关闭 popup</z-button>
</z-popup>
<z-button @click="popupShow4 = true">从中间弹出popup</z-button>
<z-popup v-model="popupShow4" transition="popup-fade" class="z-popup-4">
一些内容
</z-popup>
```
:::
### API

89
docs/examples-docs/radio.md
View File

@@ -12,14 +12,93 @@ export default {
### 基础用法
:::demo
```html
<z-radio v-model="radio"></z-radio>
```
:::
<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
<zan-radio name="2" v-model="radio1">单选框2</zan-radio>
### API
<script>
export default {
data() {
return {
radio1: '1'
}
}
};
</script>
```
### 禁用状态
```html
<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
<zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
<script>
export default {
data() {
return {
radio2: '2'
}
}
};
</script>
```
### radio组
```html
<zan-radio-group v-model="radio3">
<zan-radio name="1">单选框1</zan-radio>
<zan-radio name="2">单选框2</zan-radio>
</zan-radio-group>
<script>
export default {
data() {
return {
radio3: '1'
}
}
};
</script>
```
### 与Cell组件一起使用
```html
<zan-radio-group v-model="radio4">
<zan-cell-group>
<zan-cell><zan-radio name="1">单选框1</zan-radio></zan-cell>
<zan-cell><zan-radio name="2">单选框2</zan-radio></zan-cell>
</zan-cell-group>
</zan-radio-group>
<script>
export default {
data() {
return {
radio4: '1'
}
}
};
</script>
```
### Radio API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| disabled | 是否禁用单选框 | Boolean | false | |
| name | 根据这个来判断radio是否选中 | Boolean | false | |
### RadioGroup API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| disabled | 是否禁用单选框 | Boolean | false | |
### RadioGroup Event
| 事件名称 | 说明 | 回调参数 |
|-----------|-----------|-----------|
| change | 当绑定值变化时触发的事件 | 当前组件的值 |

4
docs/examples-docs/steps.md Normal file
View File

@@ -0,0 +1,4 @@
## Steps 步骤条

47
docs/examples-docs/switch.md
View File

@@ -1,46 +1,7 @@
<script>
export default {
data() {
return {
switchState: true
};
},
computed: {
switchStateText() {
return this.switchState ? 'ON' : 'OFF';
}
},
methods: {
updateState(newState) {
this.switchState = newState;
}
}
};
</script>
<style lang="css">
@component-namespace page {
@component switch {
padding: 0 15px 15px;
@descendent wrapper {
margin: 30px;
width: 100px;
float: left;
text-align: center;
}
@descendent text {
margin: 20px 0;
}
}
}
</style>
## Switch组件
### 基础用法
:::demo 样例代码
```html
<div class="page-switch">
<div class="page-switch__wrapper">
@@ -56,10 +17,8 @@ export default {
<div class="page-switch__text">OFF, DISABLED</div>
</div>
</div>
```
```javascript
<script>
export default {
data() {
return {
@@ -76,9 +35,9 @@ export default {
this.switchState = newState;
}
}
};
};
</script>
```
:::
### API

28
docs/examples-docs/tag.md Normal file
View File

@@ -0,0 +1,28 @@
## Tag 组件
### 基础用法
```html
<zan-tag>返现</zan-tag>
<zan-tag :plain="true">返现</zan-tag>
```
### 高级用法
```html
<zan-tag type="danger">返现</zan-tag>
<zan-tag type="success">返现</zan-tag>
<zan-tag type="success" :plain="true">返现</zan-tag>
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| plain | 是否是空心tag | boolean | false | '' |
| mark | 是否是标记 | boolean | false | '' |
| type | tag类型 | string | '' | 'primary', 'success', 'danger' |
### Slot
| name | 描述 |
|-----------|-----------|
| - | 自定义tag显示内容 |

72
docs/examples-docs/waterfall.md Normal file
View File

@@ -0,0 +1,72 @@
## Waterfall 瀑布流
### 基础用法
```html
<div class="waterfall">
<div
v-waterfall-lower="loadMore"
v-waterfall-upper="loadMoreUpper"
waterfall-disabled="isWaterfallDisabled"
waterfall-offset="400"
>
<div
class="waterfall-item"
v-for="item in list"
style="text-align: center;"
>
{{ item }}
</div>
<div v-if="loading" style="text-align: center;">
loading
</div>
</div>
</div>
<script>
export default {
data() {
return {
list: [1, 2, 3, 4, 5],
loading: false,
finished: false
};
},
methods: {
loadMore() {
if (this.list.length >= 200) {
this.finished = true;
return;
}
this.loading = true;
setTimeout(() => {
let lastNumber = this.list[this.list.length - 1];
for (let i = 0; i < 5; i ++) {
lastNumber += 1;
this.list.push(lastNumber);
}
this.loading = false;
}, 2500);
},
loadMoreUpper() {
if (this.list[0] < 0) return;
this.list.unshift(-1);
}
},
computed: {
isWaterfallDisabled: function() {
return this.loading || this.finished;
}
}
};
</script>
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| waterfall-disabled | 是否禁止瀑布流触发 | Boolean | false | |
| waterfall-offset | 触发瀑布流加载的阈值 | Number | 300 | |