alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Mborder-right: 1px solid transparent

Browse Source 
erge branch 'master' of gitlab.qima-inc.com:fe/zanui-vue
This commit is contained in:
niunai
2017-04-06 15:53:10 +08:00
parent bc699541ce 668c3e0e8d
commit 96e1589380
96 changed files with 2854 additions and 1017 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/examples-docs/actionsheet.md
+139 -25
View File
@@ -30,7 +30,142 @@ export default {
actions1: [
{
name: '微信安全支付',
className: 'actionsheet-wx'
className: 'actionsheet-wx',
callback: this.handleActionClick
},
{
name: '支付宝支付',
loading: true
},
{
name: '有赞E卡',
subname: '（剩余260.50元）'
},
{
name: '信用卡支付'
},
{
name: '其他支付方式'
}
]
};
},
methods: {
handleActionClick(item) {
console.log(item);
}
}
}
</script>
## ActionSheet 行动按钮
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
#### 全局注册
你可以在全局注册`ActionSheet`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`ActionSheet`组件了：
```js
import Vue from 'vue';
import { ActionSheet } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/actionSheet.css';
Vue.component(ActionSheet.name, ActionSheet);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`ActionSheet`组件，这样只能在你注册的组件中使用`ActionSheet`：
```js
import { ActionSheet } from '@youzan/zanui-vue';
export default {
components: {
'zan-actionSheet': ActionSheet
}
};
```
### 代码演示
#### 基础用法
需要传入一个`actions`的属性，该属性为一个数组，数组的每一项是一个对象，可以根据下面的[action对象](#actions)设置你想要的信息。
:::demo 基础用法
```html
<div class="zan-row">
<zan-button @click="show1 = true">弹出actionsheet</zan-button>
</div>
<zan-actionsheet v-model="show1" :actions="actions1">
</zan-actionsheet>
<script>
export default {
data() {
return {
show1: false,
actions1: [
{
name: '微信安全支付',
className: 'actionsheet-wx',
callback: this.handleActionClick
},
{
name: '支付宝支付',
loading: true
},
{
name: '有赞E卡',
subname: '（剩余260.50元）'
},
{
name: '信用卡支付'
},
{
name: '其他支付方式'
}
]
};
},
methods: {
handleActionClick(item) {
console.log(item);
}
}
}
</script>
```
:::
#### 带取消按钮的ActionSheet
如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`ActionSheet`关闭。
:::demo 带取消按钮的ActionSheet
```html
<div class="zan-row">
<zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
</div>
<zan-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
</zan-actionsheet>
<script>
export default {
data() {
return {
show2: false,
actions1: [
{
name: '微信安全支付',
className: 'actionsheet-wx',
callback: this.handleActionClick
},
{
name: '支付宝支付',
@@ -51,34 +186,12 @@ export default {
}
}
</script>
## ActionSheet 行动按钮
### 基础用法
:::demo 基础用法
```html
<div class="zan-row">
<zan-button @click="show1 = true">弹出actionsheet</zan-button>
</div>
<zan-actionsheet v-model="show1" :actions="actions1">
</zan-actionsheet>
```
:::
### 带取消按钮的ActionSheet
#### 带标题的ActionSheet
:::demo 带取消按钮的ActionSheet
```html
<div class="zan-row">
<zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
</div>
<zan-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
</zan-actionsheet>
```
:::
### 带标题的ActionSheet
如果传入了`title`属性，且不为空，则另外一种样式的`ActionSheet`，里面内容需要自定义。
:::demo 带标题的ActionSheet
```html
@@ -116,3 +229,4 @@ export default {
| subname | 二级标题 |
| className | 为对应列添加特殊的`class` |
| loading | 是否是`loading`状态 |
| callback | 点击时的回调。该回调接受一个参数，参数为当前点击`action`的对象信息 |
docs/examples-docs/badge.md
+62 -12
View File
@@ -1,7 +1,3 @@
## Badge 徽章
### 基础用法
<script>
export default {
data() {
@@ -17,13 +13,68 @@
};
</script>
## Badge 徽章
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
#### 全局注册
你可以在全局注册`Badge`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Badge`组件了：
```js
import Vue from 'vue';
import { Badge, BadgeGroup } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/badge.css';
Vue.component(Badge.name, Badge);
Vue.component(BadgeGroup.name, BadgeGroup);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Badge`组件，这样只能在你注册的组件中使用`Badge`：
```js
import { Badge, BadgeGroup } from '@youzan/zanui-vue';
export default {
components: {
'zan-badge': Badge,
'zan-badge-group': BadgeGroup
}
};
```
### 代码演示
#### 基础用法
默认情况下激活第一个`badge`。
:::demo 基础用法
```html
<zan-badge-group :active-key="activeKey">
<zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
<zan-badge mark="1" title="花式寿司" info="99" @click="onItemClick"></zan-badge>
<zan-badge mark="2" title="火炽寿司" @click="onItemClick"></zan-badge>
<zan-badge mark="3" title="手握寿司" info="199" @click="onItemClick"></zan-badge>
<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>
```
:::
#### 选中某个badge
如果想默认选中某个`badge`，你可以在`zan-badge-group`上设置`activeKey`属性，属性值为对应的`badge`索引。
:::demo 选中某个badge
```html
<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>
```
:::
@@ -38,7 +89,6 @@
### z-badge API
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| mark | badge的唯一key值 | `string` | `''` | `required` |
| title | badge的文案标题 | `string` | `''` | `required` |
| info | 当前badge的提示消息数量 | `string` | `''` | |
| url | 跳转链接 | `string` | 全连接直接跳转或者hash | |
| info | 当前badge的提示消息 | `string` | `''` | |
| url | 跳转链接 | `string` | 链接直接跳转或者hash | |
docs/examples-docs/card.md
+34 -2
View File
@@ -1,6 +1,38 @@
## Card 图文组件
### 基础用法
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
#### 全局注册
你可以在全局注册`Card`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Card`组件了：
```js
import Vue from 'vue';
import { Card } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/card.css';
Vue.component(Card.name, Card);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Card`组件，这样只能在你注册的组件中使用`Card`：
```js
import { Card } from '@youzan/zanui-vue';
export default {
components: {
'zan-card': Card
}
};
```
### 代码演示
#### 基础用法
当没有底部按钮时，右侧内容会居中显示。
@@ -14,7 +46,7 @@
```
:::
### 高级用法
#### 高级用法
可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
docs/examples-docs/cell.md
+1 -9
View File
@@ -1,11 +1,3 @@
<style>
.official-img {
width: 31px;
vertical-align: middle;
border: 0;
}
</style>
<script>
export default {
methods: {
@@ -110,7 +102,7 @@ export default {
<zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
<template slot="title">
<span class="zan-cell-text">起码运动馆</span>
<img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
<zan-tag type="danger">官方</zan-tag>
</template>
</zan-cell>
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
docs/examples-docs/checkbox.md
+42
View File
@@ -37,8 +37,42 @@ export default {
## Checkbox 复选框
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
#### 全局注册
你可以在全局注册`Checkbox`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Checkbox`组件了：
```js
import Vue from 'vue';
import { Checkbox, CheckboxGroup } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/checkbox.css';
Vue.component(Checkbox.name, Checkbox);
Vue.component(CheckboxGroup.name, CheckboxGroup);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Checkbox`组件，这样只能在你注册的组件中使用`Checkbox`：
```js
import { Checkbox, CheckboxGroup } from '@youzan/zanui-vue';
export default {
components: {
'zan-checkbox': Checkbox,
'zan-checkbox-group': CheckboxGroup
}
};
```
### 基础用法
通过`v-model`绑定值即可。当`Checkbox`选中时，绑定的值即为`true`，否则为`false`。当单个`Checkbox`使用时，更建议使用`Switch`组件。
:::demo 基础用法
```html
<div class="zan-checkbox-wrapper">
@@ -59,6 +93,8 @@ export default {
### 禁用状态
设置`disabled`属性即可，此时`Checkbox`不能点击。
:::demo 禁用状态
```html
<div class="zan-checkbox-wrapper">
@@ -79,6 +115,8 @@ export default {
### Checkbox组
需要与`zan-checkbox-group`一起使用，值通过`v-model`绑定在`zan-checkbox-group`上，例如下面的`result`，此时`result`的值是一个数组。数组中的项即为选中的`Checkbox`的`name`属性设置的值。
:::demo Checkbox组
```html
<div class="zan-checkbox-wrapper">
@@ -112,6 +150,8 @@ export default {
### 禁用Checkbox组
禁用`zan-checkbox-group`，此时整个组都不可点击。
:::demo 禁用Checkbox组
```html
<div class="zan-checkbox-wrapper">
@@ -139,6 +179,8 @@ export default {
### 与Cell组件一起使用
此时你需要再引入`Cell`和`CellGroup`组件。
:::demo 与Cell组件一起使用
```html
<zan-checkbox-group v-model="result">
docs/examples-docs/dialog.md
+43 -8
View File
@@ -41,17 +41,25 @@ export default {
## Dialog 弹出框
### 基础用法
### 使用指南
:::demo 基础用法
`Dialog`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它，它接受一个数组作为参数，数组中的每一项对应了图片链接。
```js
import { Dialog } from '@youzan/zanui-vue';
```
### 代码演示
#### 消息提示
用于提示一些消息，只包含一个确认按钮。
:::demo 消息提示
```html
<zan-button @click="handleAlertClick">alert</zan-button>
<zan-button @click="handleConfirmClick">confirm</zan-button>
<script>
import { Dialog } from 'src/index';
export default {
methods: {
handleAlertClick() {
@@ -61,8 +69,24 @@ export default {
}).then((action) => {
console.log(action);
});
},
}
}
};
</script>
```
:::
#### 消息确认
用于确认消息，包含取消和确认按钮。
:::demo 消息确认
```html
<zan-button @click="handleConfirmClick">confirm</zan-button>
<script>
export default {
methods: {
handleConfirmClick() {
Dialog.confirm({
title: 'confirm标题',
@@ -84,10 +108,21 @@ export default {
<zan-button @click="mobileShow = true">点击查看手机端效果</zan-button>
<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
### 方法
### API
#### Dialog.alert(options)
消息提示时使用该方法。
#### Dialog.confirm(options)
消息确认时使用该方法。
### Options
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| title | 标题 | `string` | | |
| message | 内容 | `string` | | |
| confirmButtonText | 确认按钮的文案 | `string` | `确认` | |
| cancelButtonText | 取消按钮的文案 | `string` | `取消` | |
docs/examples-docs/field.md
+38 -6
View File
@@ -22,7 +22,39 @@ export default {
表单中`input`或`textarea`的输入框。
### 基础用法
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
#### 全局注册
你可以在全局注册`Field`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Field`组件了：
```js
import Vue from 'vue';
import { Field } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/field.css';
Vue.component(Field.name, Field);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Field`组件，这样只能在你注册的组件中使用`Field`：
```js
import { Field } from '@youzan/zanui-vue';
export default {
components: {
'zan-field': Field
}
};
```
### 代码演示
#### 基础用法
根据`type`属性显示不同的输入框。
@@ -36,7 +68,7 @@ export default {
```
:::
### 无label的输入框
#### 无label的输入框
不传入`label`属性即可。
@@ -48,7 +80,7 @@ export default {
```
:::
### 带border的输入框
#### 带border的输入框
传入一个`border`属性。
@@ -60,7 +92,7 @@ export default {
```
:::
### 禁用的输入框
#### 禁用的输入框
传入`disabled`属性即可。
@@ -72,7 +104,7 @@ export default {
```
:::
### 错误的输入框
#### 错误的输入框
传入`error`属性即可。
@@ -85,7 +117,7 @@ export default {
:::
### Autosize的输入框(仅支持textarea)
#### Autosize的输入框(仅支持textarea)
传入`autosize`属性, 且将`rows`设为1。
docs/examples-docs/icon.md
+131 -29
View File
@@ -1,12 +1,14 @@
<style>
@component-namespace demo {
@b icon {
.zan-col {
text-align: center;
}
.zan-icon {
margin: 10px;
font-size: 45px;
width: 56px;
text-align: center;
display: block;
margin: 15px 0;
}
}
}
@@ -52,32 +54,132 @@ export default {
:::demo 所有Icon
```html
<zan-icon name="qr-invalid"></zan-icon>
<zan-icon name="qr"></zan-icon>
<zan-icon name="exchange"></zan-icon>
<zan-icon name="close"></zan-icon>
<zan-icon name="location"></zan-icon>
<zan-icon name="upgrade"></zan-icon>
<zan-icon name="check"></zan-icon>
<zan-icon name="checked"></zan-icon>
<zan-icon name="like-o"></zan-icon>
<zan-icon name="like" :style="{ color: '#f44' }"></zan-icon>
<zan-icon name="chat"></zan-icon>
<zan-icon name="shop"></zan-icon>
<zan-icon name="photograph"></zan-icon>
<zan-icon name="add"></zan-icon>
<zan-icon name="add2"></zan-icon>
<zan-icon name="photo"></zan-icon>
<zan-icon name="logistics"></zan-icon>
<zan-icon name="edit"></zan-icon>
<zan-icon name="passed"></zan-icon>
<zan-icon name="cart"></zan-icon>
<zan-icon name="arrow"></zan-icon>
<zan-icon name="gift"></zan-icon>
<zan-icon name="search"></zan-icon>
<zan-icon name="clear"></zan-icon>
<zan-icon name="success"></zan-icon>
<zan-icon name="fail"></zan-icon>
<zan-row>
<zan-col span="8">
<zan-icon name="qr-invalid"></zan-icon>
<span>qr-invalid</span>
</zan-col>
<zan-col span="8">
<zan-icon name="qr"></zan-icon>
<span>qr</span>
</zan-col>
<zan-col span="8">
<zan-icon name="exchange"></zan-icon>
<span>exchange</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="close"></zan-icon>
<span>close</span>
</zan-col>
<zan-col span="8">
<zan-icon name="location"></zan-icon>
<span>location</span>
</zan-col>
<zan-col span="8">
<zan-icon name="upgrade"></zan-icon>
<span>upgrade</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="check"></zan-icon>
<span>check</span>
</zan-col>
<zan-col span="8">
<zan-icon name="checked"></zan-icon>
<span>checked</span>
</zan-col>
<zan-col span="8">
<zan-icon name="like-o"></zan-icon>
<span>like-o</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="like" style="color: red;"></zan-icon>
<span>like</span>
</zan-col>
<zan-col span="8">
<zan-icon name="chat"></zan-icon>
<span>chat</span>
</zan-col>
<zan-col span="8">
<zan-icon name="shop"></zan-icon>
<span>shop</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="photograph"></zan-icon>
<span>photograph</span>
</zan-col>
<zan-col span="8">
<zan-icon name="add"></zan-icon>
<span>add</span>
</zan-col>
<zan-col span="8">
<zan-icon name="add2"></zan-icon>
<span>add2</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="photo"></zan-icon>
<span>photo</span>
</zan-col>
<zan-col span="8">
<zan-icon name="logistics"></zan-icon>
<span>logistics</span>
</zan-col>
<zan-col span="8">
<zan-icon name="edit"></zan-icon>
<span>edit</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="passed"></zan-icon>
<span>passed</span>
</zan-col>
<zan-col span="8">
<zan-icon name="cart"></zan-icon>
<span>cart</span>
</zan-col>
<zan-col span="8">
<zan-icon name="arrow"></zan-icon>
<span>arrow</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="gift"></zan-icon>
<span>gift</span>
</zan-col>
<zan-col span="8">
<zan-icon name="search"></zan-icon>
<span>search</span>
</zan-col>
<zan-col span="8">
<zan-icon name="clear"></zan-icon>
<span>clear</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="success"></zan-icon>
<span>success</span>
</zan-col>
<zan-col span="8">
<zan-icon name="fail"></zan-icon>
<span>fail</span>
</zan-col>
<zan-col span="8">
<zan-icon name="contact"></zan-icon>
<span>contact</span>
</zan-col>
</zan-row>
```
:::
docs/examples-docs/image-preview.md
+29 -5
View File
@@ -10,13 +10,17 @@
<script>
import { ImagePreview } from 'src/index';
import MobileComputed from 'components/mobile-computed';
export default {
mixins: [MobileComputed],
methods: {
handleImagePreview() {
ImagePreview([
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp',
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp'
'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
]);
}
}
@@ -25,7 +29,17 @@ export default {
## ImagePreview 图片预览
### 基础用法
### 使用指南
`ImagePreview`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。
```js
import { ImagePreview } from '@youzan/zanui-vue';
```
### 代码演示
#### 基础用法
:::demo
```html
@@ -38,8 +52,8 @@ export default {
methods: {
handleImagePreview() {
ImagePreview([
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp',
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp'
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
]);
}
}
@@ -48,3 +62,13 @@ export default {
```
:::
点击以下按钮查看手机端效果：
<zan-button @click="mobileShow = true">点击查看手机端效果</zan-button>
<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
### 方法参数
| 参数名 | 说明 | 类型 |
|-----------|-----------|-----------|
| imageUrls | 需要预览的图片 | `Array` |
docs/examples-docs/layout.md
+44 -6
View File
@@ -29,12 +29,49 @@
</style>
## Layout 布局
主要提供了 zan-row 和 zan-col 两个组件来进行行列布局
### 常规用法
Layout组件提供了`24列栅格`，通过在`zan-col`上添加`span`属性设置列所占的宽度百分比（span / 24）；此外，添加`offset`属性可以设置列的偏移宽度，计算方式与span相同。
主要提供了`zan-row`和`zan-col`两个组件来进行行列布局。
:::demo
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
#### 全局注册
你可以在全局注册`Row`和`Col`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Row`和`Col`组件了：
```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';
Vue.component(Row.name, Row);
Vue.component(Col.name, Col);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Row`和`Col`组件，这样只能在你注册的组件中使用`Row`和`Col`：
```js
import { Row, Col } from '@youzan/zanui-vue';
export default {
components: {
'zan-row': Row,
'zan-col': Col
}
};
```
### 代码演示
#### 常规用法
Layout组件提供了`24列栅格`，通过在`zan-col`上添加`span`属性设置列所占的宽度百分比`(span / 24)`；此外，添加`offset`属性可以设置列的偏移宽度，计算方式与span相同。
:::demo 常规用法
```html
<zan-row>
<zan-col span="8">
@@ -63,10 +100,11 @@ Layout组件提供了`24列栅格`，通过在`zan-col`上添加`span`属性设
```
:::
### 在列元素之间增加间距
#### 在列元素之间增加间距
列元素之间默认间距为0，如果希望在列元素增加相同的间距，可以在`zan-row`上添加`gutter`属性来设置列元素之间的间距。
:::demo
:::demo 在列元素之间增加间距
```html
<zan-row gutter="10">
<zan-col span="8">
docs/examples-docs/lazyload.md
+169
View File
@@ -0,0 +1,169 @@
<style>
@component-namespace demo {
@b lazyload {
.lazy-img {
display: block;
width: 100%;
height: auto;
}
.lazy-background {
height: 300px;
background-size: cover;
background-repeat: no-repeat;
}
}
}
</style>
<script>
export default {
data() {
return {
imageList: [
'https://img.yzcdn.cn/upload_files/2016/01/27/Fo2dFWjXYzWDR9Jaa1AEqk1jt7e0',
'https://img.yzcdn.cn/upload_files/2016/01/27/FkyhiZfVE8tx-4qjxR2VeiqsSZYL',
'https://img.yzcdn.cn/upload_files/2016/01/27/FpWD3kX18w8qjM6faH-4JqOWHsF4',
'https://img.yzcdn.cn/upload_files/2016/09/08/9ff28d555e5760fa830344f12efa0087.jpg',
'https://img.yzcdn.cn/upload_files/2016/11/13/FlZIeSgbSANSPkmUHttMjoIgY3cv.jpg',
'https://img.yzcdn.cn/upload_files/2016/12/12/FuxgsGPRnupGu_eaMuaR8W0DuSKp.jpeg'
],
backgroundImageList: [
'https://img.yzcdn.cn/upload_files/2016/01/27/Fo2dFWjXYzWDR9Jaa1AEqk1jt7e0',
'https://img.yzcdn.cn/upload_files/2016/01/27/FkyhiZfVE8tx-4qjxR2VeiqsSZYL'
],
componentImageList: [
'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
]
};
},
methods: {
handleComponentShow() {
console.log('component show');
}
}
}
</script>
## Lazyload 图片懒加载
### 使用指南
`Lazyload`是`Vue`指令，所以需要使用它必须将它注册到`Vue`的指令中。
```js
import Vue from 'vue';
import { Lazyload } from '@youzan/zanui-vue';
Vue.use(Lazyload, options);
```
### 代码演示
#### 基础用法
比如商品详情页很多图片的情况需要对图片进行懒加载，只需将`v-lazy`指令的值设置为你需要懒加载的图片。
:::demo 基础用法
```html
<ul class="image-list" ref="container">
<li v-for="img in imageList">
<img class="lazy-img" v-lazy="img">
</li>
</ul>
<script>
export default {
data() {
return {
imageList: [
'https://img.yzcdn.cn/upload_files/2016/01/27/Fo2dFWjXYzWDR9Jaa1AEqk1jt7e0',
'https://img.yzcdn.cn/upload_files/2016/01/27/FkyhiZfVE8tx-4qjxR2VeiqsSZYL',
'https://img.yzcdn.cn/upload_files/2016/01/27/FpWD3kX18w8qjM6faH-4JqOWHsF4',
'https://img.yzcdn.cn/upload_files/2016/09/08/9ff28d555e5760fa830344f12efa0087.jpg',
'https://img.yzcdn.cn/upload_files/2016/11/13/FlZIeSgbSANSPkmUHttMjoIgY3cv.jpg',
'https://img.yzcdn.cn/upload_files/2016/12/12/FuxgsGPRnupGu_eaMuaR8W0DuSKp.jpeg'
]
};
}
}
</script>
```
:::
#### 背景图懒加载
和图片懒加载不同的背景图懒加载需要使用`v-lazy:background-image`，值设置为背景图片的地址。还有一个需要注意的是你需要设置容器的样式，否则高度不会撑开。
:::demo 背景图懒加载
```html
<ul class="image-list" ref="container">
<li v-for="img in backgroundImageList">
<div class="lazy-background" v-lazy:background-image="img"></div>
</li>
</ul>
<script>
export default {
data() {
return {
backgroundImageList: [
'https://img.yzcdn.cn/upload_files/2016/01/27/Fo2dFWjXYzWDR9Jaa1AEqk1jt7e0',
'https://img.yzcdn.cn/upload_files/2016/01/27/FkyhiZfVE8tx-4qjxR2VeiqsSZYL'
]
};
}
}
</script>
```
:::
#### 懒加载模块
懒加载模块需要使用到`lazy-component`，将需要懒加载的内容放在`lazy-component`中即可。
:::demo 懒加载模块
```html
<lazy-component @show="handleComponentShow">
<ul class="image-list">
<li v-for="img in componentImageList">
<img class="lazy-img" v-lazy="img">
</li>
</ul>
</lazy-component>
<script>
export default {
data() {
return {
componentImageList: [
'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
]
};
},
methods: {
handleComponentShow() {
console.log('component show');
}
}
}
</script>
```
:::
### Options
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| loading | 加载时的图片 | `string` | | |
| error | 错误时的图片 | `string` | | |
| preload | 预加载高度的比例 | `string` | | |
| attempt | 尝试次数 | `number` | `3` | |
| listenEvents | 监听的事件 | `Array` | `['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']` | |
| adapter | 适配器 | `Object` | | |
| filter | 图片url过滤 | `Object` | | |
| lazyComponent | 是否能懒加载模块 | `boolean` | `false` | |
docs/examples-docs/loading.md
+69 -32
View File
@@ -1,49 +1,86 @@
<style>
.demo-loading__example{
width: 30px;
height: 30px;
padding: 20px;
margin: auto;
border-radius: 5px;
border: 1px solid transparent;
}
@component-namespace demo {
@b loading {
.zan-loading {
margin: 0 auto;
}
.demo-loading__example--with-bg {
background-color: rgba(0, 0, 0, 0.5);
}
.circle-loading {
margin: 20px auto;
}
.demo-loading {
padding: 0 20px;
.demo-loading__example--with-bg {
background-color: rgba(0, 0, 0, 0.5);
margin: 0 auto;
width: 80px;
padding: 25px 0;
border-radius: 10px;
}
}
}
</style>
## Loading 加载
### 基础用法
### 使用指南
:::demo 基础用法
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
#### 全局注册
你可以在全局注册`Loading`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Loading`组件了：
```js
import Vue from 'vue';
import { Loading } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/loading.css';
Vue.component(Loading.name, Loading);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Loading`组件，这样只能在你注册的组件中使用`Loading`：
```js
import { Loading } from '@youzan/zanui-vue';
export default {
components: {
'zan-loading': Loading
}
};
```
### 代码演示
#### 渐变深色spinner
:::demo 渐变深色spinner
```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>
<zan-loading class="some-customized-class"></zan-loading>
```
:::
#### 渐变浅色spinner
:::demo
```html
<div class="demo-loading__example demo-loading__example--with-bg">
<zan-loading class="some-customized-class" :color="'white'"></zan-loading>
</div>
```
:::
#### 单色spinner
:::demo
```html
<zan-loading class="circle-loading" :type="'circle'" :color="'white'"></zan-loading>
<zan-loading class="circle-loading" :type="'circle'" :color="'black'"></zan-loading>
```
:::
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
docs/examples-docs/panel.md
+36 -4
View File
@@ -31,9 +31,41 @@
## Panel 面板
面板只是一个容器，里面可以放入自定义的内容。
### 使用指南
### 基础用法
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
#### 全局注册
你可以在全局注册`Panel`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Panel`组件了：
```js
import Vue from 'vue';
import { Panel } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/panel.css';
Vue.component(Panel.name, Panel);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Panel`组件，这样只能在你注册的组件中使用`Panel`：
```js
import { Panel } from '@youzan/zanui-vue';
export default {
components: {
'zan-panel': Panel
}
};
```
### 代码演示
#### 基础用法
面板只是一个容器，里面可以放入自定义的内容。
:::demo 基础用法
```html
@@ -45,9 +77,9 @@
```
:::
### 高级用法
#### 高级用法
使用具名`slot`自定义内容。
使用`slot`自定义内容。比如在自定义内容中放入一个`zan-card`。
:::demo 高级用法
```html
docs/examples-docs/picker.md
+34 -2
View File
@@ -37,7 +37,39 @@ export default {
## Picker 选择器
### 基础用法
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
#### 全局注册
你可以在全局注册`Picker`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Picker`组件了：
```js
import Vue from 'vue';
import { Picker } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/picker.css';
Vue.component(Picker.name, Picker);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Picker`组件，这样只能在你注册的组件中使用`Picker`：
```js
import { Picker } from '@youzan/zanui-vue';
export default {
components: {
'zan-picker': Picker
}
};
```
### 代码演示
#### 基础用法
:::demo 基础用法
```html
@@ -76,7 +108,7 @@ export default {
```
:::
### 带toolbar的Picker
#### 带toolbar的Picker
:::demo 带toolbar的Picker
```html
docs/examples-docs/popup.md
+104 -44
View File
@@ -1,26 +1,12 @@
<style>
@component-namespace demo {
@b popup {
.examples,
.example-block {
padding: 0 15px;
}
.zan-popup-1 {
width: 100%;
height: 200px;
box-sizing: border-box;
padding: 20px;
}
.zan-popup-2 {
line-height: 50px;
text-align: center;
background-color: rgba(0, 0, 0, 0.701961);
color: #fff;
}
.zan-popup-3 {
width: 100%;
height: 100%;
}
.zan-popup-4 {
width: 60%;
box-sizing: border-box;
padding: 20px;
@@ -28,8 +14,28 @@
text-align: center;
}
.zan-popup-2 {
width: 100%;
height: 200px;
box-sizing: border-box;
padding: 20px;
}
.zan-popup-3 {
line-height: 50px;
text-align: center;
background-color: rgba(0, 0, 0, 0.701961);
color: #fff;
}
.zan-popup-4,
.zan-popup-5 {
width: 100%;
height: 100%;
}
.zan-button {
margin: 15px;
margin: 10px 0;
}
}
}
@@ -47,15 +53,16 @@ export default {
popupShow1: false,
popupShow2: false,
popupShow3: false,
popupShow4: false
popupShow4: false,
popupShow5: false
}
},
watch: {
popupShow2(val) {
popupShow3(val) {
if (val) {
setTimeout(() => {
this.popupShow2 = false;
this.popupShow3 = false;
}, 2000);
}
}
@@ -78,36 +85,85 @@ export default {
## Popup 弹出菜单
### 基础用法
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
#### 全局注册
你可以在全局注册`Popup`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Popup`组件了：
```js
import Vue from 'vue';
import { Popup } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/popup.css';
Vue.component(Popup.name, Popup);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Popup`组件，这样只能在你注册的组件中使用`Popup`：
```js
import { Popup } from '@youzan/zanui-vue';
export default {
components: {
'zan-popup': Popup
}
};
```
### 代码演示
#### 基础用法
`popup`默认情况下是从中间弹出。
:::demo 基础用法
```html
<div class="zan-row">
<zan-button @click="popupShow1 = true;">从下方弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
<zan-button block @click="popupShow1 = true">从中间弹出popup</zan-button>
<zan-popup v-model="popupShow1" class="zan-popup-1" :lock-on-scroll="true">
从中间弹出popup
</zan-popup>
<script>
export default {
data() {
return {
popupShow1: false
}
}
};
</script>
```
:::
#### 从不同位置弹出菜单
可以设置`position`属性，`popup`即能从不同位置弹出，`position`的可选值有`top`，`bottom`，`right`，`left`。
:::demo 从不同位置弹出菜单
```html
<zan-button block @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>
<div class="zan-row">
<zan-button @click="popupShow2 = true">从上方弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow2" position="top" class="zan-popup-2" :overlay="false">
<zan-button block @click="popupShow3 = true">从上方弹出popup</zan-button>
<zan-popup v-model="popupShow3" position="top" class="zan-popup-3" :overlay="false">
更新成功
</zan-popup>
<div class="zan-row">
<zan-button @click="popupShow3 = true">从右方弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow3" position="right" class="zan-popup-3" :overlay="false">
<zan-button @click.native="popupShow3 = false">关闭 popup</zan-button>
<zan-button block @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>
<div class="zan-row">
<zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow4" class="zan-popup-4">
从中间弹出popup
<zan-button block @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>
<script>
@@ -132,7 +188,6 @@ export default {
}
};
</script>
```
:::
@@ -145,4 +200,9 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| value | 利用`v-model`绑定当前组件是否显示 | `boolean` | | |
| value | 利用`v-model`绑定当前组件是否显示 | `boolean` | `false` | `true`, `false` |
| overlay | 是否显示背景遮罩层 | `boolean` | `true` | `true`, `false` |
| lockOnScroll | 背景是否跟随滚动 | `boolean` | `false` | `true`, `false` |
| position | 弹出菜单位置 | `string` | | `top`, `bottom`, `right`, `left` |
| closeOnClickOverlay | 点击遮罩层是否关闭弹出菜单 | `boolean` | `true` | `true`, `false` |
| transition | 弹出菜单的`transition` | `string` | `popup-slide` | |
docs/examples-docs/progress.md
+45 -5
View File
@@ -12,7 +12,41 @@
## Progress 进度条
### 基础用法
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
#### 全局注册
你可以在全局注册`Progress`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Progress`组件了：
```js
import Vue from 'vue';
import { Progress } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/progress.css';
Vue.component(Progress.name, Progress);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Progress`组件，这样只能在你注册的组件中使用`Progress`：
```js
import { Progress } from '@youzan/zanui-vue';
export default {
components: {
'zan-progress': Progress
}
};
```
### 代码演示
#### 基础用法
默认情况进度条为蓝色，使用`percentage`属性来设置当前进度。
:::demo 基础用法
```html
@@ -29,7 +63,10 @@
:::
### Inactive
#### Inactive
是否置灰进度条，一般用于进度条被取消时。
:::demo Inactive
```html
<div class="demo-progress__wrapper">
@@ -45,8 +82,11 @@
:::
### 自定义颜色和文字
:::demo 自定义颜色
#### 自定义颜色和文字
可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
:::demo 自定义颜色和文字
```html
<div class="demo-progress__wrapper">
<zan-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></zan-progress>
@@ -64,7 +104,7 @@
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| inactive | 是否只会 | `boolean` | `false` | `true`, `false` |
| inactive | 是否置灰 | `boolean` | `false` | `true`, `false` |
| percentage | 进度百分比 | `number` | `false` | `0-100` |
| pivotText | 文字显示 | `string` | 百分比文字 | - |
| color | 进度条颜色 | `string` | `#38f` | hexvalue |
docs/examples-docs/quantity.md
+37 -3
View File
@@ -25,7 +25,39 @@ export default {
## Quantity 数量选择
### 基础用法
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
#### 全局注册
你可以在全局注册`Quantity`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Quantity`组件了：
```js
import Vue from 'vue';
import { Quantity } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/quantity.css';
Vue.component(Quantity.name, Quantity);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Quantity`组件，这样只能在你注册的组件中使用`Quantity`：
```js
import { Quantity } from '@youzan/zanui-vue';
export default {
components: {
'zan-quantity': Quantity
}
};
```
### 代码演示
#### 基础用法
:::demo 基础用法
```html
@@ -34,7 +66,9 @@ export default {
```
:::
### 禁用Quantity
#### 禁用Quantity
设置`disabled`属性，此时`quantity`不可改变。
:::demo 禁用Quantity
```html
@@ -42,7 +76,7 @@ export default {
```
:::
### 高级用法
#### 高级用法
默认是每次加减为1，可以对组件设置`step`、`min`、`max`、`defaultValue`属性。
docs/examples-docs/radio.md
+40
View File
@@ -27,8 +27,42 @@ export default {
## Radio 单选框
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
#### 全局注册
你可以在全局注册`Radio`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Radio`组件了：
```js
import Vue from 'vue';
import { Radio, RadioGroup } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/radio.css';
Vue.component(Radio.name, Radio);
Vue.component(RadioGroup.name, RadioGroup);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Radio`组件，这样只能在你注册的组件中使用`Radio`：
```js
import { Radio, RadioGroup } from '@youzan/zanui-vue';
export default {
components: {
'zan-radio': Radio,
'zan-radio-group': RadioGroup
}
};
```
### 基础用法
通过`v-model`绑定值即可。当`Radio`选中时，绑定的值即为`Radio`中`name`属性设置的值。
:::demo 基础用法
```html
<div class="zan-radios">
@@ -50,6 +84,8 @@ export default {
### 禁用状态
设置`disabled`属性即可，此时`Radio`不能点击。
:::demo 禁用状态
```html
<div class="zan-radios">
@@ -71,6 +107,8 @@ export default {
### radio组
需要与`zan-radio-group`一起使用，在`zan-radio-group`通过`v-model`来绑定当前选中的值。例如下面的`radio3`：
:::demo radio组
```html
<div class="zan-radios">
@@ -94,6 +132,8 @@ export default {
### 与Cell组件一起使用
此时你需要再引入`Cell`和`CellGroup`组件。
:::demo 与Cell组件一起使用
```html
<zan-radio-group v-model="radio4">
docs/examples-docs/search.md
+74 -2
View File
@@ -6,6 +6,9 @@ export default {
},
handleChange(value) {
console.log(value);
},
handleCancel() {
alert('cancel');
}
}
};
@@ -13,11 +16,46 @@ export default {
## Search 搜索
### 基础用法
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
#### 全局注册
你可以在全局注册`Search`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Search`组件了：
```js
import Vue from 'vue';
import { Search } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/search.css';
Vue.component(Search.name, Search);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Search`组件，这样只能在你注册的组件中使用`Search`：
```js
import { Search } from '@youzan/zanui-vue';
export default {
components: {
'zan-search': Search
}
};
```
### 代码演示
#### 基础用法
如果你只需要在搜索时有个回调，只要监听一个`search`事件。
:::demo 基础用法
```html
<zan-search placeholder="商品名称" @search="goSearch" @change="handleChange"></zan-search>
<zan-search placeholder="商品名称" @search="goSearch"></zan-search>
<script>
export default {
methods: {
@@ -30,8 +68,42 @@ export default {
```
:::
#### 监听对应事件
除了`search`事件，还有`change`和`cancel`事件，`change`事件在`input`输入框每次`change`时触发，适用于实时搜索等，`cancel`在取消按钮点击时触发。
:::demo 监听对应事件
```html
<zan-search placeholder="商品名称" @search="goSearch" @change="handleChange" @cancel="handleCancel"></zan-search>
<script>
export default {
methods: {
goSearch(value) {
alert(value)
},
handleChange(value) {
console.log(value);
},
handleCancel() {
alert('cancel');
}
}
};
</script>
```
:::
### API
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| placeholder | `input`的`placeholder`文案 | `string` | | |
### Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| change | `input`输入框每次`change`时触发，适用于实时搜索等 | value：当前`input`输入框的值 |
| cancel | 取消搜索 | |
| search | 确定搜索 | value：当前`input`输入框的值 |
docs/examples-docs/steps.md
+40 -3
View File
@@ -30,11 +30,45 @@ export default {
## Steps 步骤条
### 基础用法
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
#### 全局注册
你可以在全局注册`Steps`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Steps`组件了：
```js
import Vue from 'vue';
import { Steps, Step } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/steps.css';
Vue.component(Steps.name, Steps);
Vue.component(Step.name, Step);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Steps`组件，这样只能在你注册的组件中使用`Steps`：
```js
import { Steps, Step } from '@youzan/zanui-vue';
export default {
components: {
'zan-steps': Steps,
'zan-step': Step
}
};
```
### 代码演示
#### 基础用法
:::demo 基础用法
```html
<zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
<zan-steps :active="active" icon="logistics" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
<zan-step>买家下单</zan-step>
<zan-step>商家接单</zan-step>
<zan-step>买家提货</zan-step>
@@ -61,7 +95,9 @@ export default {
```
:::
### 只显示步骤条
#### 只显示步骤条
当你不设置`title`或`description`属性时，就会🈯️显示步骤条，而没有步骤的详细信息。
:::demo 只显示步骤条
```html
@@ -89,5 +125,6 @@ export default {
| 名称 | 说明 |
|-----------|-----------|
| icon | 自定义icon区域 |
| message-extra | 状态栏添加额外的元素 |
docs/examples-docs/swipe.md
+88 -13
View File
@@ -14,6 +14,19 @@
<script>
export default {
data() {
return {
autoImages: [
'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
],
images: [
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
]
};
},
methods: {
handlePageEnd(page, index) {
console.log(page, index);
@@ -24,33 +37,95 @@ export default {
## Swipe 轮播
### 基础用法
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
#### 全局注册
你可以在全局注册`Swipe`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Swipe`组件了：
```js
import Vue from 'vue';
import { Swipe, SwipeItem } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/swipe.css';
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Swipe`组件，这样只能在你注册的组件中使用`Swipe`：
```js
import { Swipe, SwipeItem } from '@youzan/zanui-vue';
export default {
components: {
'zan-swipe': Swipe,
'zam-swipe-item': SwipeItem
}
};
```
### 代码演示
#### 基础用法
:::demo 基础用法
```html
<zan-swipe>
<zan-swipe-item>
<img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
</zan-swipe-item>
<zan-swipe-item>
<img src="https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
<zan-swipe-item v-for="img in images">
<img v-lazy="img" alt="">
</zan-swipe-item>
</zan-swipe>
<script>
export default {
data() {
return {
images: [
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
]
};
}
};
</script>
```
:::
### 自动轮播
#### 自动轮播
需要设置`auto-play`属性为`true`，即会自动轮播。
:::demo 自动轮播
```html
<zan-swipe :auto-play="true" @pagechange:end="handlePageEnd">
<zan-swipe-item>
<img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
</zan-swipe-item>
<zan-swipe-item>
<img src="https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
<zan-swipe auto-play @pagechange:end="handlePageEnd">
<zan-swipe-item v-for="img in autoImages">
<img v-lazy="img" alt="">
</zan-swipe-item>
</zan-swipe>
<script>
export default {
data() {
return {
autoImages: [
'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
]
};
},
methods: {
handlePageEnd(page, index) {
console.log(page, index);
}
}
};
</script>
```
:::
docs/examples-docs/switch.md
+133 -42
View File
@@ -1,36 +1,38 @@
<style>
@component-namespace demo {
@b switch {
padding: 0 15px 15px;
@e wrapper {
width: 33.33%;
float: left;
.examples {
text-align: center;
}
@e text {
margin: 20px 0;
margin: 20px auto;
}
}
}
</style>
<script>
import Dialog from 'packages/dialog';
export default {
data() {
return {
switchState: true
switchState1: true,
switchState2: true,
switchStateTrue: true,
switchStateFalse: false
};
},
computed: {
switchStateText() {
return this.switchState ? ' ON' : 'OFF';
}
},
methods: {
updateState(newState) {
this.switchState = newState;
const state = newState ? '打开' : '关闭';
Dialog.confirm({
title: '提醒',
message: '是否' + state + '开关？'
}).then((action) => {
this.switchState2 = newState;
}, (error) => {});
}
}
};
@@ -38,46 +40,83 @@ export default {
## Switch 开关
### 基础用法
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
#### 全局注册
你可以在全局注册`Switch`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Switch`组件了：
```js
import Vue from 'vue';
import { Switch } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/switch.css';
Vue.component(Switch.name, Switch);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Switch`组件，这样只能在你注册的组件中使用`Switch`：
```js
import { Switch } from '@youzan/zanui-vue';
export default {
components: {
'zan-switch': Switch
}
};
```
### 代码演示
#### 基础用法
:::demo 基础用法
```html
<div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="switchState" @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>
<zan-switch class="some-customized-class" v-model="switchState1"></zan-switch>
<div class="demo-switch__text">{{ switchState1 ? ' ON' : 'OFF' }}</div>
<script>
export default {
data() {
return {
switchState: true
switchState1: true
};
}
};
</script>
```
:::
:::demo 基础用法
```html
<zan-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></zan-switch>
<div class="demo-switch__text">{{ switchState2 ? ' ON' : 'OFF' }}</div>
<script>
import Dialog from 'packages/dialog';
export default {
data() {
return {
switchState2: true
};
},
computed: {
switchStateText() {
return this.switchState ? ' ON' : 'OFF';
}
},
methods: {
updateState(newState) {
this.switchState = newState;
const state = newState ? '打开' : '关闭';
Dialog.confirm({
title: '提醒',
message: '是否' + state + '开关？'
}).then((action) => {
this.switchState2 = newState;
}, (error) => {
});
}
}
};
@@ -85,10 +124,62 @@ export default {
```
:::
#### 禁用状态
设置`disabled`属性为`true`，此时开关不可点击。
:::demo
```html
<zan-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></zan-switch>
<div class="demo-switch__text">ON, DISABLED</div>
<zan-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></zan-switch>
<div class="demo-switch__text">OFF, DISABLED</div>
<script>
export default {
data() {
return {
switchStateTrue: true,
switchStateFalse: false
};
}
};
</script>
```
:::
#### loading状态
设置`loading`属性为`true`，此时开关为加载状态，一般用于点击开关时正在向后端发送请求，此时正在loading，请求成功后，结束loading。
:::demo
```html
<zan-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></zan-switch>
<div class="demo-switch__text">ON, LOADING</div>
<zan-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></zan-switch>
<div class="demo-switch__text">OFF, LOADING</div>
<script>
export default {
data() {
return {
switchStateTrue: true,
switchStateFalse: false
};
}
};
</script>
```
:::
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| checked | 开关状态 | `boolean` | `false` | `true`, `false` |
| v-model | 开关状态 | `boolean` | `false` | `true`, `false` |
| loading | loading状态 | `boolean` | `false` | `true`, `false` |
| disabled | 禁用状态 | `boolean` | `false` | `true`, `false` |
| onChange | 开关状态切换回调(默认则改变开关状态) | `function` | - | - |
docs/examples-docs/tab.md
+98 -28
View File
@@ -1,4 +1,3 @@
<style>
@component-namespace demo {
@b tab {
@@ -6,6 +5,22 @@
background-color: #fff;
padding: 20px;
}
.zan-tabs--card .zan-tab__pane {
background-color: transparent;
}
.custom-tabwrap .zan-tab-active {
color: #20a0ff;
}
.custom-tabwrap .zan-tabs-nav-bar {
background: #20a0ff;
}
.custom-pane {
text-align: center;
height: 50px;
line-height: 50px;
}
}
}
</style>
@@ -36,7 +51,43 @@ export default {
## Tab 标签
### 基础用法
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
#### 全局注册
你可以在全局注册`Tab`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Tab`组件了：
```js
import Vue from 'vue';
import { Tab, Tabs } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/tab.css';
Vue.component(Tab.name, Tab);
Vue.component(Tabs.name, Tabs);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Tab`组件，这样只能在你注册的组件中使用`Tab`：
```js
import { Tab, Tabs } from '@youzan/zanui-vue';
export default {
components: {
'zan-tab': Tab,
'zan-tabs': Tabs
}
};
```
### 代码演示
#### 基础用法
默认情况下是启用第一个`tab`。
:::demo 基础用法
```html
@@ -50,17 +101,36 @@ export default {
```
:::
### 禁用用法
#### active特定tab
:::demo 禁用用法
可以在`zan-tabs`上设置`active`为对应`tab`的索引（从0开始，即0代表第一个）即可激活对应`tab`。
:::demo 基础用法
```html
<zan-tabs :active="active">
<zan-tab title="选项一">内容一</zan-tab>
<zan-tab disable title="选项二" @disable="popalert">内容二</zan-tab>
<zan-tab title="选项二">内容二</zan-tab>
<zan-tab title="选项三">内容三</zan-tab>
<zan-tab title="选项四">内容四</zan-tab>
<zan-tab title="选项五">内容五</zan-tab>
</zan-tabs>
```
:::
#### 禁用tab
在对应的`zan-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>
<script>
export default {
methods: {
@@ -73,9 +143,11 @@ export default {
```
:::
### card样式用法
#### card样式
:::demo card样式用法
`Tabs`目前有两种样式：`line`和`card`，默认为`line`样式，也就上面基础用法中的样式，你可以在`zan-tabs`上设置`type`为`card`改为card样式。
:::demo card样式
```html
<zan-tabs type="card">
<zan-tab title="选项一">内容一</zan-tab>
@@ -87,18 +159,12 @@ export default {
```
:::
<style>
.page-tab {
padding: 0 15px;
}
.custom-tabwrap .zan-tab-active{
.custom-tabwrap .zan-tab-active {
color: #20a0ff;
}
.custom-tabwrap .zan-tabs-nav-bar{
.custom-tabwrap .zan-tabs-nav-bar {
background: #20a0ff;
}
.custom-tab {
font-weight: bold;
}
.custom-pane {
text-align: center;
height: 50px;
@@ -106,30 +172,27 @@ export default {
}
</style>
### 自定义样式用法
#### 自定义样式
:::demo 自定义样式用法
可以在`zan-tabs`上设置对应的`class`，从而自定义某些样式。
:::demo 自定义样式
```html
<zan-tabs active="2" navclass="custom-tabwrap">
<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>
<style>
.page-tab {
padding: 0 15px;
}
.custom-tabwrap .zan-tab-active{
.custom-tabwrap .zan-tab-active {
color: #20a0ff;
}
.custom-tabwrap .zan-tabs-nav-bar{
.custom-tabwrap .zan-tabs-nav-bar {
background: #20a0ff;
}
.custom-tab {
font-weight: bold;
}
.custom-pane {
text-align: center;
height: 50px;
@@ -139,7 +202,7 @@ export default {
```
:::
### click事件
#### click事件
可以在`zan-tabs`上绑定一个`click`事件，事件处理函数有一个参数，参数为对应`tab`在`tabs`中的索引。
@@ -179,5 +242,12 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选 |
|-----------|-----------|-----------|-------------|-------------|
| title | tab的标题 | `string` | | |
| disable | 是否禁用这个tab | `boolean` | `false` | |
| disabled | 是否禁用这个tab | `boolean` | `false` | |
### zan-tabs Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| click | 某个tab点击事件 | index：点击的`tab`的索引 |
| disabled | 某个tab禁用时点击事件 | index：点击的`tab`的索引 |
docs/examples-docs/tag.md
+43 -7
View File
@@ -10,13 +10,47 @@
## Tag 标记
### 基础用法
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
#### 全局注册
你可以在全局注册`Tag`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Tag`组件了：
```js
import Vue from 'vue';
import { Tag } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/tag.css';
Vue.component(Tag.name, Tag);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Tag`组件，这样只能在你注册的组件中使用`Tag`：
```js
import { Tag } from '@youzan/zanui-vue';
export default {
components: {
'zan-tag': Tag
}
};
```
### 代码演示
#### 基础用法
`Tag`目前有三种类型，`danger`、`success`、`primary`，它们分别显示为红色，绿色和蓝色，你也可以加上自定义的类，为它们加上其他的颜色。
:::demo 基础用法
```html
<div class="tags-container">
<zan-tag>返现</zan-tag>
<zan-tag :plain="true">返现</zan-tag>
<zan-tag plain>返现</zan-tag>
</div>
<div class="tags-container">
<zan-tag type="danger">返现</zan-tag>
@@ -26,24 +60,26 @@
```
:::
### 高级用法
#### 高级用法
设置`plain`为`true`时表示空心的`tag`，还可以设置`mark`为`true`，表示是否为标记。
:::demo 高级用法
```html
<div class="tags-container">
<zan-tag type="danger">返现</zan-tag>
<zan-tag :plain="true" type="danger">返现</zan-tag>
<zan-tag plain type="danger">返现</zan-tag>
</div>
<div class="tags-container">
<zan-tag type="primary">返现</zan-tag>
<zan-tag :plain="true" type="primary">返现</zan-tag>
<zan-tag plain type="primary">返现</zan-tag>
</div>
<div class="tags-container">
<zan-tag type="success">返现</zan-tag>
<zan-tag :plain="true" type="success">返现</zan-tag>
<zan-tag plain type="success">返现</zan-tag>
</div>
<div class="tags-container">
<zan-tag type="danger" :mark="true">返现</zan-tag>
<zan-tag type="danger" mark>返现</zan-tag>
</div>
```
:::
docs/examples-docs/toast.md
+28 -15
View File
@@ -38,9 +38,9 @@ export default {
type: 'success',
message: leftSec.toString()
});
window.setInterval(() => {
const id = window.setInterval(() => {
if (leftSec <= 1) {
window.clearInterval();
window.clearInterval(id);
toast.message = '跳转中...'
return;
}
@@ -65,7 +65,17 @@ export default {
## Toast 轻提示
### 基础用法
### 使用指南
`Toast`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。
```js
import { Toast } from '@youzan/zanui-vue';
```
### 代码演示
#### 基础用法
:::demo 基础用法
```html
@@ -106,9 +116,9 @@ export default {
type: 'success',
message: leftSec.toString()
});
window.setInterval(() => {
const id = window.setInterval(() => {
if (leftSec <= 1) {
window.clearInterval();
window.clearInterval(id);
toast.message = '跳转中...'
return;
}
@@ -121,7 +131,7 @@ export default {
```
:::
### 手动关闭
#### 手动关闭
:::demo 手动关闭
```html
@@ -134,10 +144,10 @@ import { Toast } from 'src/index';
export default {
methods: {
showToast() {
this.toast = Toast('我是提示文案，建议不超过十五字~');
Toast('我是提示文案，建议不超过十五字~');
},
closeToast() {
this.toast.clear();
Toast.clear();
}
}
};
@@ -146,7 +156,7 @@ export default {
:::
### 传入html
#### 传入html
:::demo 手动关闭
```html
@@ -171,7 +181,8 @@ export default {
### 基础用法
### Toast(options)
#### Toast(options)
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
@@ -181,7 +192,8 @@ export default {
| duration | 时长(ms) | Number | 3000ms | -|
### 快速用法
### Toast(message) || Toast(message, options)
#### Toast(message) || Toast(message, options)
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
@@ -189,14 +201,14 @@ export default {
| forbidClick | 不允许背景点击 | Boolean | false | true, false|
| duration | 时长(ms) | Number | 3000ms | -|
### Toast.loading() || Toast.loading(message, options)
#### Toast.loading() || Toast.loading(message, options)
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| forbidClick | 不允许背景点击 | Boolean | false | true, false|
| duration | 时长(ms) | Number | 3000ms | -|
### Toast.success(message) || Toast.success(message, options)
#### Toast.success(message) || Toast.success(message, options)
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
@@ -204,7 +216,7 @@ export default {
| forbidClick | 不允许背景点击 | Boolean | false | true, false|
| duration | 时长(ms) | Number | 3000ms | -|
### Toast.fail(message) || Toast.fail(message, options)
#### Toast.fail(message) || Toast.fail(message, options)
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
@@ -212,5 +224,6 @@ export default {
| forbidClick | 不允许背景点击 | Boolean | false | true, false|
| duration | 时长(ms) | Number | 3000ms | -|
### instanceOfToast.clear()
#### Toast.clear()
关闭toast。
docs/examples-docs/uploader.md
+40 -5
View File
@@ -12,25 +12,60 @@ export default {
}
};
</script>
## Uploader 图片上传
### 基础用法
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
#### 全局注册
你可以在全局注册`Uploader`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Uploader`组件了：
```js
import Vue from 'vue';
import { Uploader } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/uploader.css';
Vue.component(Uploader.name, Uploader);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Uploader`组件，这样只能在你注册的组件中使用`Uploader`：
```js
import { Uploader } from '@youzan/zanui-vue';
export default {
components: {
'zan-uploader': Uploader
}
};
```
### 代码演示
#### 基础用法
:::demo 基础用法
```html
<div class="uploader-container">
<zan-uploader
:before-read="logContent"
@file-readed="logContent">
:after-read="logContent">
</zan-uploader>
</div>
```
:::
### 自定义上传图标
#### 自定义上传图标
:::demo 自定义上传图标
```html
<div class="uploader-container">
<zan-uploader @file-readed="logContent">
<zan-uploader :after-read="logContent">
<zan-icon name="photograph"></zan-icon>
</zan-uploader>
</div>
@@ -45,7 +80,7 @@ export default {
| result-type | 读取文件的方式，以base64的方式读取；以文本的方式读取 | `string` | `dataUrl` | `dataUrl`, `text` |
| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | `boolean` | `false` | |
| before-read | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件。 | `Function` | | |
| file-readed | 文件读完之后出发此事件，参数为{name:'文件名',type:'文件类型',size:'文件大小',content:'读的内容'} | `Function` | | |
| after-read | 文件读完之后回调此函数，参数为{name:'文件名',type:'文件类型',size:'文件大小',content:'读的内容'} | `Function` | | |
### Slot
docs/examples-docs/waterfall.md
+33 -1
View File
@@ -1,6 +1,34 @@
## Waterfall 瀑布流
### 基础用法
### 使用指南
#### 全局注册
`Waterfall`引入后就自动全局安装。如果需要，可以再次手动安装：
```js
import Vue from 'vue';
import { Waterfall } from '@youzan/zanui-vue';
Waterfall.install(Vue);
```
#### 局部注册
如果你只是想在某个组件中使用`Waterfall`，你可以在对应组件中注册`Waterfall`指令，这样只能在你注册的组件中使用`Waterfall`：
```js
import { Waterfall } from '@youzan/zanui-vue';
export default {
directives: {
WaterfallLower: Waterfall('lower'),
WaterfallUpper: Waterfall('upper')
}
};
```
### 代码演示
<script>
export default {
@@ -48,6 +76,8 @@ export default {
}
</style>
#### 基础用法
:::demo 基础用法
```html
<div class="waterfall">
@@ -76,6 +106,8 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| v-waterfall-lower | 滚动到底部, 触发执行的函数 | `function` | - | |
| v-waterfall-upper | 滚动到顶部, 触发执行的函数 | `function` | - | |
| waterfall-disabled | 在vue对象中表示是否禁止瀑布流触发的key值 | `string` | - | |
| waterfall-offset | 触发瀑布流加载的阈值 | `number` | `300` | |