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

vant components

Browse Source
This commit is contained in:
cookfront
2017-04-19 17:44:57 +08:00
parent c6014ad62d
commit 06e333eb3e
145 changed files with 1679 additions and 1619 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
docs/examples-docs/actionsheet.md
View File

@@ -5,7 +5,7 @@
color: #06BF04;
}
.zan-button {
.van-button {
margin-left: 15px;
}
@@ -63,7 +63,7 @@ export default {
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
@@ -71,8 +71,8 @@ export default {
```js
import Vue from 'vue';
import { ActionSheet } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/actionSheet.css';
import { ActionSheet } from 'vant';
import 'vant/lib/vant-css/actionSheet.css';
Vue.component(ActionSheet.name, ActionSheet);
```
@@ -82,11 +82,11 @@ Vue.component(ActionSheet.name, ActionSheet);
如果你只是想在某个组件中使用，你可以在对应组件中注册`ActionSheet`组件，这样只能在你注册的组件中使用`ActionSheet`：
```js
import { ActionSheet } from '@youzan/zanui-vue';
import { ActionSheet } from 'vant';
export default {
components: {
'zan-actionSheet': ActionSheet
'van-actionSheet': ActionSheet
}
};
```
@@ -99,9 +99,9 @@ export default {
:::demo 基础用法
```html
<zan-button @click="show1 = true">弹出actionsheet</zan-button>
<zan-actionsheet v-model="show1" :actions="actions1">
</zan-actionsheet>
<van-button @click="show1 = true">弹出actionsheet</van-button>
<van-actionsheet v-model="show1" :actions="actions1">
</van-actionsheet>
<script>
export default {
@@ -148,9 +148,9 @@ export default {
:::demo 带取消按钮的ActionSheet
```html
<zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
<zan-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
</zan-actionsheet>
<van-button @click="show2 = true">弹出带取消按钮的actionsheet</van-button>
<van-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
</van-actionsheet>
<script>
export default {
@@ -191,16 +191,16 @@ export default {
:::demo 带标题的ActionSheet
```html
<zan-button @click="show3 = true">弹出带标题的actionsheet</zan-button>
<zan-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
<van-button @click="show3 = true">弹出带标题的actionsheet</van-button>
<van-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
<p>一些内容</p>
</zan-actionsheet>
</van-actionsheet>
```
:::
点击以下按钮查看手机端效果：
<zan-button @click="mobileShow = true">点击查看手机端效果</zan-button>
<van-button @click="mobileShow = true">点击查看手机端效果</van-button>
<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
### API

40
docs/examples-docs/badge.md
View File

@@ -6,7 +6,7 @@
background-color: #fff;
}
.zan-badge-group {
.van-badge-group {
margin: 0 auto;
}
}
@@ -32,7 +32,7 @@
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
@@ -40,8 +40,8 @@
```js
import Vue from 'vue';
import { Badge, BadgeGroup } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/badge.css';
import { Badge, BadgeGroup } from 'vant';
import 'vant/lib/vant-css/badge.css';
Vue.component(Badge.name, Badge);
Vue.component(BadgeGroup.name, BadgeGroup);
@@ -52,12 +52,12 @@ Vue.component(BadgeGroup.name, BadgeGroup);
如果你只是想在某个组件中使用，你可以在对应组件中注册`Badge`组件，这样只能在你注册的组件中使用`Badge`：
```js
import { Badge, BadgeGroup } from '@youzan/zanui-vue';
import { Badge, BadgeGroup } from 'vant';
export default {
components: {
'zan-badge': Badge,
'zan-badge-group': BadgeGroup
'van-badge': Badge,
'van-badge-group': BadgeGroup
}
};
```
@@ -71,29 +71,29 @@ export default {
:::demo 基础用法
```html
<div class="badge-group-wrapper">
<zan-badge-group>
<zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
<zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
<zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
<zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
</zan-badge-group>
<van-badge-group>
<van-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></van-badge>
<van-badge title="花式寿司" info="99" @click="onItemClick"></van-badge>
<van-badge title="火炽寿司" @click="onItemClick"></van-badge>
<van-badge title="手握寿司" info="199" @click="onItemClick"></van-badge>
</van-badge-group>
</div>
```
:::
#### 选中某个badge
如果想默认选中某个`badge`，你可以在`zan-badge-group`上设置`activeKey`属性，属性值为对应的`badge`索引。
如果想默认选中某个`badge`，你可以在`van-badge-group`上设置`activeKey`属性，属性值为对应的`badge`索引。
:::demo 选中某个badge
```html
<div class="badge-group-wrapper">
<zan-badge-group :active-key="2">
<zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
<zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
<zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
<zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
</zan-badge-group>
<van-badge-group :active-key="2">
<van-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></van-badge>
<van-badge title="花式寿司" info="99" @click="onItemClick"></van-badge>
<van-badge title="火炽寿司" @click="onItemClick"></van-badge>
<van-badge title="手握寿司" info="199" @click="onItemClick"></van-badge>
</van-badge-group>
</div>
```
:::

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

@@ -1,10 +1,10 @@
<style>
@component-namespace demo {
@b button {
.zan-row {
.van-row {
padding: 0 15px;
}
.zan-col {
.van-col {
margin-bottom: 10px;
}
}
@@ -15,7 +15,7 @@
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
@@ -23,8 +23,8 @@
```js
import Vue from 'vue';
import { Button } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/button.css';
import { Button } from 'vant';
import 'vant/lib/vant-css/button.css';
Vue.component(Button.name, Button);
```
@@ -34,11 +34,11 @@ Vue.component(Button.name, Button);
如果你只是想在某个组件中使用，你可以在对应组件中注册`Button`组件，这样只能在你注册的组件中使用`Button`：
```js
import { Button } from '@youzan/zanui-vue';
import { Button } from 'vant';
export default {
components: {
'zan-button': Button
'van-button': Button
}
};
```
@@ -51,17 +51,17 @@ export default {
:::demo 按钮功能
```html
<zan-row>
<zan-col span="24">
<zan-button block>default</zan-button>
</zan-col>
<zan-col span="24">
<zan-button type="primary" block>primary</zan-button>
</zan-col>
<zan-col span="24">
<zan-button type="danger" block>danger</zan-button>
</zan-col>
</zan-row>
<van-row>
<van-col span="24">
<van-button block>default</van-button>
</van-col>
<van-col span="24">
<van-button type="primary" block>primary</van-button>
</van-col>
<van-col span="24">
<van-button type="danger" block>danger</van-button>
</van-col>
</van-row>
```
:::
@@ -71,11 +71,11 @@ export default {
:::demo 禁用状态
```html
<zan-row>
<zan-col span="24">
<zan-button disabled block>diabled</zan-button>
</zan-col>
</zan-row>
<van-row>
<van-col span="24">
<van-button disabled block>diabled</van-button>
</van-col>
</van-row>
```
:::
@@ -85,26 +85,26 @@ export default {
:::demo 按钮尺寸
```html
<zan-row>
<zan-col span="24">
<zan-button size="large">large</zan-button>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="24">
<zan-button size="normal">normal</zan-button>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="24">
<zan-button size="small">small</zan-button>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="24">
<zan-button size="mini">mini</zan-button>
</zan-col>
</zan-row>
<van-row>
<van-col span="24">
<van-button size="large">large</van-button>
</van-col>
</van-row>
<van-row>
<van-col span="24">
<van-button size="normal">normal</van-button>
</van-col>
</van-row>
<van-row>
<van-col span="24">
<van-button size="small">small</van-button>
</van-col>
</van-row>
<van-row>
<van-col span="24">
<van-button size="mini">mini</van-button>
</van-col>
</van-row>
```
:::
@@ -114,11 +114,11 @@ export default {
:::demo 自定义按钮标签
```html
<zan-row>
<zan-col span="24">
<zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
</zan-col>
</zan-row>
<van-row>
<van-col span="24">
<van-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</van-button>
</van-col>
</van-row>
```
:::
@@ -128,14 +128,14 @@ export default {
:::demo loading按钮
```html
<zan-row>
<zan-col span="24">
<zan-button type="primary" loading block>loading</zan-button>
</zan-col>
<zan-col span="24">
<zan-button loading block></zan-button>
</zan-col>
</zan-row>
<van-row>
<van-col span="24">
<van-button type="primary" loading block>loading</van-button>
</van-col>
<van-col span="24">
<van-button loading block></van-button>
</van-col>
</van-row>
```
:::
@@ -145,19 +145,19 @@ export default {
:::demo
```html
<zan-row>
<zan-col span="24">
<zan-button type="primary" bottom-action>立即购买</zan-button>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="12">
<zan-button bottom-action>加入购物车</zan-button>
</zan-col>
<zan-col span="12">
<zan-button type="primary" bottom-action>立即购买</zan-button>
</zan-col>
</zan-row>
<van-row>
<van-col span="24">
<van-button type="primary" bottom-action>立即购买</van-button>
</van-col>
</van-row>
<van-row>
<van-col span="12">
<van-button bottom-action>加入购物车</van-button>
</van-col>
<van-col span="12">
<van-button type="primary" bottom-action>立即购买</van-button>
</van-col>
</van-row>
```
:::

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

@@ -2,7 +2,7 @@
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
@@ -10,8 +10,8 @@
```js
import Vue from 'vue';
import { Card } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/card.css';
import { Card } from 'vant';
import 'vant/lib/vant-css/card.css';
Vue.component(Card.name, Card);
```
@@ -21,11 +21,11 @@ Vue.component(Card.name, Card);
如果你只是想在某个组件中使用，你可以在对应组件中注册`Card`组件，这样只能在你注册的组件中使用`Card`：
```js
import { Card } from '@youzan/zanui-vue';
import { Card } from 'vant';
export default {
components: {
'zan-card': Card
'van-card': Card
}
};
```
@@ -38,11 +38,11 @@ export default {
:::demo 基础用法
```html
<zan-card
<van-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="描述"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
</zan-card>
</van-card>
```
:::
@@ -52,20 +52,20 @@ export default {
:::demo 高级用法
```html
<zan-card
<van-card
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 class="van-card__row" slot="title">
<h4 class="van-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="van-card__price">¥ 2.00</span>
</div>
<div class="zan-card__row" slot="desc">
<span class="zan-card__num">x 2</span>
<div class="van-card__row" slot="desc">
<span class="van-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 class="van-card__footer" slot="footer">
<van-button size="mini">按钮一</van-button>
<van-button size="mini">按钮二</van-button>
</div>
</zan-card>
</van-card>
```
:::

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

@@ -12,7 +12,7 @@ export default {
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
@@ -20,8 +20,8 @@ export default {
```js
import Vue from 'vue';
import { Cell } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/cell.css';
import { Cell } from 'vant';
import 'vant/lib/vant-css/cell.css';
Vue.component(Cell.name, Cell);
```
@@ -31,11 +31,11 @@ Vue.component(Cell.name, Cell);
如果你只是想在某个组件中使用，你可以在对应组件中注册`Cell`组件，这样只能在你注册的组件中使用`Cell`：
```js
import { Cell } from '@youzan/zanui-vue';
import { Cell } from 'vant';
export default {
components: {
'zan-cell': Cell
'van-cell': Cell
}
};
```
@@ -46,11 +46,10 @@ 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>
<van-cell-group>
<van-cell title="单元格1" value="单元格1内容"></van-cell>
<van-cell title="单元格2" value="单元格2内容"></van-cell>
</van-cell-group>
```
:::
@@ -60,10 +59,10 @@ export default {
:::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>
<van-cell-group>
<van-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></van-cell>
<van-cell title="单元格2" label="描述信息"></van-cell>
</van-cell-group>
```
:::
@@ -73,10 +72,10 @@ export default {
:::demo 带图标
```html
<zan-cell-group>
<zan-cell title="起码运动馆" icon="home"></zan-cell>
<zan-cell title="线下门店" icon="location"></zan-cell>
</zan-cell-group>
<van-cell-group>
<van-cell title="起码运动馆" icon="home"></van-cell>
<van-cell title="线下门店" icon="location"></van-cell>
</van-cell-group>
```
:::
@@ -86,10 +85,10 @@ export default {
:::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>
<van-cell-group>
<van-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></van-cell>
<van-cell title="线下门店" icon="location" url="http://youzan.com" is-link></van-cell>
</van-cell-group>
```
:::
@@ -99,15 +98,15 @@ export default {
:::demo 高级用法
```html
<zan-cell-group>
<zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
<van-cell-group>
<van-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
<template slot="title">
<span class="zan-cell-text">起码运动馆</span>
<zan-tag type="danger">官方</zan-tag>
<span class="van-cell-text">起码运动馆</span>
<van-tag type="danger">官方</van-tag>
</template>
</zan-cell>
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
</zan-cell-group>
</van-cell>
<van-cell title="线下门店" icon="location" url="http://youzan.com" is-link></van-cell>
</van-cell-group>
```
:::

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

@@ -1,10 +1,10 @@
<style>
@component-namespace demo {
@b checkbox {
.zan-checkbox-wrapper {
.van-checkbox-wrapper {
padding: 0 20px;
.zan-checkbox {
.van-checkbox {
margin: 10px 0;
}
}
@@ -39,7 +39,7 @@ export default {
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
@@ -47,8 +47,8 @@ export default {
```js
import Vue from 'vue';
import { Checkbox, CheckboxGroup } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/checkbox.css';
import { Checkbox, CheckboxGroup } from 'vant';
import 'vant/lib/vant-css/checkbox.css';
Vue.component(Checkbox.name, Checkbox);
Vue.component(CheckboxGroup.name, CheckboxGroup);
@@ -59,24 +59,26 @@ Vue.component(CheckboxGroup.name, CheckboxGroup);
如果你只是想在某个组件中使用，你可以在对应组件中注册`Checkbox`组件，这样只能在你注册的组件中使用`Checkbox`：
```js
import { Checkbox, CheckboxGroup } from '@youzan/zanui-vue';
import { Checkbox, CheckboxGroup } from 'vant';
export default {
components: {
'zan-checkbox': Checkbox,
'zan-checkbox-group': CheckboxGroup
'van-checkbox': Checkbox,
'van-checkbox-group': CheckboxGroup
}
};
```
### 基础用法
### 代码演示
#### 基础用法
通过`v-model`绑定值即可。当`Checkbox`选中时，绑定的值即为`true`，否则为`false`。当单个`Checkbox`使用时，更建议使用`Switch`组件。
:::demo 基础用法
```html
<div class="zan-checkbox-wrapper">
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
<div class="van-checkbox-wrapper">
<van-checkbox v-model="checkbox1">复选框1</van-checkbox>
</div>
<script>
@@ -91,14 +93,14 @@ export default {
```
:::
### 禁用状态
#### 禁用状态
设置`disabled`属性即可，此时`Checkbox`不能点击。
:::demo 禁用状态
```html
<div class="zan-checkbox-wrapper">
<zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
<div class="van-checkbox-wrapper">
<van-checkbox v-model="checkbox2">复选框2</van-checkbox>
</div>
<script>
@@ -113,16 +115,16 @@ export default {
```
:::
### Checkbox组
#### Checkbox组
需要与`zan-checkbox-group`一起使用，值通过`v-model`绑定在`zan-checkbox-group`上，例如下面的`result`，此时`result`的值是一个数组。数组中的项即为选中的`Checkbox`的`name`属性设置的值。
需要与`van-checkbox-group`一起使用，值通过`v-model`绑定在`van-checkbox-group`上，例如下面的`result`，此时`result`的值是一个数组。数组中的项即为选中的`Checkbox`的`name`属性设置的值。
:::demo Checkbox组
```html
<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 class="van-checkbox-wrapper">
<van-checkbox-group v-model="result">
<van-checkbox v-for="item in list" :name="item">复选框{{item}}</van-checkbox>
</van-checkbox-group>
</div>
<script>
@@ -148,16 +150,16 @@ export default {
```
:::
### 禁用Checkbox组
#### 禁用Checkbox组
禁用`zan-checkbox-group`，此时整个组都不可点击。
禁用`van-checkbox-group`，此时整个组都不可点击。
:::demo 禁用Checkbox组
```html
<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 class="van-checkbox-wrapper">
<van-checkbox-group v-model="result" disabled>
<van-checkbox v-for="item in list" :name="item">复选框{{item}}</van-checkbox>
</van-checkbox-group>
</div>
<script>
@@ -177,19 +179,19 @@ export default {
```
:::
### 与Cell组件一起使用
#### 与Cell组件一起使用
此时你需要再引入`Cell`和`CellGroup`组件。
:::demo 与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>
<van-checkbox-group v-model="result">
<van-cell-group>
<van-cell v-for="item in list">
<van-checkbox :name="item">复选框{{item}}</van-checkbox>
</van-cell>
</van-cell-group>
</van-checkbox-group>
<script>
export default {

70
docs/examples-docs/datetime-picker.md
View File

@@ -26,13 +26,43 @@ export default {
## Datetime Picker 时间选择
模仿iOS中的`UIPickerView`。
### 使用指南
### 基础用法
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
你可以在全局注册`Radio`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Radio`组件了：
```js
import Vue from 'vue';
import { DatetimePicker } from 'vant';
Vue.component(DatetimePicker.name, DatetimePicker);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`DatetimePicker`组件，这样只能在你注册的组件中使用`DatetimePicker`：
```js
import { DatetimePicker } from 'vant';
export default {
components: {
'van-datetime-picker': DatetimePicker
}
};
```
### 代码演示
#### 基础用法
:::demo 基础用法
```html
<zan-datetime-picker
<van-datetime-picker
v-model="currentDate"
type="datetime"
format="yyyy.mm.dd hh时 mm分"
@@ -40,7 +70,7 @@ export default {
:max-hour="maxHour"
:min-date="minDate"
@change="handlePickerChange">
</zan-datetime-picker>
</van-datetime-picker>
<script>
@@ -63,6 +93,38 @@ export default {
```
:::
#### 选择日期
:::demo 选择日期
```html
<van-datetime-picker
v-model="currentDate"
type="date"
format="yyyy.mm.dd hh时 mm分"
:min-hour="minHour"
:max-hour="maxHour"
:min-date="minDate"
@change="handlePickerChange">
</van-datetime-picker>
```
:::
#### 选择时间
:::demo 选择时间
```html
<van-datetime-picker
v-model="currentDate"
type="time"
format="yyyy.mm.dd hh时 mm分"
:min-hour="minHour"
:max-hour="maxHour"
:min-date="minDate"
@change="handlePickerChange">
</van-datetime-picker>
```
:::
### API

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

@@ -1,7 +1,7 @@
<style>
@component-namespace demo {
@b dialog {
.zan-button {
.van-button {
margin: 15px;
}
}
@@ -54,7 +54,7 @@ export default {
`Dialog`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它，它接受一个数组作为参数，数组中的每一项对应了图片链接。
```js
import { Dialog } from '@youzan/zanui-vue';
import { Dialog } from 'vant';
```
### 代码演示
@@ -65,8 +65,8 @@ import { Dialog } from '@youzan/zanui-vue';
:::demo 消息提示
```html
<zan-button @click="handleAlertClick">alert</zan-button>
<zan-button @click="handleAlert2Click">无标题alert</zan-button>
<van-button @click="handleAlertClick">alert</van-button>
<van-button @click="handleAlert2Click">无标题alert</van-button>
<script>
export default {
@@ -99,7 +99,7 @@ export default {
:::demo 消息确认
```html
<zan-button @click="handleConfirmClick">confirm</zan-button>
<van-button @click="handleConfirmClick">confirm</van-button>
<script>
export default {
@@ -122,7 +122,7 @@ export default {
点击以下按钮查看手机端效果：
<zan-button @click="mobileShow = true">点击查看手机端效果</zan-button>
<van-button @click="mobileShow = true">点击查看手机端效果</van-button>
<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
### 方法

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

@@ -1,7 +1,7 @@
<style>
@component-namespace demo {
@b field {
.zan-field-wrapper {
.van-field-wrapper {
padding: 0 10px;
}
}
@@ -24,7 +24,7 @@ export default {
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
@@ -32,8 +32,8 @@ export default {
```js
import Vue from 'vue';
import { Field } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/field.css';
import { Field } from 'vant';
import 'vant/lib/vant-css/field.css';
Vue.component(Field.name, Field);
```
@@ -43,11 +43,11 @@ Vue.component(Field.name, Field);
如果你只是想在某个组件中使用，你可以在对应组件中注册`Field`组件，这样只能在你注册的组件中使用`Field`：
```js
import { Field } from '@youzan/zanui-vue';
import { Field } from 'vant';
export default {
components: {
'zan-field': Field
'van-field': Field
}
};
```
@@ -60,11 +60,11 @@ export default {
:::demo 基础用法
```html
<zan-cell-group>
<zan-field type="text" label="用户名：" placeholder="请输入用户名" v-model="username" required></zan-field>
<zan-field type="password" label="密码：" placeholder="请输入密码" required></zan-field>
<zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍" required></zan-field>
</zan-cell-group>
<van-cell-group>
<van-field type="text" label="用户名：" placeholder="请输入用户名" v-model="username" required></van-field>
<van-field type="password" label="密码：" placeholder="请输入密码" required></van-field>
<van-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍" required></van-field>
</van-cell-group>
```
:::
@@ -74,9 +74,9 @@ export default {
:::demo 无label的输入框
```html
<zan-cell-group>
<zan-field type="text" placeholder="请输入用户名"></zan-field>
</zan-cell-group>
<van-cell-group>
<van-field type="text" placeholder="请输入用户名"></van-field>
</van-cell-group>
```
:::
@@ -86,8 +86,8 @@ export default {
:::demo 带border的输入框
```html
<div class="zan-field-wrapper">
<zan-field type="text" placeholder="请输入用户名" border></zan-field>
<div class="van-field-wrapper">
<van-field type="text" placeholder="请输入用户名" border></van-field>
</div>
```
:::
@@ -98,9 +98,9 @@ export default {
:::demo 禁用的输入框
```html
<zan-cell-group>
<zan-field label="用户名：" type="text" placeholder="请输入用户名" v-model="username" disabled></zan-field>
</zan-cell-group>
<van-cell-group>
<van-field label="用户名：" type="text" placeholder="请输入用户名" v-model="username" disabled></van-field>
</van-cell-group>
```
:::
@@ -110,9 +110,9 @@ export default {
:::demo 错误的输入框
```html
<zan-cell-group>
<zan-field label="用户名：" type="text" placeholder="请输入用户名" error></zan-field>
</zan-cell-group>
<van-cell-group>
<van-field label="用户名：" type="text" placeholder="请输入用户名" error></van-field>
</van-cell-group>
```
:::
@@ -123,9 +123,9 @@ export default {
:::demo 错误的输入框
```html
<zan-cell-group>
<zan-field label="留言：" type="textarea" placeholder="请输入留言" rows="1" autosize></zan-field>
</zan-cell-group>
<van-cell-group>
<van-field label="留言：" type="textarea" placeholder="请输入留言" rows="1" autosize></van-field>
</van-cell-group>
```
:::

228
docs/examples-docs/icon.md
View File

@@ -1,11 +1,11 @@
<style>
@component-namespace demo {
@b icon {
.zan-col {
.van-col {
text-align: center;
}
.zan-icon {
.van-icon {
font-size: 45px;
display: block;
margin: 15px 0;
@@ -18,7 +18,7 @@
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
如果你已经按照快速上手中引入了整个，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
@@ -26,8 +26,8 @@
```js
import Vue from 'vue';
import { Icon } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/icon.css';
import { Icon } from 'vant';
import 'vant/lib/vant-css/icon.css';
Vue.component(Icon.name, Icon);
```
@@ -37,11 +37,11 @@ Vue.component(Icon.name, Icon);
如果你只是想在某个组件中使用，你可以在对应组件中注册`Icon`组件，这样只能在你注册的组件中使用`Icon`：
```js
import { Icon } from '@youzan/zanui-vue';
import { Icon } from 'vant';
export default {
components: {
'zan-icon': Icon
'van-icon': Icon
}
};
```
@@ -54,142 +54,142 @@ export default {
:::demo 所有Icon
```html
<zan-row>
<zan-col span="8">
<zan-icon name="qr-invalid"></zan-icon>
<van-row>
<van-col span="8">
<van-icon name="qr-invalid"></van-icon>
<span>qr-invalid</span>
</zan-col>
<zan-col span="8">
<zan-icon name="qr"></zan-icon>
</van-col>
<van-col span="8">
<van-icon name="qr"></van-icon>
<span>qr</span>
</zan-col>
<zan-col span="8">
<zan-icon name="exchange"></zan-icon>
</van-col>
<van-col span="8">
<van-icon name="exchange"></van-icon>
<span>exchange</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="close"></zan-icon>
</van-col>
</van-row>
<van-row>
<van-col span="8">
<van-icon name="close"></van-icon>
<span>close</span>
</zan-col>
<zan-col span="8">
<zan-icon name="location"></zan-icon>
</van-col>
<van-col span="8">
<van-icon name="location"></van-icon>
<span>location</span>
</zan-col>
<zan-col span="8">
<zan-icon name="upgrade"></zan-icon>
</van-col>
<van-col span="8">
<van-icon name="upgrade"></van-icon>
<span>upgrade</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="check"></zan-icon>
</van-col>
</van-row>
<van-row>
<van-col span="8">
<van-icon name="check"></van-icon>
<span>check</span>
</zan-col>
<zan-col span="8">
<zan-icon name="checked"></zan-icon>
</van-col>
<van-col span="8">
<van-icon name="checked"></van-icon>
<span>checked</span>
</zan-col>
<zan-col span="8">
<zan-icon name="like-o"></zan-icon>
</van-col>
<van-col span="8">
<van-icon name="like-o"></van-icon>
<span>like-o</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="like" style="color: red;"></zan-icon>
</van-col>
</van-row>
<van-row>
<van-col span="8">
<van-icon name="like" style="color: red;"></van-icon>
<span>like</span>
</zan-col>
<zan-col span="8">
<zan-icon name="chat"></zan-icon>
</van-col>
<van-col span="8">
<van-icon name="chat"></van-icon>
<span>chat</span>
</zan-col>
<zan-col span="8">
<zan-icon name="shop"></zan-icon>
</van-col>
<van-col span="8">
<van-icon name="shop"></van-icon>
<span>shop</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="photograph"></zan-icon>
</van-col>
</van-row>
<van-row>
<van-col span="8">
<van-icon name="photograph"></van-icon>
<span>photograph</span>
</zan-col>
<zan-col span="8">
<zan-icon name="add"></zan-icon>
</van-col>
<van-col span="8">
<van-icon name="add"></van-icon>
<span>add</span>
</zan-col>
<zan-col span="8">
<zan-icon name="add2"></zan-icon>
</van-col>
<van-col span="8">
<van-icon name="add2"></van-icon>
<span>add2</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="photo"></zan-icon>
</van-col>
</van-row>
<van-row>
<van-col span="8">
<van-icon name="photo"></van-icon>
<span>photo</span>
</zan-col>
<zan-col span="8">
<zan-icon name="logistics"></zan-icon>
</van-col>
<van-col span="8">
<van-icon name="logistics"></van-icon>
<span>logistics</span>
</zan-col>
<zan-col span="8">
<zan-icon name="edit"></zan-icon>
</van-col>
<van-col span="8">
<van-icon name="edit"></van-icon>
<span>edit</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="passed"></zan-icon>
</van-col>
</van-row>
<van-row>
<van-col span="8">
<van-icon name="passed"></van-icon>
<span>passed</span>
</zan-col>
<zan-col span="8">
<zan-icon name="cart"></zan-icon>
</van-col>
<van-col span="8">
<van-icon name="cart"></van-icon>
<span>cart</span>
</zan-col>
<zan-col span="8">
<zan-icon name="arrow"></zan-icon>
</van-col>
<van-col span="8">
<van-icon name="arrow"></van-icon>
<span>arrow</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="gift"></zan-icon>
</van-col>
</van-row>
<van-row>
<van-col span="8">
<van-icon name="gift"></van-icon>
<span>gift</span>
</zan-col>
<zan-col span="8">
<zan-icon name="search"></zan-icon>
</van-col>
<van-col span="8">
<van-icon name="search"></van-icon>
<span>search</span>
</zan-col>
<zan-col span="8">
<zan-icon name="clear"></zan-icon>
</van-col>
<van-col span="8">
<van-icon name="clear"></van-icon>
<span>clear</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="success"></zan-icon>
</van-col>
</van-row>
<van-row>
<van-col span="8">
<van-icon name="success"></van-icon>
<span>success</span>
</zan-col>
<zan-col span="8">
<zan-icon name="fail"></zan-icon>
</van-col>
<van-col span="8">
<van-icon name="fail"></van-icon>
<span>fail</span>
</zan-col>
<zan-col span="8">
<zan-icon name="contact"></zan-icon>
</van-col>
<van-col span="8">
<van-icon name="contact"></van-icon>
<span>contact</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="wechat"></zan-icon>
</van-col>
</van-row>
<van-row>
<van-col span="8">
<van-icon name="wechat"></van-icon>
<span>wechat</span>
</zan-col>
<zan-col span="8">
<zan-icon name="alipay"></zan-icon>
</van-col>
<van-col span="8">
<van-icon name="alipay"></van-icon>
<span>alipay</span>
</zan-col>
</zan-row>
</van-col>
</van-row>
```
:::

8
docs/examples-docs/image-preview.md
View File

@@ -1,7 +1,7 @@
<style>
@component-namespace demo {
@b image-preview {
.zan-button {
.van-button {
margin-left: 15px;
}
}
@@ -34,7 +34,7 @@ export default {
`ImagePreview`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。
```js
import { ImagePreview } from '@youzan/zanui-vue';
import { ImagePreview } from 'vant';
```
### 代码演示
@@ -43,7 +43,7 @@ import { ImagePreview } from '@youzan/zanui-vue';
:::demo 基础用法
```html
<zan-button @click="handleImagePreview">预览图片</zan-button>
<van-button @click="handleImagePreview">预览图片</van-button>
<script>
import { ImagePreview } from 'src/index';
@@ -64,7 +64,7 @@ export default {
点击以下按钮查看手机端效果：
<zan-button @click="mobileShow = true">点击查看手机端效果</zan-button>
<van-button @click="mobileShow = true">点击查看手机端效果</van-button>
<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
### 方法参数

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

@@ -3,5 +3,5 @@
### ynpm安装
```shell
npm i @youzan/zanui-vue -S
npm i vant -S
```

76
docs/examples-docs/layout.md
View File

@@ -1,10 +1,10 @@
<style>
@component-namespace demo {
@b layout {
.zan-row {
.van-row {
padding: 0 20px;
}
.zan-col {
.van-col {
margin-bottom: 10px;
}
}
@@ -30,11 +30,11 @@
## Layout 布局
主要提供了`zan-row`和`zan-col`两个组件来进行行列布局。
主要提供了`van-row`和`van-col`两个组件来进行行列布局。
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
@@ -42,9 +42,9 @@
```js
import Vue from 'vue';
import { Row, Col } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/col.css';
import '@youzan/zanui-vue/lib/zanui-css/row.css';
import { Row, Col } from 'vant';
import 'vant/lib/vant-css/col.css';
import 'vant/lib/vant-css/row.css';
Vue.component(Row.name, Row);
Vue.component(Col.name, Col);
@@ -55,12 +55,12 @@ Vue.component(Col.name, Col);
如果你只是想在某个组件中使用，你可以在对应组件中注册`Row`和`Col`组件，这样只能在你注册的组件中使用`Row`和`Col`：
```js
import { Row, Col } from '@youzan/zanui-vue';
import { Row, Col } from 'vant';
export default {
components: {
'zan-row': Row,
'zan-col': Col
'van-row': Row,
'van-col': Col
}
};
```
@@ -69,54 +69,54 @@ export default {
#### 常规用法
Layout组件提供了`24列栅格`，通过在`zan-col`上添加`span`属性设置列所占的宽度百分比`(span / 24)`；此外，添加`offset`属性可以设置列的偏移宽度，计算方式与span相同。
Layout组件提供了`24列栅格`，通过在`van-col`上添加`span`属性设置列所占的宽度百分比`(span / 24)`；此外，添加`offset`属性可以设置列的偏移宽度，计算方式与span相同。
:::demo 常规用法
```html
<zan-row>
<zan-col span="8">
<van-row>
<van-col span="8">
<div class="gray">span: 8</div>
</zan-col>
<zan-col span="8">
</van-col>
<van-col span="8">
<div class="white">span: 8</div>
</zan-col>
<zan-col span="8">
</van-col>
<van-col span="8">
<div class="gray">span: 8</div>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="4">
</van-col>
</van-row>
<van-row>
<van-col span="4">
<div class="gray">span: 4</div>
</zan-col>
<zan-col span="10" offset="4">
</van-col>
<van-col span="10" offset="4">
<div class="gray">offset: 4, span: 10</div>
</zan-col>
</zan-row>
<zan-row>
<zan-col offset="12" span="12">
</van-col>
</van-row>
<van-row>
<van-col offset="12" span="12">
<div class="gray">offset: 12, span: 12</div>
</zan-col>
</zan-row>
</van-col>
</van-row>
```
:::
#### 在列元素之间增加间距
列元素之间默认间距为0，如果希望在列元素增加相同的间距，可以在`zan-row`上添加`gutter`属性来设置列元素之间的间距。
列元素之间默认间距为0，如果希望在列元素增加相同的间距，可以在`van-row`上添加`gutter`属性来设置列元素之间的间距。
:::demo 在列元素之间增加间距
```html
<zan-row gutter="10">
<zan-col span="8">
<van-row gutter="10">
<van-col span="8">
<div class="gray">span: 8</div>
</zan-col>
<zan-col span="8">
</van-col>
<van-col span="8">
<div class="gray">span: 8</div>
</zan-col>
<zan-col span="8">
</van-col>
<van-col span="8">
<div class="gray">span: 8</div>
</zan-col>
</zan-row>
</van-col>
</van-row>
```
:::

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

@@ -55,7 +55,7 @@ export default {
```js
import Vue from 'vue';
import { Lazyload } from '@youzan/zanui-vue';
import { Lazyload } from 'vant';
Vue.use(Lazyload, options);
```

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

@@ -1,7 +1,7 @@
<style>
@component-namespace demo {
@b loading {
.zan-loading {
.van-loading {
margin: 0 auto;
}
@@ -24,7 +24,7 @@
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
@@ -32,8 +32,8 @@
```js
import Vue from 'vue';
import { Loading } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/loading.css';
import { Loading } from 'vant';
import 'vant/lib/vant-css/loading.css';
Vue.component(Loading.name, Loading);
```
@@ -43,11 +43,11 @@ Vue.component(Loading.name, Loading);
如果你只是想在某个组件中使用，你可以在对应组件中注册`Loading`组件，这样只能在你注册的组件中使用`Loading`：
```js
import { Loading } from '@youzan/zanui-vue';
import { Loading } from 'vant';
export default {
components: {
'zan-loading': Loading
'van-loading': Loading
}
};
```
@@ -58,7 +58,7 @@ export default {
:::demo 渐变深色spinner
```html
<zan-loading class="some-customized-class"></zan-loading>
<van-loading class="some-customized-class"></van-loading>
```
:::
@@ -67,7 +67,7 @@ export default {
:::demo 渐变浅色spinner
```html
<div class="demo-loading__example demo-loading__example--with-bg">
<zan-loading class="some-customized-class" :color="'white'"></zan-loading>
<van-loading class="some-customized-class" :color="'white'"></van-loading>
</div>
```
:::
@@ -76,8 +76,8 @@ export default {
:::demo 单色spinner
```html
<zan-loading class="circle-loading" :type="'circle'" :color="'white'"></zan-loading>
<zan-loading class="circle-loading" :type="'circle'" :color="'black'"></zan-loading>
<van-loading class="circle-loading" :type="'circle'" :color="'white'"></van-loading>
<van-loading class="circle-loading" :type="'circle'" :color="'black'"></van-loading>
```
:::

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

@@ -1,7 +1,7 @@
<style>
@component-namespace demo {
@b panel {
.zan-panel-sum {
.van-panel-sum {
background: #fff;
text-align: right;
font-size: 14px;
@@ -14,10 +14,10 @@
}
}
.zan-panel-buttons {
.van-panel-buttons {
text-align: right;
.zan-button {
.van-button {
margin-left: 5px;
}
}
@@ -33,7 +33,7 @@
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
@@ -41,8 +41,8 @@
```js
import Vue from 'vue';
import { Panel } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/panel.css';
import { Panel } from 'vant';
import 'vant/lib/vant-css/panel.css';
Vue.component(Panel.name, Panel);
```
@@ -52,11 +52,11 @@ Vue.component(Panel.name, Panel);
如果你只是想在某个组件中使用，你可以在对应组件中注册`Panel`组件，这样只能在你注册的组件中使用`Panel`：
```js
import { Panel } from '@youzan/zanui-vue';
import { Panel } from 'vant';
export default {
components: {
'zan-panel': Panel
'van-panel': Panel
}
};
```
@@ -69,46 +69,46 @@ export default {
:::demo 基础用法
```html
<zan-panel title="标题" desc="标题描述" status="状态">
<van-panel title="标题" desc="标题描述" status="状态">
<div class="panel-content">
panel内容
</div>
</zan-panel>
</van-panel>
```
:::
#### 高级用法
使用`slot`自定义内容。比如在自定义内容中放入一个`zan-card`。
使用`slot`自定义内容。比如在自定义内容中放入一个`van-card`。
:::demo 高级用法
```html
<zan-panel title="标题" desc="标题描述" status="状态">
<zan-card
<van-panel title="标题" desc="标题描述" status="状态">
<van-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 class="van-card__row" slot="title">
<h4 class="van-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="van-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 class="van-card__row" slot="desc">
<h4 class="van-card__desc">商品sku</h4>
<span class="van-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 class="van-card__footer" slot="footer">
<van-button size="mini">按钮一</van-button>
<van-button size="mini">按钮二</van-button>
</div>
</zan-card>
<div class="zan-panel-sum">
</van-card>
<div class="van-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 class="van-panel-buttons" slot="footer">
<van-button size="small">按钮一</van-button>
<van-button size="small" type="danger">按钮二</van-button>
</div>
</zan-panel>
</van-panel>
```
:::

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

@@ -39,7 +39,7 @@ export default {
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
@@ -47,8 +47,8 @@ export default {
```js
import Vue from 'vue';
import { Picker } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/picker.css';
import { Picker } from 'vant';
import 'vant/lib/vant-css/picker.css';
Vue.component(Picker.name, Picker);
```
@@ -58,11 +58,11 @@ Vue.component(Picker.name, Picker);
如果你只是想在某个组件中使用，你可以在对应组件中注册`Picker`组件，这样只能在你注册的组件中使用`Picker`：
```js
import { Picker } from '@youzan/zanui-vue';
import { Picker } from 'vant';
export default {
components: {
'zan-picker': Picker
'van-picker': Picker
}
};
```
@@ -73,7 +73,7 @@ export default {
:::demo 基础用法
```html
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
<van-picker :columns="pickerColumns" @change="handlePickerChange"></van-picker>
<script>
const citys = {
@@ -112,7 +112,7 @@ export default {
:::demo 带toolbar的Picker
```html
<zan-picker :columns="pickerColumns" show-toolbar @change="handlePickerChange" @cancel="handlePickerCancel" @confirm="handlePickerConfirm"></zan-picker>
<van-picker :columns="pickerColumns" show-toolbar @change="handlePickerChange" @cancel="handlePickerCancel" @confirm="handlePickerConfirm"></van-picker>
<script>
const citys = {

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

@@ -1,11 +1,11 @@
<style>
@component-namespace demo {
@b popup {
.zan-button {
.van-button {
margin: 10px 15px;
}
.zan-popup-1 {
.van-popup-1 {
width: 60%;
box-sizing: border-box;
padding: 20px;
@@ -13,22 +13,22 @@
text-align: center;
}
.zan-popup-2 {
.van-popup-2 {
width: 100%;
height: 200px;
box-sizing: border-box;
padding: 20px;
}
.zan-popup-3 {
.van-popup-3 {
line-height: 50px;
text-align: center;
background-color: rgba(0, 0, 0, 0.701961);
color: #fff;
}
.zan-popup-4,
.zan-popup-5 {
.van-popup-4,
.van-popup-5 {
width: 100%;
height: 100%;
}
@@ -82,7 +82,7 @@ export default {
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
@@ -90,8 +90,8 @@ export default {
```js
import Vue from 'vue';
import { Popup } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/popup.css';
import { Popup } from 'vant';
import 'vant/lib/vant-css/popup.css';
Vue.component(Popup.name, Popup);
```
@@ -101,11 +101,11 @@ Vue.component(Popup.name, Popup);
如果你只是想在某个组件中使用，你可以在对应组件中注册`Popup`组件，这样只能在你注册的组件中使用`Popup`：
```js
import { Popup } from '@youzan/zanui-vue';
import { Popup } from 'vant';
export default {
components: {
'zan-popup': Popup
'van-popup': Popup
}
};
```
@@ -118,10 +118,10 @@ export default {
:::demo 基础用法
```html
<zan-button @click="popupShow1 = true">从中间弹出popup</zan-button>
<zan-popup v-model="popupShow1" class="zan-popup-1" :lock-on-scroll="true">
<van-button @click="popupShow1 = true">从中间弹出popup</van-button>
<van-popup v-model="popupShow1" class="van-popup-1" :lock-on-scroll="true">
从中间弹出popup
</zan-popup>
</van-popup>
<script>
export default {
@@ -141,26 +141,26 @@ export default {
:::demo 从不同位置弹出菜单
```html
<zan-button @click="popupShow2 = true;">从下方弹出popup</zan-button>
<zan-popup v-model="popupShow2" position="bottom" class="zan-popup-2">
<zan-button @click="showDialog">弹出dialog</zan-button>
</zan-popup>
<van-button @click="popupShow2 = true;">从下方弹出popup</van-button>
<van-popup v-model="popupShow2" position="bottom" class="van-popup-2">
<van-button @click="showDialog">弹出dialog</van-button>
</van-popup>
<zan-button @click="popupShow3 = true">从上方弹出popup</zan-button>
<zan-popup v-model="popupShow3" position="top" class="zan-popup-3" :overlay="false">
<van-button @click="popupShow3 = true">从上方弹出popup</van-button>
<van-popup v-model="popupShow3" position="top" class="van-popup-3" :overlay="false">
更新成功
</zan-popup>
</van-popup>
<zan-button @click="popupShow4 = true">从右方弹出popup</zan-button>
<zan-popup v-model="popupShow4" position="right" class="zan-popup-4" :overlay="false">
<zan-button @click.native="popupShow4 = false">关闭 popup</zan-button>
</zan-popup>
<van-button @click="popupShow4 = true">从右方弹出popup</van-button>
<van-popup v-model="popupShow4" position="right" class="van-popup-4" :overlay="false">
<van-button @click.native="popupShow4 = false">关闭 popup</van-button>
</van-popup>
<zan-button @click="popupShow5 = true">从左方弹出popup</zan-button>
<zan-popup v-model="popupShow5" position="left" class="zan-popup-5" :overlay="false">
<zan-button @click.native="popupShow5 = false">关闭 popup</zan-button>
</zan-popup>
<van-button @click="popupShow5 = true">从左方弹出popup</van-button>
<van-popup v-model="popupShow5" position="left" class="van-popup-5" :overlay="false">
<van-button @click.native="popupShow5 = false">关闭 popup</van-button>
</van-popup>
<script>
export default {
@@ -189,7 +189,7 @@ export default {
点击以下按钮查看手机端效果：
<zan-button @click="mobileShow = true">点击查看手机端效果</zan-button>
<van-button @click="mobileShow = true">点击查看手机端效果</van-button>
<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
### API

28
docs/examples-docs/progress.md
View File

@@ -14,7 +14,7 @@
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
@@ -22,8 +22,8 @@
```js
import Vue from 'vue';
import { Progress } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/progress.css';
import { Progress } from 'vant';
import 'vant/lib/vant-css/progress.css';
Vue.component(Progress.name, Progress);
```
@@ -33,11 +33,11 @@ Vue.component(Progress.name, Progress);
如果你只是想在某个组件中使用，你可以在对应组件中注册`Progress`组件，这样只能在你注册的组件中使用`Progress`：
```js
import { Progress } from '@youzan/zanui-vue';
import { Progress } from 'vant';
export default {
components: {
'zan-progress': Progress
'van-progress': Progress
}
};
```
@@ -51,13 +51,13 @@ export default {
:::demo 基础用法
```html
<div class="demo-progress__wrapper">
<zan-progress class="demo-progress__demo1" :percentage="0"></zan-progress>
<van-progress class="demo-progress__demo1" :percentage="0"></van-progress>
</div>
<div class="demo-progress__wrapper">
<zan-progress class="demo-progress__demo2" :percentage="46"></zan-progress>
<van-progress class="demo-progress__demo2" :percentage="46"></van-progress>
</div>
<div class="demo-progress__wrapper">
<zan-progress class="demo-progress__demo1" :percentage="100"></zan-progress>
<van-progress class="demo-progress__demo1" :percentage="100"></van-progress>
</div>
```
:::
@@ -70,13 +70,13 @@ export default {
:::demo Inactive
```html
<div class="demo-progress__wrapper">
<zan-progress class="demo-progress__demo1" :inactive="true" :percentage="0"></zan-progress>
<van-progress class="demo-progress__demo1" :inactive="true" :percentage="0"></van-progress>
</div>
<div class="demo-progress__wrapper">
<zan-progress class="demo-progress__demo2" :inactive="true" :percentage="46"></zan-progress>
<van-progress class="demo-progress__demo2" :inactive="true" :percentage="46"></van-progress>
</div>
<div class="demo-progress__wrapper">
<zan-progress class="demo-progress__demo1" :inactive="true" :percentage="100"></zan-progress>
<van-progress class="demo-progress__demo1" :inactive="true" :percentage="100"></van-progress>
</div>
```
:::
@@ -89,13 +89,13 @@ export default {
:::demo 自定义颜色和文字
```html
<div class="demo-progress__wrapper">
<zan-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></zan-progress>
<van-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
</div>
<div class="demo-progress__wrapper">
<zan-progress class="demo-progress__demo1" pivot-text="橙色" color="#f60" :percentage="46"></zan-progress>
<van-progress class="demo-progress__demo1" pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
</div>
<div class="demo-progress__wrapper">
<zan-progress class="demo-progress__demo1" pivot-text="黄色" color="#f09000" :percentage="66"></zan-progress>
<van-progress class="demo-progress__demo1" pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
</div>
```
:::

18
docs/examples-docs/quantity.md
View File

@@ -1,7 +1,7 @@
<style>
@component-namespace demo {
@b quantity {
.zan-quantity {
.van-quantity {
margin-left: 15px;
}
@@ -27,7 +27,7 @@ export default {
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
@@ -35,8 +35,8 @@ export default {
```js
import Vue from 'vue';
import { Quantity } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/quantity.css';
import { Quantity } from 'vant';
import 'vant/lib/vant-css/quantity.css';
Vue.component(Quantity.name, Quantity);
```
@@ -46,11 +46,11 @@ Vue.component(Quantity.name, Quantity);
如果你只是想在某个组件中使用，你可以在对应组件中注册`Quantity`组件，这样只能在你注册的组件中使用`Quantity`：
```js
import { Quantity } from '@youzan/zanui-vue';
import { Quantity } from 'vant';
export default {
components: {
'zan-quantity': Quantity
'van-quantity': Quantity
}
};
```
@@ -61,7 +61,7 @@ export default {
:::demo 基础用法
```html
<zan-quantity v-model="quantity1"></zan-quantity>
<van-quantity v-model="quantity1"></van-quantity>
<p class="curr-quantity">当前值：{{ quantity1 }}</p>
```
:::
@@ -72,7 +72,7 @@ export default {
:::demo 禁用Quantity
```html
<zan-quantity v-model="quantity1" disabled></zan-quantity>
<van-quantity v-model="quantity1" disabled></van-quantity>
```
:::
@@ -82,7 +82,7 @@ export default {
:::demo 高级用法
```html
<zan-quantity v-model="quantity2" min="5" max="40" step="2" default-value="9"></zan-quantity>
<van-quantity v-model="quantity2" min="5" max="40" step="2" default-value="9"></van-quantity>
<p class="curr-quantity">当前值：{{ quantity2 }}</p>
```
:::

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

@@ -4,8 +4,8 @@
```javascript
import Vue from 'vue';
import ZanUI from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/index.css';
import ZanUI from 'vant';
import 'vant/lib/vant-css/index.css';
Vue.use(ZanUI);
```
@@ -14,9 +14,9 @@ Vue.use(ZanUI);
```javascript
import Vue from 'vue';
import { Button, Cell } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/button.css';
import '@youzan/zanui-vue/lib/zanui-css/cell.css';
import { Button, Cell } from 'vant';
import 'vant/lib/vant-css/button.css';
import 'vant/lib/vant-css/cell.css';
Vue.component(Button.name, Button);
Vue.component(Cell.name, Cell);

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

@@ -1,10 +1,10 @@
<style>
@component-namespace demo {
@b radio {
.zan-radios {
.van-radios {
padding: 0 20px;
.zan-radio {
.van-radio {
margin: 10px 0;
}
}
@@ -29,7 +29,7 @@ export default {
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
@@ -37,8 +37,8 @@ export default {
```js
import Vue from 'vue';
import { Radio, RadioGroup } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/radio.css';
import { Radio, RadioGroup } from 'vant';
import 'vant/lib/vant-css/radio.css';
Vue.component(Radio.name, Radio);
Vue.component(RadioGroup.name, RadioGroup);
@@ -49,25 +49,26 @@ Vue.component(RadioGroup.name, RadioGroup);
如果你只是想在某个组件中使用，你可以在对应组件中注册`Radio`组件，这样只能在你注册的组件中使用`Radio`：
```js
import { Radio, RadioGroup } from '@youzan/zanui-vue';
import { Radio, RadioGroup } from 'vant';
export default {
components: {
'zan-radio': Radio,
'zan-radio-group': RadioGroup
'van-radio': Radio,
'van-radio-group': RadioGroup
}
};
```
### 代码演示
### 基础用法
#### 基础用法
通过`v-model`绑定值即可。当`Radio`选中时，绑定的值即为`Radio`中`name`属性设置的值。
:::demo 基础用法
```html
<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 class="van-radios">
<van-radio name="1" v-model="radio1">单选框1</van-radio>
<van-radio name="2" v-model="radio1">单选框2</van-radio>
</div>
<script>
@@ -82,15 +83,15 @@ export default {
```
:::
### 禁用状态
#### 禁用状态
设置`disabled`属性即可，此时`Radio`不能点击。
:::demo 禁用状态
```html
<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 class="van-radios">
<van-radio name="1" v-model="radio2" disabled>未选中禁用</van-radio>
<van-radio name="2" v-model="radio2" disabled>选中且禁用</van-radio>
</div>
<script>
@@ -105,17 +106,17 @@ export default {
```
:::
### radio组
#### radio组
需要与`zan-radio-group`一起使用，在`zan-radio-group`通过`v-model`来绑定当前选中的值。例如下面的`radio3`：
需要与`van-radio-group`一起使用，在`van-radio-group`通过`v-model`来绑定当前选中的值。例如下面的`radio3`：
:::demo radio组
```html
<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 class="van-radios">
<van-radio-group v-model="radio3">
<van-radio name="1">单选框1</van-radio>
<van-radio name="2">单选框2</van-radio>
</van-radio-group>
</div>
<script>
@@ -130,18 +131,18 @@ export default {
```
:::
### 与Cell组件一起使用
#### 与Cell组件一起使用
此时你需要再引入`Cell`和`CellGroup`组件。
:::demo 与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>
<van-radio-group v-model="radio4">
<van-cell-group>
<van-cell><van-radio name="1">单选框1</van-radio></van-cell>
<van-cell><van-radio name="2">单选框2</van-radio></van-cell>
</van-cell-group>
</van-radio-group>
<script>
export default {

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

@@ -18,7 +18,7 @@ export default {
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
@@ -26,8 +26,8 @@ export default {
```js
import Vue from 'vue';
import { Search } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/search.css';
import { Search } from 'vant';
import 'vant/lib/vant-css/search.css';
Vue.component(Search.name, Search);
```
@@ -37,11 +37,11 @@ Vue.component(Search.name, Search);
如果你只是想在某个组件中使用，你可以在对应组件中注册`Search`组件，这样只能在你注册的组件中使用`Search`：
```js
import { Search } from '@youzan/zanui-vue';
import { Search } from 'vant';
export default {
components: {
'zan-search': Search
'van-search': Search
}
};
```
@@ -54,7 +54,7 @@ export default {
:::demo 基础用法
```html
<zan-search placeholder="商品名称" @search="goSearch"></zan-search>
<van-search placeholder="商品名称" @search="goSearch"></van-search>
<script>
export default {
@@ -74,7 +74,7 @@ export default {
:::demo 监听对应事件
```html
<zan-search placeholder="商品名称" @search="goSearch" @change="handleChange" @cancel="handleCancel"></zan-search>
<van-search placeholder="商品名称" @search="goSearch" @change="handleChange" @cancel="handleCancel"></van-search>
<script>
export default {

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

@@ -5,7 +5,7 @@
color: #06bf04;
}
.zan-button {
.van-button {
margin: 15px 0 0 15px;
}
}
@@ -32,7 +32,7 @@ export default {
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
@@ -40,8 +40,8 @@ export default {
```js
import Vue from 'vue';
import { Steps, Step } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/steps.css';
import { Steps, Step } from 'vant';
import 'vant/lib/vant-css/steps.css';
Vue.component(Steps.name, Steps);
Vue.component(Step.name, Step);
@@ -52,12 +52,12 @@ Vue.component(Step.name, Step);
如果你只是想在某个组件中使用，你可以在对应组件中注册`Steps`组件，这样只能在你注册的组件中使用`Steps`：
```js
import { Steps, Step } from '@youzan/zanui-vue';
import { Steps, Step } from 'vant';
export default {
components: {
'zan-steps': Steps,
'zan-step': Step
'van-steps': Steps,
'van-step': Step
}
};
```
@@ -68,14 +68,14 @@ export default {
:::demo 基础用法
```html
<zan-steps :active="active" icon="logistics" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
<zan-step>买家下单</zan-step>
<zan-step>商家接单</zan-step>
<zan-step>买家提货</zan-step>
<zan-step>交易完成</zan-step>
</zan-steps>
<van-steps :active="active" icon="logistics" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
<van-step>买家下单</van-step>
<van-step>商家接单</van-step>
<van-step>买家提货</van-step>
<van-step>交易完成</van-step>
</van-steps>
<zan-button @click="nextStep">下一步</zan-button>
<van-button @click="nextStep">下一步</van-button>
<script>
export default {
@@ -101,12 +101,12 @@ export default {
:::demo 只显示步骤条
```html
<zan-steps :active="active">
<zan-step>买家下单</zan-step>
<zan-step>商家接单</zan-step>
<zan-step>买家提货</zan-step>
<zan-step>交易完成</zan-step>
</zan-steps>
<van-steps :active="active">
<van-step>买家下单</van-step>
<van-step>商家接单</van-step>
<van-step>买家提货</van-step>
<van-step>交易完成</van-step>
</van-steps>
```
:::

30
docs/examples-docs/swipe.md
View File

@@ -1,7 +1,7 @@
<style>
@component-namespace demo {
@b swipe {
.zan-swipe {
.van-swipe {
height: 200px;
img {
@@ -39,7 +39,7 @@ export default {
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
@@ -47,8 +47,8 @@ export default {
```js
import Vue from 'vue';
import { Swipe, SwipeItem } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/swipe.css';
import { Swipe, SwipeItem } from 'vant';
import 'vant/lib/vant-css/swipe.css';
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
@@ -59,12 +59,12 @@ Vue.component(SwipeItem.name, SwipeItem);
如果你只是想在某个组件中使用，你可以在对应组件中注册`Swipe`组件，这样只能在你注册的组件中使用`Swipe`：
```js
import { Swipe, SwipeItem } from '@youzan/zanui-vue';
import { Swipe, SwipeItem } from 'vant';
export default {
components: {
'zan-swipe': Swipe,
'zan-swipe-item': SwipeItem
'van-swipe': Swipe,
'van-swipe-item': SwipeItem
}
};
```
@@ -75,11 +75,11 @@ export default {
:::demo 基础用法
```html
<zan-swipe>
<zan-swipe-item v-for="img in images">
<van-swipe>
<van-swipe-item v-for="img in images">
<img v-lazy="img" alt="">
</zan-swipe-item>
</zan-swipe>
</van-swipe-item>
</van-swipe>
<script>
export default {
@@ -102,11 +102,11 @@ export default {
:::demo 自动轮播
```html
<zan-swipe auto-play @pagechange:end="handlePageEnd">
<zan-swipe-item v-for="img in autoImages">
<van-swipe auto-play @pagechange:end="handlePageEnd">
<van-swipe-item v-for="img in autoImages">
<img v-lazy="img" alt="">
</zan-swipe-item>
</zan-swipe>
</van-swipe-item>
</van-swipe>
<script>
export default {

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

@@ -49,7 +49,7 @@ export default {
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
@@ -57,8 +57,8 @@ export default {
```js
import Vue from 'vue';
import { Switch } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/switch.css';
import { Switch } from 'vant';
import 'vant/lib/vant-css/switch.css';
Vue.component(Switch.name, Switch);
```
@@ -68,11 +68,11 @@ Vue.component(Switch.name, Switch);
如果你只是想在某个组件中使用，你可以在对应组件中注册`Switch`组件，这样只能在你注册的组件中使用`Switch`：
```js
import { Switch } from '@youzan/zanui-vue';
import { Switch } from 'vant';
export default {
components: {
'zan-switch': Switch
'van-switch': Switch
}
};
```
@@ -83,7 +83,7 @@ export default {
:::demo 基础用法
```html
<zan-switch class="some-customized-class" v-model="switchState1"></zan-switch>
<van-switch class="some-customized-class" v-model="switchState1"></van-switch>
<div class="demo-switch__text">{{ switchState1 ? ' ON' : 'OFF' }}</div>
@@ -101,7 +101,7 @@ export default {
:::demo
```html
<zan-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></zan-switch>
<van-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></van-switch>
<div class="demo-switch__text">{{ switchState2 ? ' ON' : 'OFF' }}</div>
@@ -138,10 +138,10 @@ export default {
:::demo 禁用状态
```html
<zan-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></zan-switch>
<van-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></van-switch>
<div class="demo-switch__text">ON, DISABLED</div>
<zan-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></zan-switch>
<van-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></van-switch>
<div class="demo-switch__text">OFF, DISABLED</div>
<script>
@@ -163,10 +163,10 @@ export default {
:::demo loading状态
```html
<zan-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></zan-switch>
<van-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></van-switch>
<div class="demo-switch__text">ON, LOADING</div>
<zan-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></zan-switch>
<van-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></van-switch>
<div class="demo-switch__text">OFF, LOADING</div>
<script>

128
docs/examples-docs/tab.md
View File

@@ -1,19 +1,19 @@
<style>
@component-namespace demo {
@b tab {
.zan-tab__pane {
.van-tab__pane {
background-color: #fff;
padding: 20px;
}
.zan-tabs--card .zan-tab__pane {
.van-tabs--card .van-tab__pane {
background-color: transparent;
}
.custom-tabwrap .zan-tab-active {
.custom-tabwrap .van-tab-active {
color: #20a0ff;
}
.custom-tabwrap .zan-tabs-nav-bar {
.custom-tabwrap .van-tabs-nav-bar {
background: #20a0ff;
}
.custom-pane {
@@ -53,7 +53,7 @@ export default {
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
@@ -61,8 +61,8 @@ export default {
```js
import Vue from 'vue';
import { Tab, Tabs } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/tab.css';
import { Tab, Tabs } from 'vant';
import 'vant/lib/vant-css/tab.css';
Vue.component(Tab.name, Tab);
Vue.component(Tabs.name, Tabs);
@@ -73,12 +73,12 @@ Vue.component(Tabs.name, Tabs);
如果你只是想在某个组件中使用，你可以在对应组件中注册`Tab`组件，这样只能在你注册的组件中使用`Tab`：
```js
import { Tab, Tabs } from '@youzan/zanui-vue';
import { Tab, Tabs } from 'vant';
export default {
components: {
'zan-tab': Tab,
'zan-tabs': Tabs
'van-tab': Tab,
'van-tabs': Tabs
}
};
```
@@ -91,45 +91,45 @@ export default {
:::demo 基础用法
```html
<zan-tabs>
<zan-tab title="选项一">内容一</zan-tab>
<zan-tab title="选项二">内容二</zan-tab>
<zan-tab title="选项三">内容三</zan-tab>
<zan-tab title="选项四">内容四</zan-tab>
<zan-tab title="选项五">内容五</zan-tab>
</zan-tabs>
<van-tabs>
<van-tab title="选项一">内容一</van-tab>
<van-tab title="选项二">内容二</van-tab>
<van-tab title="选项三">内容三</van-tab>
<van-tab title="选项四">内容四</van-tab>
<van-tab title="选项五">内容五</van-tab>
</van-tabs>
```
:::
#### active特定tab
可以在`zan-tabs`上设置`active`为对应`tab`的索引（从0开始，即0代表第一个）即可激活对应`tab`。
可以在`van-tabs`上设置`active`为对应`tab`的索引（从0开始，即0代表第一个）即可激活对应`tab`。
:::demo 基础用法
```html
<zan-tabs :active="active">
<zan-tab title="选项一">内容一</zan-tab>
<zan-tab title="选项二">内容二</zan-tab>
<zan-tab title="选项三">内容三</zan-tab>
<zan-tab title="选项四">内容四</zan-tab>
<zan-tab title="选项五">内容五</zan-tab>
</zan-tabs>
<van-tabs :active="active">
<van-tab title="选项一">内容一</van-tab>
<van-tab title="选项二">内容二</van-tab>
<van-tab title="选项三">内容三</van-tab>
<van-tab title="选项四">内容四</van-tab>
<van-tab title="选项五">内容五</van-tab>
</van-tabs>
```
:::
#### 禁用tab
在对应的`zan-tab`上设置`disabled`属性即可，如果需要监听禁用事件，可以监听`disabled`事件。
在对应的`van-tab`上设置`disabled`属性即可，如果需要监听禁用事件，可以监听`disabled`事件。
:::demo 禁用tab
```html
<zan-tabs>
<zan-tab title="选项一">内容一</zan-tab>
<zan-tab title="选项二" disabled @disabled="popalert">内容二</zan-tab>
<zan-tab title="选项三">内容三</zan-tab>
<zan-tab title="选项四">内容四</zan-tab>
<zan-tab title="选项五">内容五</zan-tab>
</zan-tabs>
<van-tabs>
<van-tab title="选项一">内容一</van-tab>
<van-tab title="选项二" disabled @disabled="popalert">内容二</van-tab>
<van-tab title="选项三">内容三</van-tab>
<van-tab title="选项四">内容四</van-tab>
<van-tab title="选项五">内容五</van-tab>
</van-tabs>
<script>
export default {
@@ -145,24 +145,24 @@ export default {
#### card样式
`Tabs`目前有两种样式：`line`和`card`，默认为`line`样式，也就上面基础用法中的样式，你可以在`zan-tabs`上设置`type`为`card`改为card样式。
`Tabs`目前有两种样式：`line`和`card`，默认为`line`样式，也就上面基础用法中的样式，你可以在`van-tabs`上设置`type`为`card`改为card样式。
:::demo card样式
```html
<zan-tabs type="card">
<zan-tab title="选项一">内容一</zan-tab>
<zan-tab title="选项二">内容二</zan-tab>
<zan-tab title="选项三">内容三</zan-tab>
<zan-tab title="选项四">内容四</zan-tab>
<zan-tab title="选项五">内容五</zan-tab>
</zan-tabs>
<van-tabs type="card">
<van-tab title="选项一">内容一</van-tab>
<van-tab title="选项二">内容二</van-tab>
<van-tab title="选项三">内容三</van-tab>
<van-tab title="选项四">内容四</van-tab>
<van-tab title="选项五">内容五</van-tab>
</van-tabs>
```
:::
<style>
.custom-tabwrap .zan-tab-active {
.custom-tabwrap .van-tab-active {
color: #20a0ff;
}
.custom-tabwrap .zan-tabs-nav-bar {
.custom-tabwrap .van-tabs-nav-bar {
background: #20a0ff;
}
.custom-pane {
@@ -174,23 +174,23 @@ export default {
#### 自定义样式
可以在`zan-tabs`上设置对应的`class`，从而自定义某些样式。
可以在`van-tabs`上设置对应的`class`，从而自定义某些样式。
:::demo 自定义样式
```html
<zan-tabs active="2" class="custom-tabwrap">
<zan-tab title="选项一" class="custom-pane">内容一</zan-tab>
<zan-tab title="选项二" class="custom-pane">内容二</zan-tab>
<zan-tab title="选项三" class="custom-pane">内容三</zan-tab>
<zan-tab title="选项四" class="custom-pane">内容四</zan-tab>
<zan-tab title="选项五" class="custom-pane">内容五</zan-tab>
</zan-tabs>
<van-tabs active="2" class="custom-tabwrap">
<van-tab title="选项一" class="custom-pane">内容一</van-tab>
<van-tab title="选项二" class="custom-pane">内容二</van-tab>
<van-tab title="选项三" class="custom-pane">内容三</van-tab>
<van-tab title="选项四" class="custom-pane">内容四</van-tab>
<van-tab title="选项五" class="custom-pane">内容五</van-tab>
</van-tabs>
<style>
.custom-tabwrap .zan-tab-active {
.custom-tabwrap .van-tab-active {
color: #20a0ff;
}
.custom-tabwrap .zan-tabs-nav-bar {
.custom-tabwrap .van-tabs-nav-bar {
background: #20a0ff;
}
.custom-pane {
@@ -204,17 +204,17 @@ export default {
#### click事件
可以在`zan-tabs`上绑定一个`click`事件，事件处理函数有一个参数，参数为对应`tab`在`tabs`中的索引。
可以在`van-tabs`上绑定一个`click`事件，事件处理函数有一个参数，参数为对应`tab`在`tabs`中的索引。
:::demo click事件
```html
<zan-tabs @click="handleTabClick">
<zan-tab title="选项一">内容一</zan-tab>
<zan-tab title="选项二">内容二</zan-tab>
<zan-tab title="选项三">内容三</zan-tab>
<zan-tab title="选项四">内容四</zan-tab>
<zan-tab title="选项五">内容五</zan-tab>
</zan-tabs>
<van-tabs @click="handleTabClick">
<van-tab title="选项一">内容一</van-tab>
<van-tab title="选项二">内容二</van-tab>
<van-tab title="选项三">内容三</van-tab>
<van-tab title="选项四">内容四</van-tab>
<van-tab title="选项五">内容五</van-tab>
</van-tabs>
<script>
export default {
@@ -228,7 +228,7 @@ export default {
```
:::
### zan-tabs API
### van-tabs API
| 参数 | 说明 | 类型 | 默认值 | 可选 |
|-----------|-----------|-----------|-------------|-------------|
@@ -237,14 +237,14 @@ export default {
| navclass | tabs的内部nav上的自定义classname | `string` | | |
### zan-tab API
### van-tab API
| 参数 | 说明 | 类型 | 默认值 | 可选 |
|-----------|-----------|-----------|-------------|-------------|
| title | tab的标题 | `string` | | |
| disabled | 是否禁用这个tab | `boolean` | `false` | |
### zan-tabs Event
### van-tabs Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|

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

@@ -2,7 +2,7 @@
.tags-container {
padding: 5px 15px;
.zan-tag + .zan-tag {
.van-tag + .van-tag {
margin-left: 10px;
}
}
@@ -12,7 +12,7 @@
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
@@ -20,8 +20,8 @@
```js
import Vue from 'vue';
import { Tag } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/tag.css';
import { Tag } from 'vant';
import 'vant/lib/vant-css/tag.css';
Vue.component(Tag.name, Tag);
```
@@ -31,11 +31,11 @@ Vue.component(Tag.name, Tag);
如果你只是想在某个组件中使用，你可以在对应组件中注册`Tag`组件，这样只能在你注册的组件中使用`Tag`：
```js
import { Tag } from '@youzan/zanui-vue';
import { Tag } from 'vant';
export default {
components: {
'zan-tag': Tag
'van-tag': Tag
}
};
```
@@ -49,13 +49,13 @@ export default {
:::demo 基础用法
```html
<div class="tags-container">
<zan-tag>返现</zan-tag>
<zan-tag plain>返现</zan-tag>
<van-tag>返现</van-tag>
<van-tag plain>返现</van-tag>
</div>
<div class="tags-container">
<zan-tag type="danger">返现</zan-tag>
<zan-tag type="danger">四字标签</zan-tag>
<zan-tag type="danger">一</zan-tag>
<van-tag type="danger">返现</van-tag>
<van-tag type="danger">四字标签</van-tag>
<van-tag type="danger">一</van-tag>
</div>
```
:::
@@ -67,19 +67,19 @@ export default {
:::demo 高级用法
```html
<div class="tags-container">
<zan-tag type="danger">返现</zan-tag>
<zan-tag plain type="danger">返现</zan-tag>
<van-tag type="danger">返现</van-tag>
<van-tag plain type="danger">返现</van-tag>
</div>
<div class="tags-container">
<zan-tag type="primary">返现</zan-tag>
<zan-tag plain type="primary">返现</zan-tag>
<van-tag type="primary">返现</van-tag>
<van-tag plain type="primary">返现</van-tag>
</div>
<div class="tags-container">
<zan-tag type="success">返现</zan-tag>
<zan-tag plain type="success">返现</zan-tag>
<van-tag type="success">返现</van-tag>
<van-tag plain type="success">返现</van-tag>
</div>
<div class="tags-container">
<zan-tag type="danger" mark>返现</zan-tag>
<van-tag type="danger" mark>返现</van-tag>
</div>
```
:::

22
docs/examples-docs/toast.md
View File

@@ -1,7 +1,7 @@
<style>
@component-namespace demo {
@b toast {
.zan-button {
.van-button {
margin: 15px;
}
}
@@ -70,7 +70,7 @@ export default {
`Toast`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。
```js
import { Toast } from '@youzan/zanui-vue';
import { Toast } from 'vant';
```
### 代码演示
@@ -79,12 +79,12 @@ import { Toast } from '@youzan/zanui-vue';
:::demo 基础用法
```html
<zan-button @click="showSimpleToast">普通文字提示</zan-button>
<zan-button @click="showLoadingToast">加载Toast</zan-button>
<zan-button @click="showSuccessToast">成功</zan-button>
<zan-button @click="showFailToast">失败</zan-button>
<zan-button @click="showForbidClickToast">背景不能点击</zan-button>
<zan-button @click="showCustomizedToast(5000)">倒数5秒</zan-button>
<van-button @click="showSimpleToast">普通文字提示</van-button>
<van-button @click="showLoadingToast">加载Toast</van-button>
<van-button @click="showSuccessToast">成功</van-button>
<van-button @click="showFailToast">失败</van-button>
<van-button @click="showForbidClickToast">背景不能点击</van-button>
<van-button @click="showCustomizedToast(5000)">倒数5秒</van-button>
<script>
import { Toast } from 'src/index';
@@ -135,8 +135,8 @@ export default {
:::demo 手动关闭
```html
<zan-button @click="showToast">打开</zan-button>
<zan-button @click="closeToast">关闭</zan-button>
<van-button @click="showToast">打开</van-button>
<van-button @click="closeToast">关闭</van-button>
<script>
import { Toast } from 'src/index';
@@ -160,7 +160,7 @@ export default {
:::demo 手动关闭
```html
<zan-button @click="showHtmlToast">打开</zan-button>
<van-button @click="showHtmlToast">打开</van-button>
<script>
import { Toast } from 'src/index';

16
docs/examples-docs/uploader.md
View File

@@ -17,7 +17,7 @@ export default {
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
@@ -25,8 +25,8 @@ export default {
```js
import Vue from 'vue';
import { Uploader } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/uploader.css';
import { Uploader } from 'vant';
import 'vant/lib/vant-css/uploader.css';
Vue.component(Uploader.name, Uploader);
```
@@ -36,11 +36,11 @@ Vue.component(Uploader.name, Uploader);
如果你只是想在某个组件中使用，你可以在对应组件中注册`Uploader`组件，这样只能在你注册的组件中使用`Uploader`：
```js
import { Uploader } from '@youzan/zanui-vue';
import { Uploader } from 'vant';
export default {
components: {
'zan-uploader': Uploader
'van-uploader': Uploader
}
};
```
@@ -52,9 +52,9 @@ export default {
:::demo 基础用法
```html
<div class="uploader-container">
<zan-uploader :after-read="logContent">
<zan-icon name="photograph"></zan-icon>
</zan-uploader>
<van-uploader :after-read="logContent">
<van-icon name="photograph"></van-icon>
</van-uploader>
</div>
```
:::

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

@@ -8,7 +8,7 @@
```js
import Vue from 'vue';
import { Waterfall } from '@youzan/zanui-vue';
import { Waterfall } from 'vant';
Waterfall.install(Vue);
```
@@ -18,7 +18,7 @@ Waterfall.install(Vue);
如果你只是想在某个组件中使用`Waterfall`，你可以在对应组件中注册`Waterfall`指令，这样只能在你注册的组件中使用`Waterfall`：
```js
import { Waterfall } from '@youzan/zanui-vue';
import { Waterfall } from 'vant';
export default {
directives: {