vant components
This commit is contained in:
cookfront
@@ -0,0 +1,226 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b actionsheet {
|
||||
.actionsheet-wx {
|
||||
color: #06BF04;
|
||||
}
|
||||
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.title-actionsheet p {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import MobileComputed from 'components/mobile-computed';
|
||||
|
||||
export default {
|
||||
mixins: [MobileComputed],
|
||||
|
||||
data() {
|
||||
return {
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: 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 行动按钮
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`ActionSheet`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`ActionSheet`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { ActionSheet } from 'vant';
|
||||
import 'vant/lib/vant-css/actionSheet.css';
|
||||
|
||||
Vue.component(ActionSheet.name, ActionSheet);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`ActionSheet`组件，这样只能在你注册的组件中使用`ActionSheet`：
|
||||
|
||||
```js
|
||||
import { ActionSheet } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-actionSheet': ActionSheet
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
需要传入一个`actions`的属性，该属性为一个数组，数组的每一项是一个对象，可以根据下面的[action对象](#actions)设置你想要的信息。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-button @click="show1 = true">弹出actionsheet</van-button>
|
||||
<van-actionsheet v-model="show1" :actions="actions1">
|
||||
</van-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
|
||||
<van-button @click="show2 = true">弹出带取消按钮的actionsheet</van-button>
|
||||
<van-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
|
||||
</van-actionsheet>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show2: false,
|
||||
actions1: [
|
||||
{
|
||||
name: '微信安全支付',
|
||||
className: 'actionsheet-wx',
|
||||
callback: this.handleActionClick
|
||||
},
|
||||
{
|
||||
name: '支付宝支付',
|
||||
loading: true
|
||||
},
|
||||
{
|
||||
name: '有赞E卡',
|
||||
subname: '（剩余260.50元）'
|
||||
},
|
||||
{
|
||||
name: '信用卡支付'
|
||||
},
|
||||
{
|
||||
name: '其他支付方式'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 带标题的ActionSheet
|
||||
|
||||
如果传入了`title`属性，且不为空，则另外一种样式的`ActionSheet`，里面内容需要自定义。
|
||||
|
||||
:::demo 带标题的ActionSheet
|
||||
```html
|
||||
<van-button @click="show3 = true">弹出带标题的actionsheet</van-button>
|
||||
<van-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
|
||||
<p>一些内容</p>
|
||||
</van-actionsheet>
|
||||
```
|
||||
:::
|
||||
|
||||
点击以下按钮查看手机端效果：
|
||||
|
||||
<van-button @click="mobileShow = true">点击查看手机端效果</van-button>
|
||||
<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| actions | 行动按钮数组 | `Array` | `[]` | |
|
||||
| title | 标题 | `String` | | |
|
||||
| cancelText | 取消按钮文案 | `String` | | |
|
||||
| overlay | 是否显示遮罩 | `Boolean` | | |
|
||||
| closeOnClickOverlay | 点击遮罩是否关闭`ActionSheet` | `Boolean` | | |
|
||||
|
||||
### actions
|
||||
|
||||
`API`中的`actions`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
|
||||
|
||||
| key | 说明 |
|
||||
|-----------|-----------|
|
||||
| name | 标题 |
|
||||
| subname | 二级标题 |
|
||||
| className | 为对应列添加特殊的`class` |
|
||||
| loading | 是否是`loading`状态 |
|
||||
| callback | 点击时的回调。该回调接受一个参数，参数为当前点击`action`的对象信息 |
|
||||
@@ -0,0 +1,113 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b badge {
|
||||
.badge-group-wrapper {
|
||||
padding: 30px 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.van-badge-group {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeKey: '2'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onItemClick(e, data) {
|
||||
this.activeKey = data.mark;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Badge 徽章
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Badge`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Badge`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Badge, BadgeGroup } from 'vant';
|
||||
import 'vant/lib/vant-css/badge.css';
|
||||
|
||||
Vue.component(Badge.name, Badge);
|
||||
Vue.component(BadgeGroup.name, BadgeGroup);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Badge`组件，这样只能在你注册的组件中使用`Badge`：
|
||||
|
||||
```js
|
||||
import { Badge, BadgeGroup } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-badge': Badge,
|
||||
'van-badge-group': BadgeGroup
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
默认情况下激活第一个`badge`。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="badge-group-wrapper">
|
||||
<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`，你可以在`van-badge-group`上设置`activeKey`属性，属性值为对应的`badge`索引。
|
||||
|
||||
:::demo 选中某个badge
|
||||
```html
|
||||
<div class="badge-group-wrapper">
|
||||
<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>
|
||||
```
|
||||
:::
|
||||
|
||||
### z-badge-group API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| active-key | 激活的`badge`的索引 | `string` | `0`但必须子badge里的mark是有`0`位索引 | |
|
||||
|
||||
|
||||
### z-badge API
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | badge的文案标题 | `string` | `''` | `required` |
|
||||
| info | 当前badge的提示消息 | `string` | `''` | |
|
||||
| url | 跳转链接 | `string` | 链接直接跳转或者hash | |
|
||||
@@ -0,0 +1,174 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b button {
|
||||
.van-row {
|
||||
padding: 0 15px;
|
||||
}
|
||||
.van-col {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Button 按钮
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Button`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Button`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Button } from 'vant';
|
||||
import 'vant/lib/vant-css/button.css';
|
||||
|
||||
Vue.component(Button.name, Button);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Button`组件，这样只能在你注册的组件中使用`Button`：
|
||||
|
||||
```js
|
||||
import { Button } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-button': Button
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 按钮功能
|
||||
|
||||
只接受`primary`, `default`, `danger`三种类型，默认`default`。
|
||||
|
||||
:::demo 按钮功能
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 禁用状态
|
||||
|
||||
在组件上加上`disabled`属性即可，此时按钮不可点击。
|
||||
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button disabled block>diabled</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 按钮尺寸
|
||||
|
||||
只接受`large`, `normal`, `small`, `mini`四种尺寸，默认`normal`。`large`按钮默认100%宽度。
|
||||
|
||||
:::demo 按钮尺寸
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 自定义按钮标签
|
||||
|
||||
按钮默认是`button`标签，可以使用`tag`属性修改为一个`a`标签。
|
||||
|
||||
:::demo 自定义按钮标签
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
:::
|
||||
|
||||
#### loading按钮
|
||||
|
||||
`loading`状态的按钮。
|
||||
|
||||
:::demo loading按钮
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 页面底部操作按钮
|
||||
|
||||
一般用于`fixed`在底部的区域或是`popup`弹层的底部，一般只使用`primary`和`normal`两种状态。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 按钮类型 | `string` | `default` | `primary`, `danger` |
|
||||
| size | 按钮尺寸 | `string` | `normal` | `large`, `small`, `mini` |
|
||||
| tag | 按钮标签 | `string` | `button` | `a`, `span`, ... |
|
||||
| diabled | 按钮是否禁用 | `boolean` | `false` | |
|
||||
| block | 按钮是否显示为块级元素 | `boolean` | `false` | |
|
||||
| bottomAction | 按钮是否显示为底部行动按钮，一般显示在页面底部，有特殊样式 | `boolean` | `false` | |
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
## Card 图文组件
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Card`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Card`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Card } from 'vant';
|
||||
import 'vant/lib/vant-css/card.css';
|
||||
|
||||
Vue.component(Card.name, Card);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Card`组件，这样只能在你注册的组件中使用`Card`：
|
||||
|
||||
```js
|
||||
import { Card } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-card': Card
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
当没有底部按钮时，右侧内容会居中显示。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
desc="描述"
|
||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
</van-card>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 高级用法
|
||||
|
||||
可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<van-card
|
||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="van-card__row" slot="title">
|
||||
<h4 class="van-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="van-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
<div class="van-card__row" slot="desc">
|
||||
<span class="van-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="van-card__footer" slot="footer">
|
||||
<van-button size="mini">按钮一</van-button>
|
||||
<van-button size="mini">按钮二</van-button>
|
||||
</div>
|
||||
</van-card>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| thumb | 左侧图片 | `string` | | |
|
||||
| title | 标题 | `string` | | |
|
||||
| desc | 描述 | `string` | | |
|
||||
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| title | 自定义标题 |
|
||||
| desc | 自定义描述 |
|
||||
| tags | 自定义tags |
|
||||
| footer | 自定义footer |
|
||||
@@ -0,0 +1,130 @@
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleClick() {
|
||||
console.log('cell click');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Cell 单元格
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Cell`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Cell`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Cell } from 'vant';
|
||||
import 'vant/lib/vant-css/cell.css';
|
||||
|
||||
Vue.component(Cell.name, Cell);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Cell`组件，这样只能在你注册的组件中使用`Cell`：
|
||||
|
||||
```js
|
||||
import { Cell } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-cell': Cell
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell title="单元格1" value="单元格1内容"></van-cell>
|
||||
<van-cell title="单元格2" value="单元格2内容"></van-cell>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 标题带描述信息
|
||||
|
||||
传入`label`属性，属性值为描述信息的值。
|
||||
|
||||
:::demo 标题带描述信息
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 带图标
|
||||
|
||||
传入`icon`属性。
|
||||
|
||||
:::demo 带图标
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell title="起码运动馆" icon="home"></van-cell>
|
||||
<van-cell title="线下门店" icon="location"></van-cell>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 可点击的链接
|
||||
|
||||
传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
|
||||
|
||||
:::demo 可点击的链接
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 高级用法
|
||||
|
||||
如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
|
||||
<template slot="title">
|
||||
<span class="van-cell-text">起码运动馆</span>
|
||||
<van-tag type="danger">官方</van-tag>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell title="线下门店" icon="location" url="http://youzan.com" is-link></van-cell>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| icon | 左侧图标 | `string` | | |
|
||||
| title | 左侧标题 | `string` | | |
|
||||
| value | 右侧内容 | `string` | | |
|
||||
| isLink | 是否为链接，链接会在右侧出现箭头 | `boolean` | | |
|
||||
| url | 跳转链接 | `string` | | |
|
||||
| label | 描述信息，显示在标题下方 | `string` | | |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| - | 自定义显示内容 |
|
||||
| icon | 自定义`icon` |
|
||||
| title | 自定义`title` |
|
||||
@@ -0,0 +1,230 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b checkbox {
|
||||
.van-checkbox-wrapper {
|
||||
padding: 0 20px;
|
||||
|
||||
.van-checkbox {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkbox1: true,
|
||||
checkbox2: true,
|
||||
list: [
|
||||
'a',
|
||||
'b',
|
||||
'c'
|
||||
],
|
||||
result: ['a', 'b']
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
result(val) {
|
||||
console.log(val);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Checkbox 复选框
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Checkbox`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Checkbox`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Checkbox, CheckboxGroup } from 'vant';
|
||||
import 'vant/lib/vant-css/checkbox.css';
|
||||
|
||||
Vue.component(Checkbox.name, Checkbox);
|
||||
Vue.component(CheckboxGroup.name, CheckboxGroup);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Checkbox`组件，这样只能在你注册的组件中使用`Checkbox`：
|
||||
|
||||
```js
|
||||
import { Checkbox, CheckboxGroup } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-checkbox': Checkbox,
|
||||
'van-checkbox-group': CheckboxGroup
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
通过`v-model`绑定值即可。当`Checkbox`选中时，绑定的值即为`true`，否则为`false`。当单个`Checkbox`使用时，更建议使用`Switch`组件。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="van-checkbox-wrapper">
|
||||
<van-checkbox v-model="checkbox1">复选框1</van-checkbox>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkbox1: true
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 禁用状态
|
||||
|
||||
设置`disabled`属性即可，此时`Checkbox`不能点击。
|
||||
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<div class="van-checkbox-wrapper">
|
||||
<van-checkbox v-model="checkbox2">复选框2</van-checkbox>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkbox2: true
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Checkbox组
|
||||
|
||||
需要与`van-checkbox-group`一起使用，值通过`v-model`绑定在`van-checkbox-group`上，例如下面的`result`，此时`result`的值是一个数组。数组中的项即为选中的`Checkbox`的`name`属性设置的值。
|
||||
|
||||
:::demo Checkbox组
|
||||
```html
|
||||
<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>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
'a',
|
||||
'b',
|
||||
'c'
|
||||
],
|
||||
result: ['a', 'b']
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
result(val) {
|
||||
console.log(val);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 禁用Checkbox组
|
||||
|
||||
禁用`van-checkbox-group`，此时整个组都不可点击。
|
||||
|
||||
:::demo 禁用Checkbox组
|
||||
```html
|
||||
<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>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
'a',
|
||||
'b',
|
||||
'c'
|
||||
],
|
||||
result: ['a', 'b']
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 与Cell组件一起使用
|
||||
|
||||
此时你需要再引入`Cell`和`CellGroup`组件。
|
||||
|
||||
:::demo 与Cell组件一起使用
|
||||
```html
|
||||
<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 {
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
'a',
|
||||
'b',
|
||||
'c'
|
||||
],
|
||||
result: ['a', 'b']
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Checkbox API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | 是否禁用单选框 | `boolean` | `false` | |
|
||||
| name | 根据这个来判断radio是否选中 | `boolean` | `false` | |
|
||||
|
||||
### CheckboxGroup API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | 是否禁用单选框 | `boolean` | `false` | |
|
||||
|
||||
### CheckboxGroup Event
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|
||||
@@ -0,0 +1,159 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
minHour: 10,
|
||||
maxHour: 20,
|
||||
minDate: new Date(),
|
||||
currentDate: null
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handlePickerChange(picker, values) {
|
||||
// picker.setColumnValues(1, citys[values[0]]);
|
||||
console.log(values);
|
||||
},
|
||||
handlePickerCancel() {
|
||||
alert('picker cancel');
|
||||
},
|
||||
handlePickerConfirm() {
|
||||
alert('picker confirm');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Datetime Picker 时间选择
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`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
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="datetime"
|
||||
format="yyyy.mm.dd hh时 mm分"
|
||||
:min-hour="minHour"
|
||||
:max-hour="maxHour"
|
||||
:min-date="minDate"
|
||||
@change="handlePickerChange">
|
||||
</van-datetime-picker>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
minHour: 10,
|
||||
maxHour: 20,
|
||||
minDate: new Date()
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handlePickerChange(picker, values) {
|
||||
picker.setColumnValues(1, citys[values[0]]);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 选择日期
|
||||
|
||||
:::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
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | |
|
||||
| itemHeight | 选中元素区高度 | Number | 44 | |
|
||||
| columns | 对象数组，配置每一列显示的数据 | Array | | |
|
||||
| showToolbar | 是否在组件顶部显示一个toolbar | Boolean | true | |
|
||||
|
||||
### columns
|
||||
|
||||
`API`中的`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
|
||||
|
||||
| key | 说明 |
|
||||
|-----------|-----------|
|
||||
| values | 列中对应的备选值 |
|
||||
| defaultIndex | 初始选中值的索引，默认为0 |
|
||||
| className | 为对应列添加特殊的`class` |
|
||||
|
||||
### change事件
|
||||
|
||||
在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作：
|
||||
|
||||
| 函数 | 说明 |
|
||||
|-----------|-----------|
|
||||
| getColumnValue(index) | 获取对应列中选中的值 |
|
||||
| setColumnValue(index, value) | 设置对应列中选中的值 |
|
||||
| getColumnValues(index) | 获取对应列中所有的备选值 |
|
||||
| setColumnValues(index, values) | 设置对应列中所有的备选值 |
|
||||
| getValues() | 获取所有列中被选中的值，返回一个数组 |
|
||||
| setValues(values) | `values`为一个数组，设置所有列中被选中的值 |
|
||||
@@ -0,0 +1,145 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b dialog {
|
||||
.van-button {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { Dialog } from 'src/index';
|
||||
import MobileComputed from 'components/mobile-computed';
|
||||
|
||||
export default {
|
||||
mixins: [MobileComputed],
|
||||
|
||||
methods: {
|
||||
handleAlertClick() {
|
||||
Dialog.alert({
|
||||
title: 'alert标题',
|
||||
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
|
||||
}).then((action) => {
|
||||
console.log(action);
|
||||
});
|
||||
},
|
||||
|
||||
handleAlert2Click() {
|
||||
Dialog.alert({
|
||||
message: '无标题alert'
|
||||
}).then((action) => {
|
||||
console.log(action);
|
||||
});
|
||||
},
|
||||
|
||||
handleConfirmClick() {
|
||||
Dialog.confirm({
|
||||
title: 'confirm标题',
|
||||
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
|
||||
}).then((action) => {
|
||||
console.log(action);
|
||||
}, (error) => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Dialog 弹出框
|
||||
|
||||
### 使用指南
|
||||
|
||||
`Dialog`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它，它接受一个数组作为参数，数组中的每一项对应了图片链接。
|
||||
|
||||
```js
|
||||
import { Dialog } from 'vant';
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 消息提示
|
||||
|
||||
用于提示一些消息，只包含一个确认按钮。
|
||||
|
||||
:::demo 消息提示
|
||||
```html
|
||||
<van-button @click="handleAlertClick">alert</van-button>
|
||||
<van-button @click="handleAlert2Click">无标题alert</van-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleAlertClick() {
|
||||
Dialog.alert({
|
||||
title: 'alert标题',
|
||||
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
|
||||
}).then((action) => {
|
||||
console.log(action);
|
||||
});
|
||||
},
|
||||
|
||||
handleAlert2Click() {
|
||||
Dialog.alert({
|
||||
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
|
||||
}).then((action) => {
|
||||
console.log(action);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 消息确认
|
||||
|
||||
用于确认消息，包含取消和确认按钮。
|
||||
|
||||
:::demo 消息确认
|
||||
```html
|
||||
<van-button @click="handleConfirmClick">confirm</van-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleConfirmClick() {
|
||||
Dialog.confirm({
|
||||
title: 'confirm标题',
|
||||
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
|
||||
}).then((action) => {
|
||||
console.log(action);
|
||||
}, (error) => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
点击以下按钮查看手机端效果：
|
||||
|
||||
<van-button @click="mobileShow = true">点击查看手机端效果</van-button>
|
||||
<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
|
||||
|
||||
### 方法
|
||||
|
||||
#### Dialog.alert(options)
|
||||
|
||||
消息提示时使用该方法。
|
||||
|
||||
#### Dialog.confirm(options)
|
||||
|
||||
消息确认时使用该方法。
|
||||
|
||||
### Options
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | 标题 | `string` | | |
|
||||
| message | 内容 | `string` | | |
|
||||
| confirmButtonText | 确认按钮的文案 | `string` | `确认` | |
|
||||
| cancelButtonText | 取消按钮的文案 | `string` | `取消` | |
|
||||
@@ -0,0 +1,147 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b field {
|
||||
.van-field-wrapper {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
username: 'zhangmin'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Field 输入框
|
||||
|
||||
表单中`input`或`textarea`的输入框。
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Field`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Field`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Field } from 'vant';
|
||||
import 'vant/lib/vant-css/field.css';
|
||||
|
||||
Vue.component(Field.name, Field);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Field`组件，这样只能在你注册的组件中使用`Field`：
|
||||
|
||||
```js
|
||||
import { Field } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-field': Field
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
根据`type`属性显示不同的输入框。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 无label的输入框
|
||||
|
||||
不传入`label`属性即可。
|
||||
|
||||
:::demo 无label的输入框
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field type="text" placeholder="请输入用户名"></van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 带border的输入框
|
||||
|
||||
传入一个`border`属性。
|
||||
|
||||
:::demo 带border的输入框
|
||||
```html
|
||||
<div class="van-field-wrapper">
|
||||
<van-field type="text" placeholder="请输入用户名" border></van-field>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 禁用的输入框
|
||||
|
||||
传入`disabled`属性即可。
|
||||
|
||||
:::demo 禁用的输入框
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field label="用户名：" type="text" placeholder="请输入用户名" v-model="username" disabled></van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 错误的输入框
|
||||
|
||||
传入`error`属性即可。
|
||||
|
||||
:::demo 错误的输入框
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field label="用户名：" type="text" placeholder="请输入用户名" error></van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
#### Autosize的输入框(仅支持textarea)
|
||||
|
||||
传入`autosize`属性, 且将`rows`设为1。
|
||||
|
||||
:::demo 错误的输入框
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field label="留言：" type="textarea" placeholder="请输入留言" rows="1" autosize></van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 输入框类型 | `string` | `text` | `text`, `number`, `email`, `url`, `tel`, `date`, `datetime`, `password`, `textarea` |
|
||||
| placeholder | 输入框placeholder | `string` | | |
|
||||
| value | 输入框的值 | `string` | | |
|
||||
| label | 输入框标签 | `string` | | |
|
||||
| disabled | 是否禁用输入框 | `boolean` | `false` | |
|
||||
| error | 输入框是否有错误 | `boolean` | `false` | |
|
||||
| readonly | 输入框是否只读 | `boolean` | `false` | |
|
||||
| maxlength | 输入框maxlength | `string`, `number` | | |
|
||||
| rows | textarea rows | `string`, `number` | | |
|
||||
| cols | textarea cols | `string`, `number` | | |
|
||||
| autosize | 自动调整高度(仅支持textarea) | `boolean` | `false` | `true`, `false` |
|
||||
|
||||
@@ -0,0 +1,200 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b icon {
|
||||
.van-col {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
font-size: 45px;
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Icon 图标
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Icon`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Icon`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Icon } from 'vant';
|
||||
import 'vant/lib/vant-css/icon.css';
|
||||
|
||||
Vue.component(Icon.name, Icon);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Icon`组件，这样只能在你注册的组件中使用`Icon`：
|
||||
|
||||
```js
|
||||
import { Icon } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-icon': Icon
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
设置`name`属性为对应的图标名称即可，以下目前有的所有图标：
|
||||
|
||||
:::demo 所有Icon
|
||||
```html
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="qr-invalid"></van-icon>
|
||||
<span>qr-invalid</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="qr"></van-icon>
|
||||
<span>qr</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="exchange"></van-icon>
|
||||
<span>exchange</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="close"></van-icon>
|
||||
<span>close</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="location"></van-icon>
|
||||
<span>location</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="upgrade"></van-icon>
|
||||
<span>upgrade</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="check"></van-icon>
|
||||
<span>check</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="checked"></van-icon>
|
||||
<span>checked</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="like-o"></van-icon>
|
||||
<span>like-o</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="like" style="color: red;"></van-icon>
|
||||
<span>like</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="chat"></van-icon>
|
||||
<span>chat</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="shop"></van-icon>
|
||||
<span>shop</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="photograph"></van-icon>
|
||||
<span>photograph</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="add"></van-icon>
|
||||
<span>add</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="add2"></van-icon>
|
||||
<span>add2</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="photo"></van-icon>
|
||||
<span>photo</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="logistics"></van-icon>
|
||||
<span>logistics</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="edit"></van-icon>
|
||||
<span>edit</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="passed"></van-icon>
|
||||
<span>passed</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="cart"></van-icon>
|
||||
<span>cart</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="arrow"></van-icon>
|
||||
<span>arrow</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="gift"></van-icon>
|
||||
<span>gift</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="search"></van-icon>
|
||||
<span>search</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="clear"></van-icon>
|
||||
<span>clear</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="success"></van-icon>
|
||||
<span>success</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="fail"></van-icon>
|
||||
<span>fail</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="contact"></van-icon>
|
||||
<span>contact</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="wechat"></van-icon>
|
||||
<span>wechat</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="alipay"></van-icon>
|
||||
<span>alipay</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| name | icon名称 | `string` | `''` | |
|
||||
@@ -0,0 +1,74 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b image-preview {
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<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/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'
|
||||
]);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## ImagePreview 图片预览
|
||||
|
||||
### 使用指南
|
||||
|
||||
`ImagePreview`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。
|
||||
|
||||
```js
|
||||
import { ImagePreview } from 'vant';
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-button @click="handleImagePreview">预览图片</van-button>
|
||||
|
||||
<script>
|
||||
import { ImagePreview } from 'src/index';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
handleImagePreview() {
|
||||
ImagePreview([
|
||||
'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>
|
||||
```
|
||||
:::
|
||||
|
||||
点击以下按钮查看手机端效果：
|
||||
|
||||
<van-button @click="mobileShow = true">点击查看手机端效果</van-button>
|
||||
<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
|
||||
|
||||
### 方法参数
|
||||
|
||||
| 参数名 | 说明 | 类型 |
|
||||
|-----------|-----------|-----------|
|
||||
| imageUrls | 需要预览的图片 | `Array` |
|
||||
@@ -0,0 +1,7 @@
|
||||
## 安装
|
||||
|
||||
### ynpm安装
|
||||
|
||||
```shell
|
||||
npm i vant -S
|
||||
```
|
||||
@@ -0,0 +1,134 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b layout {
|
||||
.van-row {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.van-col {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gray {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
background: #666;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.white {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
## Layout 布局
|
||||
|
||||
主要提供了`van-row`和`van-col`两个组件来进行行列布局。
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Row`和`Col`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Row`和`Col`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
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);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Row`和`Col`组件，这样只能在你注册的组件中使用`Row`和`Col`：
|
||||
|
||||
```js
|
||||
import { Row, Col } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-row': Row,
|
||||
'van-col': Col
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 常规用法
|
||||
|
||||
Layout组件提供了`24列栅格`，通过在`van-col`上添加`span`属性设置列所占的宽度百分比`(span / 24)`；此外，添加`offset`属性可以设置列的偏移宽度，计算方式与span相同。
|
||||
|
||||
:::demo 常规用法
|
||||
```html
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="white">span: 8</div>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="4">
|
||||
<div class="gray">span: 4</div>
|
||||
</van-col>
|
||||
<van-col span="10" offset="4">
|
||||
<div class="gray">offset: 4, span: 10</div>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col offset="12" span="12">
|
||||
<div class="gray">offset: 12, span: 12</div>
|
||||
</van-col>
|
||||
</van-row>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 在列元素之间增加间距
|
||||
|
||||
列元素之间默认间距为0，如果希望在列元素增加相同的间距，可以在`van-row`上添加`gutter`属性来设置列元素之间的间距。
|
||||
|
||||
:::demo 在列元素之间增加间距
|
||||
```html
|
||||
<van-row gutter="10">
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</van-col>
|
||||
</van-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
#### Row
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| gutter | 列元素之间的间距（单位为px） | `String | Number` | - | |
|
||||
|
||||
#### Column
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| span | 列元素宽度 | `String | Number` | - | |
|
||||
| offset | 列元素偏移宽度 | `String | Number` | - | |
|
||||
@@ -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 'vant';
|
||||
|
||||
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` | |
|
||||
@@ -0,0 +1,89 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b loading {
|
||||
.van-loading {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.circle-loading {
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.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 加载
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Loading`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Loading`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Loading } from 'vant';
|
||||
import 'vant/lib/vant-css/loading.css';
|
||||
|
||||
Vue.component(Loading.name, Loading);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Loading`组件，这样只能在你注册的组件中使用`Loading`：
|
||||
|
||||
```js
|
||||
import { Loading } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-loading': Loading
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 渐变深色spinner
|
||||
|
||||
:::demo 渐变深色spinner
|
||||
```html
|
||||
<van-loading class="some-customized-class"></van-loading>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 渐变浅色spinner
|
||||
|
||||
:::demo 渐变浅色spinner
|
||||
```html
|
||||
<div class="demo-loading__example demo-loading__example--with-bg">
|
||||
<van-loading class="some-customized-class" :color="'white'"></van-loading>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 单色spinner
|
||||
|
||||
:::demo 单色spinner
|
||||
```html
|
||||
<van-loading class="circle-loading" :type="'circle'" :color="'white'"></van-loading>
|
||||
<van-loading class="circle-loading" :type="'circle'" :color="'black'"></van-loading>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| color | `loading`颜色 | `string` | `black` | `black`, `white` |
|
||||
| type | `loading`类型 | `string` | `gradient-circle` | `gradient-circle`, `circle` |
|
||||
@@ -0,0 +1,130 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b panel {
|
||||
.van-panel-sum {
|
||||
background: #fff;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
line-height: 30px;
|
||||
padding-right: 15px;
|
||||
|
||||
span {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.van-panel-buttons {
|
||||
text-align: right;
|
||||
|
||||
.van-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Panel 面板
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Panel`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Panel`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Panel } from 'vant';
|
||||
import 'vant/lib/vant-css/panel.css';
|
||||
|
||||
Vue.component(Panel.name, Panel);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Panel`组件，这样只能在你注册的组件中使用`Panel`：
|
||||
|
||||
```js
|
||||
import { Panel } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-panel': Panel
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
面板只是一个容器，里面可以放入自定义的内容。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-panel title="标题" desc="标题描述" status="状态">
|
||||
<div class="panel-content">
|
||||
panel内容
|
||||
</div>
|
||||
</van-panel>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 高级用法
|
||||
|
||||
使用`slot`自定义内容。比如在自定义内容中放入一个`van-card`。
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<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="van-card__row" slot="title">
|
||||
<h4 class="van-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="van-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
<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="van-card__footer" slot="footer">
|
||||
<van-button size="mini">按钮一</van-button>
|
||||
<van-button size="mini">按钮二</van-button>
|
||||
</div>
|
||||
</van-card>
|
||||
<div class="van-panel-sum">
|
||||
合计：<span>¥ 1999.90</span>
|
||||
</div>
|
||||
<div class="van-panel-buttons" slot="footer">
|
||||
<van-button size="small">按钮一</van-button>
|
||||
<van-button size="small" type="danger">按钮二</van-button>
|
||||
</div>
|
||||
</van-panel>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | 标题 | `string` | | |
|
||||
| desc | 描述 | `string` | | |
|
||||
| status | 状态 | `string` | | |
|
||||
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| - | 自定义内容 |
|
||||
| header | 自定义header |
|
||||
| footer | 自定义footer |
|
||||
@@ -0,0 +1,186 @@
|
||||
<script>
|
||||
const citys = {
|
||||
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
|
||||
'福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
|
||||
'湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerColumns: [
|
||||
{
|
||||
values: Object.keys(citys),
|
||||
className: 'column1'
|
||||
},
|
||||
{
|
||||
values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
|
||||
className: 'column2'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handlePickerChange(picker, values) {
|
||||
picker.setColumnValues(1, citys[values[0]]);
|
||||
},
|
||||
handlePickerCancel() {
|
||||
alert('picker cancel');
|
||||
},
|
||||
handlePickerConfirm() {
|
||||
alert('picker confirm');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Picker 选择器
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Picker`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Picker`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Picker } from 'vant';
|
||||
import 'vant/lib/vant-css/picker.css';
|
||||
|
||||
Vue.component(Picker.name, Picker);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Picker`组件，这样只能在你注册的组件中使用`Picker`：
|
||||
|
||||
```js
|
||||
import { Picker } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-picker': Picker
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-picker :columns="pickerColumns" @change="handlePickerChange"></van-picker>
|
||||
|
||||
<script>
|
||||
const citys = {
|
||||
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
|
||||
'福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
|
||||
'湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerColumns: [
|
||||
{
|
||||
values: Object.keys(citys),
|
||||
className: 'column1'
|
||||
},
|
||||
{
|
||||
values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
|
||||
className: 'column2'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handlePickerChange(picker, values) {
|
||||
picker.setColumnValues(1, citys[values[0]]);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 带toolbar的Picker
|
||||
|
||||
:::demo 带toolbar的Picker
|
||||
```html
|
||||
<van-picker :columns="pickerColumns" show-toolbar @change="handlePickerChange" @cancel="handlePickerCancel" @confirm="handlePickerConfirm"></van-picker>
|
||||
|
||||
<script>
|
||||
const citys = {
|
||||
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
|
||||
'福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
|
||||
'湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerColumns: [
|
||||
{
|
||||
values: Object.keys(citys),
|
||||
className: 'column1'
|
||||
},
|
||||
{
|
||||
values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
|
||||
className: 'column2'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handlePickerChange(picker, values) {
|
||||
picker.setColumnValues(1, citys[values[0]]);
|
||||
},
|
||||
handlePickerCancel() {
|
||||
alert('picker cancel');
|
||||
},
|
||||
handlePickerConfirm() {
|
||||
alert('picker confirm');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| visibileColumnCount | 每一列可见备选元素的个数 | `number` | `5` | |
|
||||
| itemHeight | 选中元素区高度 | `number` | `44` | |
|
||||
| columns | 对象数组，配置每一列显示的数据 | `Array` | | |
|
||||
| showToolbar | 是否在组件顶部显示一个toolbar | `Boolean` | `true` | |
|
||||
|
||||
### columns
|
||||
|
||||
`API`中的`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
|
||||
|
||||
| key | 说明 |
|
||||
|-----------|-----------|
|
||||
| values | 列中对应的备选值 |
|
||||
| defaultIndex | 初始选中值的索引，默认为0 |
|
||||
| className | 为对应列添加特殊的`class` |
|
||||
|
||||
### change事件
|
||||
|
||||
在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作：
|
||||
|
||||
| 函数 | 说明 |
|
||||
|-----------|-----------|
|
||||
| getColumnValue(index) | 获取对应列中选中的值 |
|
||||
| setColumnValue(index, value) | 设置对应列中选中的值 |
|
||||
| getColumnValues(index) | 获取对应列中所有的备选值 |
|
||||
| setColumnValues(index, values) | 设置对应列中所有的备选值 |
|
||||
| getValues() | 获取所有列中被选中的值，返回一个数组 |
|
||||
| setValues(values) | `values`为一个数组，设置所有列中被选中的值 |
|
||||
@@ -0,0 +1,204 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b popup {
|
||||
.van-button {
|
||||
margin: 10px 15px;
|
||||
}
|
||||
|
||||
.van-popup-1 {
|
||||
width: 60%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.van-popup-2 {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.van-popup-3 {
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
background-color: rgba(0, 0, 0, 0.701961);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.van-popup-4,
|
||||
.van-popup-5 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import MobileComputed from 'components/mobile-computed';
|
||||
import Dialog from 'packages/dialog';
|
||||
|
||||
export default {
|
||||
mixins: [MobileComputed],
|
||||
|
||||
data() {
|
||||
return {
|
||||
popupShow1: false,
|
||||
popupShow2: false,
|
||||
popupShow3: false,
|
||||
popupShow4: false,
|
||||
popupShow5: false
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
popupShow3(val) {
|
||||
if (val) {
|
||||
setTimeout(() => {
|
||||
this.popupShow3 = false;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
showDialog() {
|
||||
Dialog.confirm({
|
||||
title: 'confirm标题',
|
||||
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
|
||||
}).then((action) => {
|
||||
console.log(action);
|
||||
}, (error) => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Popup 弹出菜单
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Popup`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Popup`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Popup } from 'vant';
|
||||
import 'vant/lib/vant-css/popup.css';
|
||||
|
||||
Vue.component(Popup.name, Popup);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Popup`组件，这样只能在你注册的组件中使用`Popup`：
|
||||
|
||||
```js
|
||||
import { Popup } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-popup': Popup
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
`popup`默认情况下是从中间弹出。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-button @click="popupShow1 = true">从中间弹出popup</van-button>
|
||||
<van-popup v-model="popupShow1" class="van-popup-1" :lock-on-scroll="true">
|
||||
从中间弹出popup
|
||||
</van-popup>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
popupShow1: false
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 从不同位置弹出菜单
|
||||
|
||||
可以设置`position`属性，`popup`即能从不同位置弹出，`position`的可选值有`top`，`bottom`，`right`，`left`。
|
||||
|
||||
:::demo 从不同位置弹出菜单
|
||||
```html
|
||||
<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>
|
||||
|
||||
<van-button @click="popupShow3 = true">从上方弹出popup</van-button>
|
||||
<van-popup v-model="popupShow3" position="top" class="van-popup-3" :overlay="false">
|
||||
更新成功
|
||||
</van-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>
|
||||
|
||||
|
||||
<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 {
|
||||
data() {
|
||||
return {
|
||||
popupShow1: false,
|
||||
popupShow2: false,
|
||||
popupShow3: false,
|
||||
popupShow4: false
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
popupShow2(val) {
|
||||
if (val) {
|
||||
setTimeout(() => {
|
||||
this.popupShow2 = false;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
点击以下按钮查看手机端效果：
|
||||
|
||||
<van-button @click="mobileShow = true">点击查看手机端效果</van-button>
|
||||
<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| 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` | |
|
||||
@@ -0,0 +1,112 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b progress {
|
||||
@e wrapper {
|
||||
padding: 5px;
|
||||
margin: 20px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
## Progress 进度条
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Progress`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Progress`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Progress } from 'vant';
|
||||
import 'vant/lib/vant-css/progress.css';
|
||||
|
||||
Vue.component(Progress.name, Progress);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Progress`组件，这样只能在你注册的组件中使用`Progress`：
|
||||
|
||||
```js
|
||||
import { Progress } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-progress': Progress
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
默认情况进度条为蓝色，使用`percentage`属性来设置当前进度。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="demo-progress__wrapper">
|
||||
<van-progress class="demo-progress__demo1" :percentage="0"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<van-progress class="demo-progress__demo2" :percentage="46"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<van-progress class="demo-progress__demo1" :percentage="100"></van-progress>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
#### Inactive
|
||||
|
||||
是否置灰进度条，一般用于进度条被取消时。
|
||||
|
||||
:::demo Inactive
|
||||
```html
|
||||
<div class="demo-progress__wrapper">
|
||||
<van-progress class="demo-progress__demo1" :inactive="true" :percentage="0"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<van-progress class="demo-progress__demo2" :inactive="true" :percentage="46"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<van-progress class="demo-progress__demo1" :inactive="true" :percentage="100"></van-progress>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
#### 自定义颜色和文字
|
||||
|
||||
可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
|
||||
|
||||
:::demo 自定义颜色和文字
|
||||
```html
|
||||
<div class="demo-progress__wrapper">
|
||||
<van-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<van-progress class="demo-progress__demo1" pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<van-progress class="demo-progress__demo1" pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| inactive | 是否置灰 | `boolean` | `false` | `true`, `false` |
|
||||
| percentage | 进度百分比 | `number` | `false` | `0-100` |
|
||||
| pivotText | 文字显示 | `string` | 百分比文字 | - |
|
||||
| color | 进度条颜色 | `string` | `#38f` | hexvalue |
|
||||
| textColor | 进度条文字颜色 | `string` | `#fff` | hexvalue |
|
||||
|
||||
@@ -0,0 +1,99 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b quantity {
|
||||
.van-quantity {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.curr-quantity {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
quantity1: 1,
|
||||
quantity2: null,
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Quantity 数量选择
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Quantity`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Quantity`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Quantity } from 'vant';
|
||||
import 'vant/lib/vant-css/quantity.css';
|
||||
|
||||
Vue.component(Quantity.name, Quantity);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Quantity`组件，这样只能在你注册的组件中使用`Quantity`：
|
||||
|
||||
```js
|
||||
import { Quantity } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-quantity': Quantity
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-quantity v-model="quantity1"></van-quantity>
|
||||
<p class="curr-quantity">当前值：{{ quantity1 }}</p>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 禁用Quantity
|
||||
|
||||
设置`disabled`属性，此时`quantity`不可改变。
|
||||
|
||||
:::demo 禁用Quantity
|
||||
```html
|
||||
<van-quantity v-model="quantity1" disabled></van-quantity>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 高级用法
|
||||
|
||||
默认是每次加减为1，可以对组件设置`step`、`min`、`max`、`defaultValue`属性。
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<van-quantity v-model="quantity2" min="5" max="40" step="2" default-value="9"></van-quantity>
|
||||
<p class="curr-quantity">当前值：{{ quantity2 }}</p>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| min | 最小值 | `string`, `number` | `1` | |
|
||||
| max | 最大值 | `string`, `number` | | |
|
||||
| step | 步数 | `string`, `number` | `1` | |
|
||||
| disabled | 是否被禁用了 | `boolean` | `false` | |
|
||||
| defaultValue | 默认值 | `string`, `number` | `1` | |
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
## 快速上手
|
||||
|
||||
### 完整引入
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue';
|
||||
import ZanUI from 'vant';
|
||||
import 'vant/lib/vant-css/index.css';
|
||||
|
||||
Vue.use(ZanUI);
|
||||
```
|
||||
|
||||
### 按需引入
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue';
|
||||
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);
|
||||
```
|
||||
@@ -0,0 +1,176 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b radio {
|
||||
.van-radios {
|
||||
padding: 0 20px;
|
||||
|
||||
.van-radio {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio1: '1',
|
||||
radio2: '2',
|
||||
radio3: '1',
|
||||
radio4: '1'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Radio 单选框
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Radio`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Radio`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Radio, RadioGroup } from 'vant';
|
||||
import 'vant/lib/vant-css/radio.css';
|
||||
|
||||
Vue.component(Radio.name, Radio);
|
||||
Vue.component(RadioGroup.name, RadioGroup);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Radio`组件，这样只能在你注册的组件中使用`Radio`：
|
||||
|
||||
```js
|
||||
import { Radio, RadioGroup } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-radio': Radio,
|
||||
'van-radio-group': RadioGroup
|
||||
}
|
||||
};
|
||||
```
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
通过`v-model`绑定值即可。当`Radio`选中时，绑定的值即为`Radio`中`name`属性设置的值。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<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>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio1: '1'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 禁用状态
|
||||
|
||||
设置`disabled`属性即可，此时`Radio`不能点击。
|
||||
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<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>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio2: '2'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
#### radio组
|
||||
|
||||
需要与`van-radio-group`一起使用，在`van-radio-group`通过`v-model`来绑定当前选中的值。例如下面的`radio3`：
|
||||
|
||||
:::demo radio组
|
||||
```html
|
||||
<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>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio3: '1'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 与Cell组件一起使用
|
||||
|
||||
此时你需要再引入`Cell`和`CellGroup`组件。
|
||||
|
||||
:::demo 与Cell组件一起使用
|
||||
```html
|
||||
<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 {
|
||||
data() {
|
||||
return {
|
||||
radio4: '1'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Radio API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | 是否禁用单选框 | `boolean` | `false` | |
|
||||
| name | 根据这个来判断radio是否选中 | `boolean` | `false` | |
|
||||
|
||||
### RadioGroup API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | 是否禁用单选框 | `boolean` | `false` | |
|
||||
|
||||
### RadioGroup Event
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|
||||
@@ -0,0 +1,109 @@
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
goSearch(value) {
|
||||
alert(value)
|
||||
},
|
||||
handleChange(value) {
|
||||
console.log(value);
|
||||
},
|
||||
handleCancel() {
|
||||
alert('cancel');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Search 搜索
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Search`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Search`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Search } from 'vant';
|
||||
import 'vant/lib/vant-css/search.css';
|
||||
|
||||
Vue.component(Search.name, Search);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Search`组件，这样只能在你注册的组件中使用`Search`：
|
||||
|
||||
```js
|
||||
import { Search } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-search': Search
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
如果你只需要在搜索时有个回调，只要监听一个`search`事件。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-search placeholder="商品名称" @search="goSearch"></van-search>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
goSearch(value) {
|
||||
alert(value)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 监听对应事件
|
||||
|
||||
除了`search`事件，还有`change`和`cancel`事件，`change`事件在`input`输入框每次`change`时触发，适用于实时搜索等，`cancel`在取消按钮点击时触发。
|
||||
|
||||
:::demo 监听对应事件
|
||||
```html
|
||||
<van-search placeholder="商品名称" @search="goSearch" @change="handleChange" @cancel="handleCancel"></van-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`输入框的值 |
|
||||
@@ -0,0 +1,130 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b steps {
|
||||
.steps-success {
|
||||
color: #06bf04;
|
||||
}
|
||||
|
||||
.van-button {
|
||||
margin: 15px 0 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
nextStep() {
|
||||
if (++this.active > 3) this.active = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## Steps 步骤条
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Steps`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Steps`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Steps, Step } from 'vant';
|
||||
import 'vant/lib/vant-css/steps.css';
|
||||
|
||||
Vue.component(Steps.name, Steps);
|
||||
Vue.component(Step.name, Step);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Steps`组件，这样只能在你注册的组件中使用`Steps`：
|
||||
|
||||
```js
|
||||
import { Steps, Step } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-steps': Steps,
|
||||
'van-step': Step
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<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>
|
||||
|
||||
<van-button @click="nextStep">下一步</van-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
nextStep() {
|
||||
if (++this.active > 3) this.active = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 只显示步骤条
|
||||
|
||||
当你不设置`title`或`description`属性时，就会🈯️显示步骤条，而没有步骤的详细信息。
|
||||
|
||||
:::demo 只显示步骤条
|
||||
```html
|
||||
<van-steps :active="active">
|
||||
<van-step>买家下单</van-step>
|
||||
<van-step>商家接单</van-step>
|
||||
<van-step>买家提货</van-step>
|
||||
<van-step>交易完成</van-step>
|
||||
</van-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### Steps API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| active | 当前激活的步骤，从0开始 | `number` | | |
|
||||
| icon | 当前步骤的icon | `string` | | |
|
||||
| iconClass | 当前步骤栏为icon添加的类 | `string` | | |
|
||||
| title | 当前步骤从标题 | `string` | | |
|
||||
| description | 当前步骤描述 | `string` | | |
|
||||
|
||||
### Steps Slot
|
||||
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| icon | 自定义icon区域 |
|
||||
| message-extra | 状态栏添加额外的元素 |
|
||||
|
||||
@@ -0,0 +1,143 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b swipe {
|
||||
.van-swipe {
|
||||
height: 200px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<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);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Swipe 轮播
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Swipe`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Swipe`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Swipe, SwipeItem } from 'vant';
|
||||
import 'vant/lib/vant-css/swipe.css';
|
||||
|
||||
Vue.component(Swipe.name, Swipe);
|
||||
Vue.component(SwipeItem.name, SwipeItem);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Swipe`组件，这样只能在你注册的组件中使用`Swipe`：
|
||||
|
||||
```js
|
||||
import { Swipe, SwipeItem } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-swipe': Swipe,
|
||||
'van-swipe-item': SwipeItem
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-swipe>
|
||||
<van-swipe-item v-for="img in images">
|
||||
<img v-lazy="img" alt="">
|
||||
</van-swipe-item>
|
||||
</van-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
|
||||
<van-swipe auto-play @pagechange:end="handlePageEnd">
|
||||
<van-swipe-item v-for="img in autoImages">
|
||||
<img v-lazy="img" alt="">
|
||||
</van-swipe-item>
|
||||
</van-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>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| autoPlay | 是否自动轮播 | `boolean` | `false` | `true`, `false` |
|
||||
| showIndicators | 是否显示指示器 | `boolean` | `true` | `true`, `false` |
|
||||
|
||||
### 事件
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| `pagechange:end` | 每一页轮播结束后触发 | `(elem, currIndex)`：`elem`为触发页当前的DOM节点 |
|
||||
@@ -0,0 +1,192 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b switch {
|
||||
.examples,
|
||||
.example-block {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.example-block {
|
||||
.demo-sub-title {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@e text {
|
||||
margin: 20px auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Dialog from 'packages/dialog';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switchState1: true,
|
||||
switchState2: true,
|
||||
switchStateTrue: true,
|
||||
switchStateFalse: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
updateState(newState) {
|
||||
const state = newState ? '打开' : '关闭';
|
||||
Dialog.confirm({
|
||||
title: '提醒',
|
||||
message: '是否' + state + '开关？'
|
||||
}).then((action) => {
|
||||
this.switchState2 = newState;
|
||||
}, (error) => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Switch 开关
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Switch`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Switch`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Switch } from 'vant';
|
||||
import 'vant/lib/vant-css/switch.css';
|
||||
|
||||
Vue.component(Switch.name, Switch);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Switch`组件，这样只能在你注册的组件中使用`Switch`：
|
||||
|
||||
```js
|
||||
import { Switch } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-switch': Switch
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-switch class="some-customized-class" v-model="switchState1"></van-switch>
|
||||
<div class="demo-switch__text">{{ switchState1 ? ' ON' : 'OFF' }}</div>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switchState1: true
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<van-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></van-switch>
|
||||
<div class="demo-switch__text">{{ switchState2 ? ' ON' : 'OFF' }}</div>
|
||||
|
||||
|
||||
<script>
|
||||
import Dialog from 'packages/dialog';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switchState2: true
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
updateState(newState) {
|
||||
const state = newState ? '打开' : '关闭';
|
||||
Dialog.confirm({
|
||||
title: '提醒',
|
||||
message: '是否' + state + '开关？'
|
||||
}).then((action) => {
|
||||
this.switchState2 = newState;
|
||||
}, (error) => {
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
#### 禁用状态
|
||||
|
||||
设置`disabled`属性为`true`，此时开关不可点击。
|
||||
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<van-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></van-switch>
|
||||
<div class="demo-switch__text">ON, DISABLED</div>
|
||||
|
||||
<van-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></van-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 loading状态
|
||||
```html
|
||||
<van-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></van-switch>
|
||||
<div class="demo-switch__text">ON, LOADING</div>
|
||||
|
||||
<van-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></van-switch>
|
||||
<div class="demo-switch__text">OFF, LOADING</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switchStateTrue: true,
|
||||
switchStateFalse: false
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 开关状态 | `boolean` | `false` | `true`, `false` |
|
||||
| loading | loading状态 | `boolean` | `false` | `true`, `false` |
|
||||
| disabled | 禁用状态 | `boolean` | `false` | `true`, `false` |
|
||||
| onChange | 开关状态切换回调(默认则改变开关状态) | `function` | - | - |
|
||||
@@ -0,0 +1,253 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b tab {
|
||||
.van-tab__pane {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.van-tabs--card .van-tab__pane {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.custom-tabwrap .van-tab-active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .van-tabs-nav-bar {
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-pane {
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 2
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.active = 3;
|
||||
}, 1000);
|
||||
},
|
||||
methods: {
|
||||
popalert() {
|
||||
alert('haha')
|
||||
},
|
||||
|
||||
handleTabClick(index) {
|
||||
alert(index);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Tab 标签
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Tab`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Tab`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Tab, Tabs } from 'vant';
|
||||
import 'vant/lib/vant-css/tab.css';
|
||||
|
||||
Vue.component(Tab.name, Tab);
|
||||
Vue.component(Tabs.name, Tabs);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Tab`组件，这样只能在你注册的组件中使用`Tab`：
|
||||
|
||||
```js
|
||||
import { Tab, Tabs } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-tab': Tab,
|
||||
'van-tabs': Tabs
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
默认情况下是启用第一个`tab`。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<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
|
||||
|
||||
可以在`van-tabs`上设置`active`为对应`tab`的索引（从0开始，即0代表第一个）即可激活对应`tab`。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<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
|
||||
|
||||
在对应的`van-tab`上设置`disabled`属性即可，如果需要监听禁用事件，可以监听`disabled`事件。
|
||||
|
||||
:::demo 禁用tab
|
||||
```html
|
||||
<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 {
|
||||
methods: {
|
||||
popalert() {
|
||||
alert('haha')
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
#### card样式
|
||||
|
||||
`Tabs`目前有两种样式：`line`和`card`，默认为`line`样式，也就上面基础用法中的样式，你可以在`van-tabs`上设置`type`为`card`改为card样式。
|
||||
|
||||
:::demo card样式
|
||||
```html
|
||||
<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 .van-tab-active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .van-tabs-nav-bar {
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-pane {
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
#### 自定义样式
|
||||
|
||||
可以在`van-tabs`上设置对应的`class`，从而自定义某些样式。
|
||||
|
||||
:::demo 自定义样式
|
||||
```html
|
||||
<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 .van-tab-active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .van-tabs-nav-bar {
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-pane {
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
#### click事件
|
||||
|
||||
可以在`van-tabs`上绑定一个`click`事件，事件处理函数有一个参数，参数为对应`tab`在`tabs`中的索引。
|
||||
|
||||
:::demo click事件
|
||||
```html
|
||||
<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 {
|
||||
methods: {
|
||||
handleTabClick(index) {
|
||||
alert(index);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### van-tabs API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| classtype | 两种UI | `string` | `line` | `line`, `card` |
|
||||
| active | 默认激活的tab | `string`, `number` | `0` | |
|
||||
| navclass | tabs的内部nav上的自定义classname | `string` | | |
|
||||
|
||||
|
||||
### van-tab API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | tab的标题 | `string` | | |
|
||||
| disabled | 是否禁用这个tab | `boolean` | `false` | |
|
||||
|
||||
### van-tabs Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| click | 某个tab点击事件 | index：点击的`tab`的索引 |
|
||||
| disabled | 某个tab禁用时点击事件 | index：点击的`tab`的索引 |
|
||||
|
||||
@@ -0,0 +1,99 @@
|
||||
<style>
|
||||
.tags-container {
|
||||
padding: 5px 15px;
|
||||
|
||||
.van-tag + .van-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Tag 标记
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Tag`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Tag`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Tag } from 'vant';
|
||||
import 'vant/lib/vant-css/tag.css';
|
||||
|
||||
Vue.component(Tag.name, Tag);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Tag`组件，这样只能在你注册的组件中使用`Tag`：
|
||||
|
||||
```js
|
||||
import { Tag } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-tag': Tag
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
`Tag`目前有三种类型，`danger`、`success`、`primary`，它们分别显示为红色，绿色和蓝色，你也可以加上自定义的类，为它们加上其他的颜色。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="tags-container">
|
||||
<van-tag>返现</van-tag>
|
||||
<van-tag plain>返现</van-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<van-tag type="danger">返现</van-tag>
|
||||
<van-tag type="danger">四字标签</van-tag>
|
||||
<van-tag type="danger">一</van-tag>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 高级用法
|
||||
|
||||
设置`plain`为`true`时表示空心的`tag`，还可以设置`mark`为`true`，表示是否为标记。
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<div class="tags-container">
|
||||
<van-tag type="danger">返现</van-tag>
|
||||
<van-tag plain type="danger">返现</van-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<van-tag type="primary">返现</van-tag>
|
||||
<van-tag plain type="primary">返现</van-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<van-tag type="success">返现</van-tag>
|
||||
<van-tag plain type="success">返现</van-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<van-tag type="danger" mark>返现</van-tag>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| plain | 是否是空心tag | `boolean` | `false` | |
|
||||
| mark | 是否是标记 | `boolean` | `false` | |
|
||||
| type | tag类型 | `string` | `''` | `primary`, `success`, `danger` |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| - | 自定义tag显示内容 |
|
||||
@@ -0,0 +1,229 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b toast {
|
||||
.van-button {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { Toast } from 'src/index';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
showSimpleToast() {
|
||||
Toast('我是提示文案，建议不超过十五字~');
|
||||
},
|
||||
showLoadingToast() {
|
||||
Toast.loading();
|
||||
},
|
||||
showSuccessToast() {
|
||||
Toast.success('成功文案');
|
||||
},
|
||||
showFailToast() {
|
||||
Toast.fail('失败文案');
|
||||
},
|
||||
showForbidClickToast() {
|
||||
Toast({
|
||||
message: '背景不能点击',
|
||||
forbidClick: true
|
||||
})
|
||||
},
|
||||
showCustomizedToast(duration) {
|
||||
let leftSec = duration / 1000;
|
||||
let toast = Toast({
|
||||
duration: duration + 1000,
|
||||
type: 'success',
|
||||
message: leftSec.toString()
|
||||
});
|
||||
const id = window.setInterval(() => {
|
||||
if (leftSec <= 1) {
|
||||
window.clearInterval(id);
|
||||
toast.message = '跳转中...'
|
||||
return;
|
||||
}
|
||||
toast.message = (--leftSec).toString();
|
||||
}, 1000);
|
||||
},
|
||||
showToast() {
|
||||
this.toast = Toast('我是提示文案，建议不超过十五字~');
|
||||
},
|
||||
closeToast() {
|
||||
this.toast.clear();
|
||||
},
|
||||
showHtmlToast() {
|
||||
Toast({
|
||||
type: 'html',
|
||||
message: '<em>HTML<em>'
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Toast 轻提示
|
||||
|
||||
### 使用指南
|
||||
|
||||
`Toast`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。
|
||||
|
||||
```js
|
||||
import { Toast } from 'vant';
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<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';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
showSimpleToast() {
|
||||
Toast('我是提示文案，建议不超过十五字~');
|
||||
},
|
||||
showLoadingToast() {
|
||||
Toast.loading();
|
||||
},
|
||||
showSuccessToast() {
|
||||
Toast.success('成功文案');
|
||||
},
|
||||
showFailToast() {
|
||||
Toast.fail('失败文案');
|
||||
},
|
||||
showForbidClickToast() {
|
||||
Toast({
|
||||
message: '背景不能点击',
|
||||
forbidClick: true
|
||||
})
|
||||
},
|
||||
showCustomizedToast(duration) {
|
||||
let leftSec = duration / 1000;
|
||||
let toast = Toast({
|
||||
duration: duration + 1000,
|
||||
type: 'success',
|
||||
message: leftSec.toString()
|
||||
});
|
||||
const id = window.setInterval(() => {
|
||||
if (leftSec <= 1) {
|
||||
window.clearInterval(id);
|
||||
toast.message = '跳转中...'
|
||||
return;
|
||||
}
|
||||
toast.message = (--leftSec).toString();
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 手动关闭
|
||||
|
||||
:::demo 手动关闭
|
||||
```html
|
||||
<van-button @click="showToast">打开</van-button>
|
||||
<van-button @click="closeToast">关闭</van-button>
|
||||
|
||||
<script>
|
||||
import { Toast } from 'src/index';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
showToast() {
|
||||
Toast('我是提示文案，建议不超过十五字~');
|
||||
},
|
||||
closeToast() {
|
||||
Toast.clear();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
#### 传入html
|
||||
|
||||
:::demo 手动关闭
|
||||
```html
|
||||
<van-button @click="showHtmlToast">打开</van-button>
|
||||
|
||||
<script>
|
||||
import { Toast } from 'src/index';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
showHtmlToast() {
|
||||
Toast({
|
||||
type: 'html',
|
||||
message: '<em>HTML<em>'
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 基础用法
|
||||
|
||||
#### Toast(options)
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 类型 | String | 'text' | 'text', 'loading', 'success', 'fail', 'html' |
|
||||
| message | 内容 | String | '' | - |\| message | 内容 | String | '' | -
|
||||
| forbidClick | 不允许背景点击 | Boolean | false | true, false|
|
||||
| duration | 时长(ms) | Number | 3000ms | -|
|
||||
|
||||
### 快速用法
|
||||
|
||||
#### Toast(message) || Toast(message, options)
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| message | 内容 | String | '' | - |
|
||||
| forbidClick | 不允许背景点击 | Boolean | false | true, false|
|
||||
| duration | 时长(ms) | Number | 3000ms | -|
|
||||
|
||||
#### Toast.loading() || Toast.loading(message, options)
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| forbidClick | 不允许背景点击 | Boolean | false | true, false|
|
||||
| duration | 时长(ms) | Number | 3000ms | -|
|
||||
|
||||
#### Toast.success(message) || Toast.success(message, options)
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 类型 | String | 'text' | 'text', 'loading', 'success', 'failure' |
|
||||
| forbidClick | 不允许背景点击 | Boolean | false | true, false|
|
||||
| duration | 时长(ms) | Number | 3000ms | -|
|
||||
|
||||
#### Toast.fail(message) || Toast.fail(message, options)
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 类型 | String | 'text' | 'text', 'loading', 'success', 'failure' |
|
||||
| forbidClick | 不允许背景点击 | Boolean | false | true, false|
|
||||
| duration | 时长(ms) | Number | 3000ms | -|
|
||||
|
||||
#### Toast.clear()
|
||||
|
||||
关闭toast。
|
||||
@@ -0,0 +1,76 @@
|
||||
<style>
|
||||
.uploader-container {
|
||||
padding: 5px 15px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
logContent(file) {
|
||||
console.log(file)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Uploader 图片上传
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Uploader`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Uploader`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Uploader } from 'vant';
|
||||
import 'vant/lib/vant-css/uploader.css';
|
||||
|
||||
Vue.component(Uploader.name, Uploader);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Uploader`组件，这样只能在你注册的组件中使用`Uploader`：
|
||||
|
||||
```js
|
||||
import { Uploader } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-uploader': Uploader
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="uploader-container">
|
||||
<van-uploader :after-read="logContent">
|
||||
<van-icon name="photograph"></van-icon>
|
||||
</van-uploader>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| result-type | 读取文件的方式，以base64的方式读取；以文本的方式读取 | `string` | `dataUrl` | `dataUrl`, `text` |
|
||||
| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | `boolean` | `false` | |
|
||||
| before-read | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件。 | `Function` | | |
|
||||
| after-read | 文件读完之后回调此函数，参数为{file:'选择的文件',content:'读的内容'} | `Function` | | |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| - | 自定义上传显示图标 |
|
||||
@@ -0,0 +1,113 @@
|
||||
## Waterfall 瀑布流
|
||||
|
||||
### 使用指南
|
||||
|
||||
#### 全局注册
|
||||
|
||||
`Waterfall`引入后就自动全局安装。如果需要，可以再次手动安装：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Waterfall } from 'vant';
|
||||
|
||||
Waterfall.install(Vue);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用`Waterfall`，你可以在对应组件中注册`Waterfall`指令，这样只能在你注册的组件中使用`Waterfall`：
|
||||
|
||||
```js
|
||||
import { Waterfall } from 'vant';
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
WaterfallLower: Waterfall('lower'),
|
||||
WaterfallUpper: Waterfall('upper')
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [1, 2, 3, 4, 5],
|
||||
loading: false,
|
||||
finished: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
loadMore() {
|
||||
if (this.list.length >= 200) {
|
||||
this.finished = true;
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
let lastNumber = this.list[this.list.length - 1];
|
||||
for (let i = 0; i < 5; i ++) {
|
||||
lastNumber += 1;
|
||||
this.list.push(lastNumber);
|
||||
}
|
||||
this.loading = false;
|
||||
}, 2500);
|
||||
},
|
||||
loadMoreUpper() {
|
||||
if (this.list[0] < 0) return;
|
||||
this.list.unshift(-1);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isWaterfallDisabled: function() {
|
||||
return this.loading || this.finished;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.waterfall {
|
||||
max-height: 300px;
|
||||
overflow: scroll;
|
||||
}
|
||||
</style>
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="waterfall">
|
||||
<div
|
||||
v-waterfall-lower="loadMore"
|
||||
v-waterfall-upper="loadMoreUpper"
|
||||
waterfall-disabled="isWaterfallDisabled"
|
||||
waterfall-offset="400"
|
||||
>
|
||||
<div
|
||||
class="waterfall-item"
|
||||
v-for="item in list"
|
||||
style="text-align: center;"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
<div v-if="loading" style="text-align: center;">
|
||||
loading
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-waterfall-lower | 滚动到底部, 触发执行的函数 | `function` | - | |
|
||||
| v-waterfall-upper | 滚动到顶部, 触发执行的函数 | `function` | - | |
|
||||
| waterfall-disabled | 在vue对象中表示是否禁止瀑布流触发的key值 | `string` | - | |
|
||||
| waterfall-offset | 触发瀑布流加载的阈值 | `number` | `300` | |
|
||||
|
||||
Reference in New Issue
Block a user