mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs
This commit is contained in:
cookfront
parent
5580e2cdce
commit
9075f7df3e
@ -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`的对象信息 |
|
||||
|
||||
@ -41,7 +41,17 @@ export default {
|
||||
|
||||
## Dialog 弹出框
|
||||
|
||||
### 基础用法
|
||||
### 使用指南
|
||||
|
||||
`Dialog`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它，它接受一个数组作为参数，数组中的每一项对应了图片链接。
|
||||
|
||||
```js
|
||||
import { Dialog } from '@youzan/zanui-vue';
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
|
||||
@ -31,15 +31,10 @@ export default {
|
||||
|
||||
### 使用指南
|
||||
|
||||
`ImagePreview`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它，它接受一个数组作为参数，数组中的每一项对应了图片链接。
|
||||
`ImagePreview`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。
|
||||
|
||||
```js
|
||||
import { ImagePreview } from '@youzan/zanui-vue';
|
||||
|
||||
ImagePreview([
|
||||
imageUrl1,
|
||||
imageUrl2
|
||||
]);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
@ -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
|
||||
|
||||
@ -75,9 +75,11 @@ export default {
|
||||
|
||||
#### 自动轮播
|
||||
|
||||
需要设置`auto-play`属性为`true`，即会自动轮播。
|
||||
|
||||
:::demo 自动轮播
|
||||
```html
|
||||
<zan-swipe :auto-play="true" @pagechange:end="handlePageEnd">
|
||||
<zan-swipe auto-play @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>
|
||||
|
||||
@ -65,7 +65,17 @@ export default {
|
||||
|
||||
## Toast 轻提示
|
||||
|
||||
### 基础用法
|
||||
### 使用指南
|
||||
|
||||
`Toast`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。
|
||||
|
||||
```js
|
||||
import { Toast } from '@youzan/zanui-vue';
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
@ -121,7 +131,7 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### 手动关闭
|
||||
#### 手动关闭
|
||||
|
||||
:::demo 手动关闭
|
||||
```html
|
||||
@ -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 | -|
|
||||
|
||||
### Toast.clear()
|
||||
#### Toast.clear()
|
||||
|
||||
关闭toast。
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
## Waterfall 瀑布流
|
||||
|
||||
### 使用指南
|
||||
|
||||
#### 全局注册
|
||||
|
||||
`Waterfall`引入后就自动全局安装。如果需要，可以再次手动安装：
|
||||
@ -74,6 +76,8 @@ export default {
|
||||
}
|
||||
</style>
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="waterfall">
|
||||
|
||||
@ -89,7 +89,9 @@ export default {
|
||||
|
||||
methods: {
|
||||
handleItemClick(item) {
|
||||
|
||||
if (item.callback && typeof item.callback === 'function') {
|
||||
item.callback(item);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user