mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
文档优化
This commit is contained in:
cookfront
parent
76fa89a49c
commit
7093f1772f
@ -58,12 +58,6 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #5e6d82;
|
||||
margin: 14px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
@ -72,6 +66,12 @@ export default {
|
||||
height: inherit;
|
||||
margin-left: 320px;
|
||||
padding: 0 20px;
|
||||
|
||||
section > p {
|
||||
font-size: 14px;
|
||||
color: #5e6d82;
|
||||
margin: 14px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-page {
|
||||
|
||||
@ -44,6 +44,7 @@ export default {
|
||||
padding: 20px 0;
|
||||
min-height: 200px;
|
||||
max-height: 600px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
|
||||
@ -4,19 +4,21 @@
|
||||
|
||||
当没有底部按钮时，右侧内容会居中显示。
|
||||
|
||||
:::demo
|
||||
```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`。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
@ -36,6 +38,7 @@
|
||||
</div>
|
||||
</zan-card>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@ -20,50 +20,59 @@ export default {
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-cell title="单元格1" value="单元格1内容"></zan-cell>
|
||||
<zan-cell title="单元格2" value="单元格2内容"></zan-cell>
|
||||
</zan-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### 标题带描述信息
|
||||
|
||||
传入`label`属性，属性值为描述信息的值。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
:::
|
||||
|
||||
### 带图标
|
||||
|
||||
传入`icon`属性。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-cell title="起码运动馆" icon="home"></zan-cell>
|
||||
<zan-cell title="线下门店" icon="location"></zan-cell>
|
||||
</zan-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### 可点击的链接
|
||||
|
||||
传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<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`，`icon`和`title`的`slot`。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<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-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@ -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组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@ -15,11 +55,15 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用状态
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@ -31,13 +75,17 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Checkbox组
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-checkbox-group v-model="result">
|
||||
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-checkbox-group>
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox-group v-model="result">
|
||||
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-checkbox-group>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@ -60,13 +108,17 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用Checkbox组
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-checkbox-group v-model="result" disabled>
|
||||
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-checkbox-group>
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox-group v-model="result" disabled>
|
||||
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-checkbox-group>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@ -83,9 +135,11 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 与Cell组件一起使用
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-checkbox-group v-model="result">
|
||||
<zan-cell-group>
|
||||
@ -110,6 +164,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Checkbox API
|
||||
|
||||
|
||||
@ -30,6 +30,7 @@ export default {
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-button @click="handleAlertClick">alert</zan-button>
|
||||
|
||||
@ -63,6 +64,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
|
||||
根据`type`属性显示不同的输入框。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
|
||||
@ -13,26 +14,31 @@
|
||||
<zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
|
||||
</zan-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### 无label的输入框
|
||||
|
||||
不传入`label`属性即可。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" placeholder="请输入用户名"></zan-field>
|
||||
</zan-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### 监听change事件
|
||||
|
||||
监听组件的`change`事件。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
|
||||
</zan-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@ -2,6 +2,6 @@
|
||||
|
||||
### ynpm安装
|
||||
|
||||
```
|
||||
```shell
|
||||
npm i @youzan/zanui-vue -S
|
||||
```
|
||||
|
||||
@ -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>
|
||||
.page-loading__example{
|
||||
.demo-loading__example{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 20px;
|
||||
@ -36,11 +8,38 @@ l## Switch组件
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.page-loading__example--with-bg {
|
||||
.demo-loading__example--with-bg {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.page-loading {
|
||||
.demo-loading {
|
||||
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>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -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 面板
|
||||
|
||||
面板只是一个容器，里面可以放入自定义的内容。
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
```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 class="panel-content">
|
||||
panel内容
|
||||
</div>
|
||||
</zan-panel>
|
||||
```
|
||||
:::
|
||||
|
||||
### 高级用法
|
||||
|
||||
使用具名`slot`自定义内容。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-panel title="标题" desc="标题描述" status="状态">
|
||||
<zan-card
|
||||
@ -61,6 +78,7 @@
|
||||
</div>
|
||||
</zan-panel>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@ -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组件
|
||||
|
||||
模仿iOS中的`UIPickerView`。
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div class="zan-button-1">
|
||||
<zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
|
||||
@ -54,6 +55,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
### 完整引入
|
||||
|
||||
```
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import ZanUI from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/index.css';
|
||||
@ -12,7 +12,7 @@ Vue.use(ZanUI);
|
||||
|
||||
### 按需引入
|
||||
|
||||
```
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Button, Cell } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/button.css';
|
||||
|
||||
@ -1,8 +1,25 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b radio {
|
||||
.zan-radios {
|
||||
padding: 0 20px;
|
||||
|
||||
.zan-radio {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio: '1'
|
||||
radio1: '1',
|
||||
radio2: '2',
|
||||
radio3: '1',
|
||||
radio4: '1'
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -12,9 +29,12 @@ export default {
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
|
||||
<zan-radio name="2" v-model="radio1">单选框2</zan-radio>
|
||||
<div class="zan-radios">
|
||||
<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
|
||||
<zan-radio name="2" v-model="radio1">单选框2</zan-radio>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@ -26,12 +46,16 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用状态
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
|
||||
<zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
|
||||
<div class="zan-radios">
|
||||
<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
|
||||
<zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@ -43,15 +67,19 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### radio组
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-radio-group v-model="radio3">
|
||||
<zan-radio name="1">单选框1</zan-radio>
|
||||
<zan-radio name="2">单选框2</zan-radio>
|
||||
</zan-radio-group>
|
||||
|
||||
<div class="zan-radios">
|
||||
<zan-radio-group v-model="radio3">
|
||||
<zan-radio name="1">单选框1</zan-radio>
|
||||
<zan-radio name="2">单选框2</zan-radio>
|
||||
</zan-radio-group>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
@ -62,9 +90,11 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 与Cell组件一起使用
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-radio-group v-model="radio4">
|
||||
<zan-cell-group>
|
||||
@ -83,6 +113,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Radio API
|
||||
|
||||
|
||||
@ -1,17 +1,4 @@
|
||||
## Search 组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
|
||||
```html
|
||||
<zan-search
|
||||
placeholder="商品名称"
|
||||
@search="goSearch"
|
||||
>
|
||||
</zan-search>
|
||||
```
|
||||
|
||||
```javascript
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
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
|
||||
|
||||
|
||||
@ -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 步骤条
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
|
||||
<zan-step>买家下单</zan-step>
|
||||
@ -10,6 +41,8 @@
|
||||
<zan-step>交易完成</zan-step>
|
||||
</zan-steps>
|
||||
|
||||
<zan-button @click="nextStep">下一步</zan-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
@ -26,9 +59,11 @@ export default {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 只显示步骤条
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-steps :active="active">
|
||||
<zan-step>买家下单</zan-step>
|
||||
@ -37,6 +72,7 @@ export default {
|
||||
<zan-step>交易完成</zan-step>
|
||||
</zan-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### Steps API
|
||||
|
||||
@ -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组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div class="page-switch">
|
||||
<h1 class="page-title">Switch</h1>
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<div class="page-switch">
|
||||
<div class="page-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
|
||||
<div class="page-switch__text">{{switchStateText}}</div>
|
||||
</div>
|
||||
<div class="page-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
|
||||
<div class="page-switch__text">ON, DISABLED</div>
|
||||
</div>
|
||||
<div class="page-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
|
||||
<div class="page-switch__text">OFF, DISABLED</div>
|
||||
</div>
|
||||
<div class="page-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
|
||||
<div class="page-switch__text">ON, 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 class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
|
||||
<div class="demo-switch__text">{{switchStateText}}</div>
|
||||
</div>
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
|
||||
<div class="demo-switch__text">ON, DISABLED</div>
|
||||
</div>
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
|
||||
<div class="demo-switch__text">OFF, DISABLED</div>
|
||||
</div>
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
|
||||
<div class="demo-switch__text">ON, LOADING</div>
|
||||
</div>
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
|
||||
<div class="demo-switch__text">OFF, LOADING</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@ -50,6 +64,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@ -1,17 +1,52 @@
|
||||
<style>
|
||||
.tags-container {
|
||||
padding: 5px 15px;
|
||||
|
||||
.zan-tag + .zan-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Tag 组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-tag>返现</zan-tag>
|
||||
<zan-tag :plain="true">返现</zan-tag>
|
||||
<div class="tags-container">
|
||||
<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
|
||||
<zan-tag type="danger">返现</zan-tag>
|
||||
<zan-tag type="success">返现</zan-tag>
|
||||
<zan-tag type="success" :plain="true">返现</zan-tag>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger">返现</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
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div class="waterfall">
|
||||
<div
|
||||
@ -62,6 +63,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@ -7,17 +7,19 @@ export default {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-search">
|
||||
<h1 class="page-title">Search</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<zan-search placeholder="商品名称" @search="goSearch">
|
||||
<zan-search placeholder="商品名称" @search="goSearch">
|
||||
</zan-search>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.page-badge {
|
||||
padding: 0 15px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div
|
||||
class="zan-checkbox"
|
||||
:class="{
|
||||
'is-disabled': isDisabled
|
||||
'zan-checkbox--disabled': isDisabled
|
||||
}">
|
||||
<span class="zan-checkbox__input">
|
||||
<input
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div
|
||||
class="zan-radio"
|
||||
:class="{
|
||||
'is-disabled': isDisabled
|
||||
'zan-radio--disabled': isDisabled
|
||||
}">
|
||||
<span class="zan-radio__input">
|
||||
<input
|
||||
@ -44,6 +44,7 @@ export default {
|
||||
|
||||
currentValue: {
|
||||
get() {
|
||||
console.log(this.value);
|
||||
return this.isGroup && this.parentGroup ? this.parentGroup.value : this.value;
|
||||
},
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="zan-step" :class="`zan-step--${status}`">
|
||||
<div class="zan-step" :class="statusClass">
|
||||
<div class="zan-step__circle-container">
|
||||
<i class="zan-step__circle" v-if="status !== 'process'"></i>
|
||||
<i class="zan-icon zan-icon-checked" v-else></i>
|
||||
@ -31,6 +31,10 @@ export default {
|
||||
} else if (index === active) {
|
||||
return 'process';
|
||||
}
|
||||
},
|
||||
statusClass() {
|
||||
const status = this.status;
|
||||
return status ? 'zan-step--' + status : '';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -2,7 +2,9 @@
|
||||
|
||||
@component-namespace zan {
|
||||
@b checkbox {
|
||||
@when disabled {
|
||||
overflow: hidden;
|
||||
|
||||
@m disabled {
|
||||
.zan-icon {
|
||||
color: #d1dbe5;
|
||||
}
|
||||
@ -12,6 +14,7 @@
|
||||
position: relative;
|
||||
height: 22px;
|
||||
margin-right: 15px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
@e control {
|
||||
@ -26,6 +29,8 @@
|
||||
|
||||
@e label {
|
||||
line-height: 22px;
|
||||
margin-left: 37px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.zan-icon {
|
||||
|
||||
@ -2,7 +2,9 @@
|
||||
|
||||
@component-namespace zan {
|
||||
@b radio {
|
||||
@when disabled {
|
||||
overflow: hidden;
|
||||
|
||||
@m disabled {
|
||||
.zan-icon {
|
||||
color: #d1dbe5;
|
||||
}
|
||||
@ -11,7 +13,7 @@
|
||||
@e input {
|
||||
position: relative;
|
||||
height: 22px;
|
||||
margin-right: 15px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
@e control {
|
||||
@ -26,6 +28,8 @@
|
||||
|
||||
@e label {
|
||||
line-height: 22px;
|
||||
display: block;
|
||||
margin-left: 37px;
|
||||
}
|
||||
|
||||
.zan-icon {
|
||||
|
||||
@ -53,6 +53,7 @@
|
||||
margin: 0 0 10px;
|
||||
overflow: hidden;
|
||||
padding-bottom: 20px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
@ -105,7 +106,7 @@
|
||||
|
||||
.zan-step__circle-container {
|
||||
left: auto;
|
||||
right: -6px;
|
||||
right: -8px;
|
||||
}
|
||||
|
||||
.zan-step__line {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user