blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

文档优化

Browse Source
This commit is contained in:
cookfront 2017-03-06 15:16:02 +08:00
parent 76fa89a49c
commit 7093f1772f
26 changed files with 403 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/ExamplesDocsApp.vue
View File

@ -58,12 +58,6 @@ export default {
} }
} }
} }
p {
font-size: 14px;
color: #5e6d82;
margin: 14px 0;
}
} }
.page-content { .page-content {
@ -72,6 +66,12 @@ export default {
height: inherit; height: inherit;
margin-left: 320px; margin-left: 320px;
padding: 0 20px; padding: 0 20px;
section > p {
font-size: 14px;
color: #5e6d82;
margin: 14px 0;
}
} }
.demo-page { .demo-page {

1
docs/components/demo-block.vue
View File

@ -44,6 +44,7 @@ export default {
padding: 20px 0; padding: 20px 0;
min-height: 200px; min-height: 200px;
max-height: 600px; max-height: 600px;
overflow: auto;
} }
.highlight { .highlight {

5
docs/examples-docs/card.md
View File

@ -4,19 +4,21 @@
当没有底部按钮时，右侧内容会居中显示。 当没有底部按钮时，右侧内容会居中显示。
:::demo
```html ```html
<zan-card <zan-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="描述" desc="描述"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg"> thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
</zan-card> </zan-card>
``` ```
:::
### 高级用法 ### 高级用法
可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。 可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
:::demo
```html ```html
<zan-card <zan-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
@ -36,6 +38,7 @@
</div> </div>
</zan-card> </zan-card>
``` ```
:::
### API ### API

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

@ -20,50 +20,59 @@ export default {
### 基础用法 ### 基础用法
:::demo
```html ```html
<zan-cell-group> <zan-cell-group>
<zan-cell title="单元格1" value="单元格1内容"></zan-cell> <zan-cell title="单元格1" value="单元格1内容"></zan-cell>
<zan-cell title="单元格2" value="单元格2内容"></zan-cell> <zan-cell title="单元格2" value="单元格2内容"></zan-cell>
</zan-cell-group> </zan-cell-group>
``` ```
:::
### 标题带描述信息 ### 标题带描述信息
传入`label`属性，属性值为描述信息的值。 传入`label`属性，属性值为描述信息的值。
:::demo
```html ```html
<zan-cell-group> <zan-cell-group>
<zan-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></zan-cell> <zan-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></zan-cell>
<zan-cell title="单元格2" label="描述信息"></zan-cell> <zan-cell title="单元格2" label="描述信息"></zan-cell>
</zan-cell-group> </zan-cell-group>
``` ```
:::
### 带图标 ### 带图标
传入`icon`属性。 传入`icon`属性。
:::demo
```html ```html
<zan-cell-group> <zan-cell-group>
<zan-cell title="起码运动馆" icon="home"></zan-cell> <zan-cell title="起码运动馆" icon="home"></zan-cell>
<zan-cell title="线下门店" icon="location"></zan-cell> <zan-cell title="线下门店" icon="location"></zan-cell>
</zan-cell-group> </zan-cell-group>
``` ```
:::
### 可点击的链接 ### 可点击的链接
传入`url`属性，传入`isLink`属性则会在右侧显示箭头。 传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
:::demo
```html ```html
<zan-cell-group> <zan-cell-group>
<zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></zan-cell> <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 title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
</zan-cell-group> </zan-cell-group>
``` ```
:::
### 高级用法 ### 高级用法
如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。 如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。
:::demo
```html ```html
<zan-cell-group> <zan-cell-group>
<zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link> <zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
@ -75,6 +84,7 @@ export default {
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell> <zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
</zan-cell-group> </zan-cell-group>
``` ```
:::
### API ### API

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

@ -1,9 +1,49 @@
<style>
@component-namespace demo {
@b checkbox {
.zan-checkbox-wrapper {
padding: 0 20px;
.zan-checkbox {
margin: 10px 0;
}
}
}
}
</style>
<script>
export default {
data() {
return {
checkbox1: true,
checkbox2: true,
list: [
'a',
'b',
'c'
],
result: ['a', 'b']
};
},
watch: {
result(val) {
console.log(val);
}
}
};
</script>
## Checkbox组件 ## Checkbox组件
### 基础用法 ### 基础用法
:::demo
```html ```html
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox> <div class="zan-checkbox-wrapper">
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
</div>
<script> <script>
export default { export default {
@ -15,11 +55,15 @@ export default {
}; };
</script> </script>
``` ```
:::
### 禁用状态 ### 禁用状态
:::demo
```html ```html
<zan-checkbox v-model="checkbox2">复选框2</zan-checkbox> <div class="zan-checkbox-wrapper">
<zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
</div>
<script> <script>
export default { export default {
@ -31,13 +75,17 @@ export default {
}; };
</script> </script>
``` ```
:::
### Checkbox组 ### Checkbox组
:::demo
```html ```html
<zan-checkbox-group v-model="result"> <div class="zan-checkbox-wrapper">
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox> <zan-checkbox-group v-model="result">
</zan-checkbox-group> <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
</zan-checkbox-group>
</div>
<script> <script>
export default { export default {
@ -60,13 +108,17 @@ export default {
}; };
</script> </script>
``` ```
:::
### 禁用Checkbox组 ### 禁用Checkbox组
:::demo
```html ```html
<zan-checkbox-group v-model="result" disabled> <div class="zan-checkbox-wrapper">
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox> <zan-checkbox-group v-model="result" disabled>
</zan-checkbox-group> <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
</zan-checkbox-group>
</div>
<script> <script>
export default { export default {
@ -83,9 +135,11 @@ export default {
}; };
</script> </script>
``` ```
:::
### 与Cell组件一起使用 ### 与Cell组件一起使用
:::demo
```html ```html
<zan-checkbox-group v-model="result"> <zan-checkbox-group v-model="result">
<zan-cell-group> <zan-cell-group>
@ -110,6 +164,7 @@ export default {
}; };
</script> </script>
``` ```
:::
### Checkbox API ### Checkbox API

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

@ -30,6 +30,7 @@ export default {
### 基础用法 ### 基础用法
:::demo
```html ```html
<zan-button @click="handleAlertClick">alert</zan-button> <zan-button @click="handleAlertClick">alert</zan-button>
@ -63,6 +64,7 @@ export default {
}; };
</script> </script>
``` ```
:::
### API ### API

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

@ -6,6 +6,7 @@
根据`type`属性显示不同的输入框。 根据`type`属性显示不同的输入框。
:::demo
```html ```html
<zan-cell-group> <zan-cell-group>
<zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field> <zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
@ -13,26 +14,31 @@
<zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field> <zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
</zan-cell-group> </zan-cell-group>
``` ```
:::
### 无label的输入框 ### 无label的输入框
不传入`label`属性即可。 不传入`label`属性即可。
:::demo
```html ```html
<zan-cell-group> <zan-cell-group>
<zan-field type="text" placeholder="请输入用户名"></zan-field> <zan-field type="text" placeholder="请输入用户名"></zan-field>
</zan-cell-group> </zan-cell-group>
``` ```
:::
### 监听change事件 ### 监听change事件
监听组件的`change`事件。 监听组件的`change`事件。
:::demo
```html ```html
<zan-cell-group> <zan-cell-group>
<zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field> <zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
</zan-cell-group> </zan-cell-group>
``` ```
:::
### API ### API

2
docs/examples-docs/install.md
View File

@ -2,6 +2,6 @@
### ynpm安装 ### ynpm安装
``` ```shell
npm i @youzan/zanui-vue -S npm i @youzan/zanui-vue -S
``` ```

61
docs/examples-docs/loading.md
View File

@ -1,33 +1,5 @@
l## Switch组件
### 基础用法
```html
<template>
<div class="page-loading">
<h1 class="page-title">Loading</h1>
<h2 class="page-sub-title">渐变深色spinner</h2>
<div class="page-loading__example">
<zan-loading class="some-customized-class"></zan-loading>
</div>
<h2 class="page-sub-title">渐变浅色spinner</h2>
<div class="page-loading__example page-loading__example--with-bg">
<zan-loading class="some-customized-class" :color="'white'"></zan-loading>
</div>
<h2 class="page-sub-title">单色spinner</h2>
<div class="page-loading__example">
<zan-loading class="some-customized-class" :type="'circle'" :color="'white'"></zan-loading>
</div>
<h2 class="page-sub-title">单色spinner</h2>
<div class="page-loading__example">
<zan-loading class="some-customized-class" :type="'circle'" :color="'black'"></zan-loading>
</div>
</div>
</template>
<style> <style>
.page-loading__example{ .demo-loading__example{
width: 30px; width: 30px;
height: 30px; height: 30px;
padding: 20px; padding: 20px;
@ -36,11 +8,38 @@ l## Switch组件
border: 1px solid transparent; border: 1px solid transparent;
} }
.page-loading__example--with-bg { .demo-loading__example--with-bg {
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
} }
.page-loading { .demo-loading {
padding: 0 20px; padding: 0 20px;
} }
</style> </style>
## Loading
### 基础用法
:::demo
```html
<div class="demo-loading">
<h2 class="demo-sub-title">渐变深色spinner</h2>
<div class="demo-loading__example">
<zan-loading class="some-customized-class"></zan-loading>
</div>
<h2 class="demo-sub-title">渐变浅色spinner</h2>
<div class="demo-loading__example demo-loading__example--with-bg">
<zan-loading class="some-customized-class" :color="'white'"></zan-loading>
</div>
<h2 class="demo-sub-title">单色spinner</h2>
<div class="demo-loading__example">
<zan-loading class="some-customized-class" :type="'circle'" :color="'white'"></zan-loading>
</div>
<h2 class="demo-sub-title">单色spinner</h2>
<div class="demo-loading__example">
<zan-loading class="some-customized-class" :type="'circle'" :color="'black'"></zan-loading>
</div>
</div>
```
:::

56
docs/examples-docs/panel.md
View File

@ -1,38 +1,55 @@
<style>
@component-namespace demo {
@b panel {
.zan-panel-sum {
background: #fff;
text-align: right;
font-size: 14px;
color: #333;
line-height: 30px;
padding-right: 15px;
span {
color: red;
}
}
.zan-panel-buttons {
text-align: right;
.zan-button {
margin-left: 5px;
}
}
.panel-content {
padding: 20px;
}
}
}
</style>
## Panel 面板 ## Panel 面板
面板只是一个容器，里面可以放入自定义的内容。 面板只是一个容器，里面可以放入自定义的内容。
### 基础用法 ### 基础用法
:::demo
```html ```html
<zan-panel title="标题" desc="标题描述" status="状态"> <zan-panel title="标题" desc="标题描述" status="状态">
<zan-card <div class="panel-content">
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" panel内容
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>
</zan-panel> </zan-panel>
``` ```
:::
### 高级用法 ### 高级用法
使用具名`slot`自定义内容。 使用具名`slot`自定义内容。
:::demo
```html ```html
<zan-panel title="标题" desc="标题描述" status="状态"> <zan-panel title="标题" desc="标题描述" status="状态">
<zan-card <zan-card
@ -61,6 +78,7 @@
</div> </div>
</zan-panel> </zan-panel>
``` ```
:::
### API ### API

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

@ -1,12 +1,45 @@
<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组件 ## Picker组件
模仿iOS中的`UIPickerView`。 模仿iOS中的`UIPickerView`。
### 基础用法 ### 基础用法
:::demo
```html ```html
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker> <zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
``` ```
:::
### API ### API

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

@ -2,6 +2,7 @@
### 基础用法 ### 基础用法
:::demo
```html ```html
<div class="zan-button-1"> <div class="zan-button-1">
<zan-button @click="popupShow1 = true">从下方弹出popup</zan-button> <zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
@ -54,6 +55,7 @@ export default {
}; };
</script> </script>
``` ```
:::
### API ### API

4
docs/examples-docs/quickstart.md
View File

@ -2,7 +2,7 @@
### 完整引入 ### 完整引入
``` ```js
import Vue from 'vue'; import Vue from 'vue';
import ZanUI from '@youzan/zanui-vue'; import ZanUI from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/index.css'; import '@youzan/zanui-vue/lib/zanui-css/index.css';
@ -12,7 +12,7 @@ Vue.use(ZanUI);
### 按需引入 ### 按需引入
``` ```js
import Vue from 'vue'; import Vue from 'vue';
import { Button, Cell } from '@youzan/zanui-vue'; import { Button, Cell } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/button.css'; import '@youzan/zanui-vue/lib/zanui-css/button.css';

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

@ -1,8 +1,25 @@
<style>
@component-namespace demo {
@b radio {
.zan-radios {
padding: 0 20px;
.zan-radio {
margin: 10px 0;
}
}
}
}
</style>
<script> <script>
export default { export default {
data() { data() {
return { return {
radio: '1' radio1: '1',
radio2: '2',
radio3: '1',
radio4: '1'
}; };
} }
}; };
@ -12,9 +29,12 @@ export default {
### 基础用法 ### 基础用法
:::demo
```html ```html
<zan-radio name="1" v-model="radio1">单选框1</zan-radio> <div class="zan-radios">
<zan-radio name="2" v-model="radio1">单选框2</zan-radio> <zan-radio name="1" v-model="radio1">单选框1</zan-radio>
<zan-radio name="2" v-model="radio1">单选框2</zan-radio>
</div>
<script> <script>
export default { export default {
@ -26,12 +46,16 @@ export default {
}; };
</script> </script>
``` ```
:::
### 禁用状态 ### 禁用状态
:::demo
```html ```html
<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio> <div class="zan-radios">
<zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio> <zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
<zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
</div>
<script> <script>
export default { export default {
@ -43,14 +67,18 @@ export default {
}; };
</script> </script>
``` ```
:::
### radio组 ### radio组
:::demo
```html ```html
<zan-radio-group v-model="radio3"> <div class="zan-radios">
<zan-radio name="1">单选框1</zan-radio> <zan-radio-group v-model="radio3">
<zan-radio name="2">单选框2</zan-radio> <zan-radio name="1">单选框1</zan-radio>
</zan-radio-group> <zan-radio name="2">单选框2</zan-radio>
</zan-radio-group>
</div>
<script> <script>
export default { export default {
@ -62,9 +90,11 @@ export default {
}; };
</script> </script>
``` ```
:::
### 与Cell组件一起使用 ### 与Cell组件一起使用
:::demo
```html ```html
<zan-radio-group v-model="radio4"> <zan-radio-group v-model="radio4">
<zan-cell-group> <zan-cell-group>
@ -83,6 +113,7 @@ export default {
}; };
</script> </script>
``` ```
:::
### Radio API ### Radio API

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

@ -1,17 +1,4 @@
## Search 组件 <script>
### 基础用法
```html
<zan-search
placeholder="商品名称"
@search="goSearch"
>
</zan-search>
```
```javascript
export default { export default {
methods: { methods: {
goSearch(value) { goSearch(value) {
@ -19,7 +6,26 @@ export default {
} }
} }
}; };
</script>
## Search 组件
### 基础用法
:::demo
```html
<zan-search placeholder="商品名称" @search="goSearch"></zan-search>
<script>
export default {
methods: {
goSearch(value) {
alert(value)
}
}
};
</script>
``` ```
:::
### API ### API

36
docs/examples-docs/steps.md
View File

@ -1,7 +1,38 @@
<style>
@component-namespace demo {
@b steps {
.steps-success {
color: #06bf04;
}
.zan-button {
margin-left: 15px;
}
}
}
</style>
<script>
export default {
data() {
return {
active: 0
};
},
methods: {
nextStep() {
if (++this.active > 3) this.active = 0;
}
}
}
</script>
## Steps 步骤条 ## Steps 步骤条
### 基础用法 ### 基础用法
:::demo
```html ```html
<zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货"> <zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
<zan-step>买家下单</zan-step> <zan-step>买家下单</zan-step>
@ -10,6 +41,8 @@
<zan-step>交易完成</zan-step> <zan-step>交易完成</zan-step>
</zan-steps> </zan-steps>
<zan-button @click="nextStep">下一步</zan-button>
<script> <script>
export default { export default {
data() { data() {
@ -26,9 +59,11 @@ export default {
} }
</script> </script>
``` ```
:::
### 只显示步骤条 ### 只显示步骤条
:::demo
```html ```html
<zan-steps :active="active"> <zan-steps :active="active">
<zan-step>买家下单</zan-step> <zan-step>买家下单</zan-step>
@ -37,6 +72,7 @@ export default {
<zan-step>交易完成</zan-step> <zan-step>交易完成</zan-step>
</zan-steps> </zan-steps>
``` ```
:::
### Steps API ### Steps API

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

@ -1,33 +1,47 @@
<style>
@component-namespace demo {
@b switch {
padding: 0 15px 15px;
@e wrapper {
width: 33.33%;
float: left;
text-align: center;
}
@e text {
margin: 20px 0;
}
}
}
</style>
## Switch组件 ## Switch组件
### 基础用法 ### 基础用法
:::demo
```html ```html
<div class="page-switch"> <div class="demo-switch__wrapper">
<h1 class="page-title">Switch</h1> <zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
<h2 class="page-sub-title">基础用法</h2> <div class="demo-switch__text">{{switchStateText}}</div>
<div class="page-switch"> </div>
<div class="page-switch__wrapper"> <div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch> <zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
<div class="page-switch__text">{{switchStateText}}</div> <div class="demo-switch__text">ON, DISABLED</div>
</div> </div>
<div class="page-switch__wrapper"> <div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch> <zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
<div class="page-switch__text">ON, DISABLED</div> <div class="demo-switch__text">OFF, DISABLED</div>
</div> </div>
<div class="page-switch__wrapper"> <div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch> <zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
<div class="page-switch__text">OFF, DISABLED</div> <div class="demo-switch__text">ON, LOADING</div>
</div> </div>
<div class="page-switch__wrapper"> <div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch> <zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
<div class="page-switch__text">ON, LOADING</div> <div class="demo-switch__text">OFF, LOADING</div>
</div>
<div class="page-switch__wrapper">
<zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
<div class="page-switch__text">OFF, LOADING</div>
</div>
</div>
</div> </div>
<script> <script>
@ -50,6 +64,7 @@ export default {
}; };
</script> </script>
``` ```
:::
### API ### API

45
docs/examples-docs/tag.md
View File

@ -1,17 +1,52 @@
<style>
.tags-container {
padding: 5px 15px;
.zan-tag + .zan-tag {
margin-left: 10px;
}
}
</style>
## Tag 组件 ## Tag 组件
### 基础用法 ### 基础用法
:::demo
```html ```html
<zan-tag>返现</zan-tag> <div class="tags-container">
<zan-tag :plain="true">返现</zan-tag> <zan-tag>返现</zan-tag>
<zan-tag :plain="true">返现</zan-tag>
</div>
<div class="tags-container">
<zan-tag type="danger">返现</zan-tag>
<zan-tag type="danger">四字标签</zan-tag>
<zan-tag type="danger">一</zan-tag>
</div>
``` ```
:::
### 高级用法 ### 高级用法
:::demo
```html ```html
<zan-tag type="danger">返现</zan-tag> <div class="tags-container">
<zan-tag type="success">返现</zan-tag> <zan-tag type="danger">返现</zan-tag>
<zan-tag type="success" :plain="true">返现</zan-tag> <zan-tag :plain="true" type="danger">返现</zan-tag>
</div>
<div class="tags-container">
<zan-tag type="primary">返现</zan-tag>
<zan-tag :plain="true" type="primary">返现</zan-tag>
</div>
<div class="tags-container">
<zan-tag type="success">返现</zan-tag>
<zan-tag :plain="true" type="success">返现</zan-tag>
</div>
<div class="tags-container">
<zan-tag type="danger" :mark="true">返现</zan-tag>
</div>
``` ```
:::
### API ### API

2
docs/examples-docs/waterfall.md
View File

@ -2,6 +2,7 @@
### 基础用法 ### 基础用法
:::demo
```html ```html
<div class="waterfall"> <div class="waterfall">
<div <div
@ -62,6 +63,7 @@ export default {
}; };
</script> </script>
``` ```
:::
### API ### API

4
docs/examples/search.vue
View File

@ -7,15 +7,17 @@ export default {
} }
}; };
</script> </script>
<template> <template>
<div class="page-search"> <div class="page-search">
<h1 class="page-title">Search</h1> <h1 class="page-title">Search</h1>
<h2 class="page-sub-title">基础用法</h2> <h2 class="page-sub-title">基础用法</h2>
<zan-search placeholder="商品名称" @search="goSearch"> <zan-search placeholder="商品名称" @search="goSearch">
</zan-search> </zan-search>
</div> </div>
</template> </template>
<style> <style>
.page-badge { .page-badge {
padding: 0 15px; padding: 0 15px;

2
packages/checkbox/src/checkbox.vue
View File

@ -2,7 +2,7 @@
<div <div
class="zan-checkbox" class="zan-checkbox"
:class="{ :class="{
'is-disabled': isDisabled 'zan-checkbox--disabled': isDisabled
}"> }">
<span class="zan-checkbox__input"> <span class="zan-checkbox__input">
<input <input

3
packages/radio/src/radio.vue
View File

@ -2,7 +2,7 @@
<div <div
class="zan-radio" class="zan-radio"
:class="{ :class="{
'is-disabled': isDisabled 'zan-radio--disabled': isDisabled
}"> }">
<span class="zan-radio__input"> <span class="zan-radio__input">
<input <input
@ -44,6 +44,7 @@ export default {
currentValue: { currentValue: {
get() { get() {
console.log(this.value);
return this.isGroup && this.parentGroup ? this.parentGroup.value : this.value; return this.isGroup && this.parentGroup ? this.parentGroup.value : this.value;
}, },

6
packages/steps/src/step.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="zan-step" :class="`zan-step--${status}`"> <div class="zan-step" :class="statusClass">
<div class="zan-step__circle-container"> <div class="zan-step__circle-container">
<i class="zan-step__circle" v-if="status !== 'process'"></i> <i class="zan-step__circle" v-if="status !== 'process'"></i>
<i class="zan-icon zan-icon-checked" v-else></i> <i class="zan-icon zan-icon-checked" v-else></i>
@ -31,6 +31,10 @@ export default {
} else if (index === active) { } else if (index === active) {
return 'process'; return 'process';
} }
},
statusClass() {
const status = this.status;
return status ? 'zan-step--' + status : '';
} }
} }
}; };

7
packages/zanui-css/src/checkbox.css
View File

@ -2,7 +2,9 @@
@component-namespace zan { @component-namespace zan {
@b checkbox { @b checkbox {
@when disabled { overflow: hidden;
@m disabled {
.zan-icon { .zan-icon {
color: #d1dbe5; color: #d1dbe5;
} }
@ -12,6 +14,7 @@
position: relative; position: relative;
height: 22px; height: 22px;
margin-right: 15px; margin-right: 15px;
float: left;
} }
@e control { @e control {
@ -26,6 +29,8 @@
@e label { @e label {
line-height: 22px; line-height: 22px;
margin-left: 37px;
display: block;
} }
.zan-icon { .zan-icon {

8
packages/zanui-css/src/radio.css
View File

@ -2,7 +2,9 @@
@component-namespace zan { @component-namespace zan {
@b radio { @b radio {
@when disabled { overflow: hidden;
@m disabled {
.zan-icon { .zan-icon {
color: #d1dbe5; color: #d1dbe5;
} }
@ -11,7 +13,7 @@
@e input { @e input {
position: relative; position: relative;
height: 22px; height: 22px;
margin-right: 15px; float: left;
} }
@e control { @e control {
@ -26,6 +28,8 @@
@e label { @e label {
line-height: 22px; line-height: 22px;
display: block;
margin-left: 37px;
} }
.zan-icon { .zan-icon {

3
packages/zanui-css/src/steps.css
View File

@ -53,6 +53,7 @@
margin: 0 0 10px; margin: 0 0 10px;
overflow: hidden; overflow: hidden;
padding-bottom: 20px; padding-bottom: 20px;
position: relative;
} }
} }
@ -105,7 +106,7 @@
.zan-step__circle-container { .zan-step__circle-container {
left: auto; left: auto;
right: -6px; right: -8px;
} }
.zan-step__line { .zan-step__line {