Docs: add English language support (#170)
* feat: support lang entry build * feat: vant support lang switch * move lang iframe-router to utils & fix router link bug * add en-US config && add some translation * chang async. to async_ (support superman cdn) * add layout translation * change nav style * upgrade zan-doc * fix: doc config * upgrade zan-doc && remove useless code * fix changelog generate path
This commit is contained in:
Yao
GitHub
@@ -0,0 +1,181 @@
|
||||
<style>
|
||||
.demo-actionsheet {
|
||||
.actionsheet-wx {
|
||||
color: #06BF04;
|
||||
}
|
||||
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.title-actionsheet p {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false,
|
||||
actions1: [
|
||||
{
|
||||
name: '微信安全支付',
|
||||
className: 'actionsheet-wx',
|
||||
callback: this.handleActionClick
|
||||
},
|
||||
{
|
||||
name: '支付宝支付',
|
||||
loading: true
|
||||
},
|
||||
{
|
||||
name: '信用卡支付'
|
||||
},
|
||||
{
|
||||
name: '其他支付方式'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleActionClick(item) {
|
||||
console.log(item);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## Actionsheet 行动按钮
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Actionsheet } from 'vant';
|
||||
|
||||
Vue.component(Actionsheet.name, Actionsheet);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
需要传入一个`actions`的属性，该属性为一个数组，数组的每一项是一个对象，可以根据下面的[action对象](#actions)设置你想要的信息。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-button @click="show1 = true">弹出actionsheet</van-button>
|
||||
<van-actionsheet v-model="show1" :actions="actions1">
|
||||
</van-actionsheet>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show1: false,
|
||||
actions1: [
|
||||
{
|
||||
name: '微信安全支付',
|
||||
className: 'actionsheet-wx',
|
||||
callback: this.handleActionClick
|
||||
},
|
||||
{
|
||||
name: '支付宝支付',
|
||||
loading: true
|
||||
},
|
||||
{
|
||||
name: '信用卡支付'
|
||||
},
|
||||
{
|
||||
name: '其他支付方式'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleActionClick(item) {
|
||||
console.log(item);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
#### 带取消按钮的 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>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show2: false,
|
||||
actions1: [
|
||||
{
|
||||
name: '微信安全支付',
|
||||
className: 'actionsheet-wx',
|
||||
callback: this.handleActionClick
|
||||
},
|
||||
{
|
||||
name: '支付宝支付',
|
||||
loading: true
|
||||
},
|
||||
{
|
||||
name: '信用卡支付'
|
||||
},
|
||||
{
|
||||
name: '其他支付方式'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
#### 带标题的 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>
|
||||
```
|
||||
:::
|
||||
|
||||
### 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,145 @@
|
||||
<script>
|
||||
import { Toast } from 'packages';
|
||||
import areaList from '../../mock/area.json';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
areaList,
|
||||
searchResult: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSave() {
|
||||
this.test = {
|
||||
user_name: 'b'
|
||||
};
|
||||
Toast('save');
|
||||
},
|
||||
onDelete() {
|
||||
Toast('delete');
|
||||
},
|
||||
onChangeDetail(val) {
|
||||
if (val) {
|
||||
this.searchResult = [{
|
||||
name: '黄龙万科中心',
|
||||
address: '杭州市西湖区'
|
||||
}, {
|
||||
name: '黄龙万科中心H座'
|
||||
}, {
|
||||
name: '黄龙万科中心H座',
|
||||
address: '杭州市西湖区'
|
||||
}];
|
||||
} else {
|
||||
this.searchResult = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## AddressEdit 地址编辑
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { AddressEdit } from 'vant';
|
||||
|
||||
Vue.component(AddressEdit.name, AddressEdit);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-address-edit
|
||||
:area-list="areaList"
|
||||
:show-postal="true"
|
||||
:show-set-default="true"
|
||||
:show-search-result="true"
|
||||
:search-result="searchResult"
|
||||
@save="onSave"
|
||||
@delete="onDelete"
|
||||
@change-detail="onChangeDetail"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
areaList,
|
||||
searchResult: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSave() {
|
||||
Toast('save');
|
||||
},
|
||||
onDelete() {
|
||||
Toast('delete');
|
||||
},
|
||||
onChangeDetail(val) {
|
||||
if (val) {
|
||||
this.searchResult = [{
|
||||
name: '黄龙万科中心',
|
||||
address: '杭州市西湖区'
|
||||
}];
|
||||
} else {
|
||||
this.searchResult = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| areaList | 地区列表 | `Object` | - | - |
|
||||
| addressInfo | 收货人信息 | `Object` | `{}` | - |
|
||||
| searchResult | 详细地址搜索结果 | `Array` | `[]` | - |
|
||||
| addressText | "地址"文案前缀 | `String` | `收货` | - |
|
||||
| showPostal | 是否显示邮政编码 | `Boolean` | `false` | - |
|
||||
| showSetDefault | 是否显示默认地址栏 | `Boolean` | `false` | - |
|
||||
| showSearchResult | 是否显示搜索结果 | `Boolean` | `false` | - |
|
||||
| isSaving | 是否显示保存按钮加载动画 | `Boolean` | `false` | - |
|
||||
| isDeleting | 是否显示删除按钮加载动画 | `Boolean` | `false` | - |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| save | 点击保存按钮时触发 | content：表单内容 |
|
||||
| delete | 点击删除按钮时触发 | content：表单内容 |
|
||||
| change-detail | 修改详细地址时触发 | value: 详细地址内容 |
|
||||
|
||||
### 数据格式
|
||||
|
||||
#### addressInfo 数据格式
|
||||
| key | 说明 | 类型 |
|
||||
|-----------|-----------|-----------|
|
||||
| id | 每条地址的唯一标识 | `String | Number` |
|
||||
| name | 收货人姓名 | `String` |
|
||||
| tel | 收货人手机号 | `String` |
|
||||
| province | 省份 | `String` |
|
||||
| city | 城市 | `String` |
|
||||
| county | 区县 | `String` |
|
||||
| address_detail | 详细地址 | `String` |
|
||||
| area_code | 地区编码，通过省市区选择获取 | `String` |
|
||||
| postal_code | 邮政编码 | `String` |
|
||||
| is_default | 是否为默认地址 | `String` |
|
||||
|
||||
#### searchResult 数据格式
|
||||
| key | 说明 | 类型 |
|
||||
|-----------|-----------|-----------|
|
||||
| name | 地名 | `String` |
|
||||
| address | 详细地址 | `String` |
|
||||
|
||||
#### 省市县列表数据格式
|
||||
请参考 [Area](/zanui/vue/component/area) 组件。
|
||||
@@ -0,0 +1,122 @@
|
||||
<script>
|
||||
import { Toast } from 'packages';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chosenAddressId: '1',
|
||||
list: [
|
||||
{
|
||||
id: '1',
|
||||
name: '张三',
|
||||
tel: '13000000000',
|
||||
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '李四',
|
||||
tel: '1310000000',
|
||||
address: '浙江省杭州市拱墅区莫干山路 50 号'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '王五',
|
||||
tel: '1320000000',
|
||||
address: '浙江省杭州市滨江区江南大道 15 号'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onAdd() {
|
||||
Toast('新增收货地址');
|
||||
},
|
||||
onEdit(item, index) {
|
||||
Toast('编辑收货地址:' + index);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## AddressList 地址列表
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { AddressList } from 'vant';
|
||||
|
||||
Vue.component(AddressList.name, AddressList);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-address-list
|
||||
v-model="chosenAddressId"
|
||||
:list="list"
|
||||
@add="onAdd"
|
||||
@edit="onEdit"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chosenAddressId: '1',
|
||||
list: [
|
||||
{
|
||||
id: '1',
|
||||
name: '张三',
|
||||
tel: '13000000000',
|
||||
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '李四',
|
||||
tel: '1310000000',
|
||||
address: '浙江省杭州市拱墅区莫干山路 50 号'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onAdd() {
|
||||
Toast('新增收货地址');
|
||||
},
|
||||
onEdit(item, index) {
|
||||
Toast('编辑收货地址:' + index);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 当前选中地址的 id | String | - | - |
|
||||
| list | 地址列表 | Array | `[]` | - |
|
||||
| addButtonText | 底部按钮文字 | String | `新增收货地址` | - |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| add | 点击新增按钮时触发 | - |
|
||||
| edit | 点击编辑按钮时触发 | item: 当前地址对象，index: 索引 |
|
||||
| select | 切换选中的地址时触发 | item: 当前地址对象，index: 索引 |
|
||||
|
||||
### 数据格式
|
||||
#### 地址列表字段说明
|
||||
| key | 说明 | 类型 |
|
||||
|-----------|-----------|-----------|
|
||||
| id | 每条地址的唯一标识 | `String | Number` |
|
||||
| name | 收货人姓名 | `String` |
|
||||
| tel | 收货人手机号 | `String` |
|
||||
| address | 收货地址 | `String` |
|
||||
@@ -0,0 +1,133 @@
|
||||
<script>
|
||||
import AreaList from '../../mock/area.json';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
areaList: AreaList
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Area 省市县选择组件
|
||||
|
||||
### 使用指南
|
||||
|
||||
``` javascript
|
||||
import { Area } from 'vant';
|
||||
|
||||
Vue.component(Area.name, Area);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
要初始化一个`Area`组件，你需要传入一个`areaList`属性，`areaList`数据格式具体可看下面数据格式章节。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-area :area-list="areaList"></van-area>
|
||||
|
||||
<script>
|
||||
import AreaList from '../../mock/area.json';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
areaList: AreaList
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 选中省市县
|
||||
|
||||
如果想选中某个省市县，需要传入一个`value`属性，绑定对应的省市县`code`。
|
||||
|
||||
:::demo 选中省市县
|
||||
```html
|
||||
<van-area :area-list="areaList" value="110101"></van-area>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 配置显示列
|
||||
|
||||
可以通过`columnsNum`属性配置省市县显示的列数，默认情况下会显示省市县，当你设置为`2`，则只会显示省市选择。
|
||||
|
||||
:::demo 配置显示列
|
||||
```html
|
||||
<van-area :area-list="areaList" :columns-num="2"></van-area>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| value | 当前选中的省市区`code` | `String` | - | |
|
||||
| areaList | 省市县数据，必须与`province_list`、`city_list`和`county_list`为key | `Object` | | |
|
||||
| columnsNum | 省市县显示列数，3-省市县，2-省市，1-省 | `String`,`Number` | 3 | |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| confirm | 点击右上方完成按钮 | 一个数组参数，具体格式看下方数据格式章节 |
|
||||
| cancel | 点击取消按钮时 | - |
|
||||
|
||||
### 数据格式
|
||||
|
||||
#### 省市县列表数据格式
|
||||
|
||||
整体是一个Object，包含 `province_list`, `city_list`, `county_list` 三个key。
|
||||
|
||||
每项以省市区编码作为key，省市区名字作为value。编码为6位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以0补足6位。如北京编码为 `11`，以零补足6位，为 `110000`。
|
||||
|
||||
`AreaList`具体格式如下：
|
||||
```javascript
|
||||
{
|
||||
province_list: {
|
||||
110000: '北京市',
|
||||
120000: '天津市'
|
||||
},
|
||||
city_list: {
|
||||
110100: '北京市',
|
||||
110200: '县',
|
||||
120100: '天津市',
|
||||
120200: '县'
|
||||
},
|
||||
county_list: {
|
||||
110101: '东城区',
|
||||
110102: '西城区',
|
||||
110105: '朝阳区',
|
||||
110106: '丰台区'
|
||||
120101: '和平区',
|
||||
120102: '河东区',
|
||||
120103: '河西区',
|
||||
120104: '南开区',
|
||||
120105: '河北区',
|
||||
// ....
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 点击完成时返回的数据格式
|
||||
返回的数据整体为一个数组，数组内包含 `columnsNum` 个数据， 每个数据对应一列选项中被选中的数据。
|
||||
|
||||
`code` 代表被选中的地区编码， `name` 代表被选中的地区名称
|
||||
```javascript
|
||||
[{
|
||||
code: '110000',
|
||||
name: '北京市'
|
||||
}, {
|
||||
code: '110100',
|
||||
name: '北京市'
|
||||
},{
|
||||
code: '110101',
|
||||
name: '东城区'
|
||||
}]
|
||||
```
|
||||
@@ -0,0 +1,89 @@
|
||||
<style>
|
||||
.demo-badge {
|
||||
.van-badge-group {
|
||||
width: auto;
|
||||
margin: 0 15px;
|
||||
padding: 20px 0;
|
||||
background-color: #fff;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.van-badge {
|
||||
width: 85px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeKey: 0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onClick(key) {
|
||||
this.activeKey = key;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Badge 徽章
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Badge } from 'vant';
|
||||
|
||||
Vue.component(Badge.name, Badge);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
通过在`van-badge-group`上设置`active-key`属性来控制选中的`badge`
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-badge-group :active-key="activeKey">
|
||||
<van-badge title="热销榜" @click="onClick"></van-badge>
|
||||
<van-badge title="花式寿司" @click="onClick" info="8"></van-badge>
|
||||
<van-badge title="火炽寿司" @click="onClick" info="99"></van-badge>
|
||||
<van-badge title="手握寿司" @click="onClick" info="199"></van-badge>
|
||||
</van-badge-group>
|
||||
```
|
||||
|
||||
``` javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeKey: 0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onClick(key) {
|
||||
this.activeKey = key;
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### BadgeGroup API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| active-key | 选中`badge`的索引 | `String | Number` | `0` | - |
|
||||
|
||||
### Badge API
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | 内容 | `String` | `''` | - |
|
||||
| info | 提示消息 | `String` | `''` | - |
|
||||
| url | 跳转链接 | `String` | - | - |
|
||||
@@ -0,0 +1,122 @@
|
||||
<style>
|
||||
.demo-button {
|
||||
.van-button {
|
||||
user-select: none;
|
||||
|
||||
&--large,
|
||||
&--bottom-action {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
&--small,
|
||||
&--normal {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.zan-doc-demo-block {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.zan-doc-demo-block__subtitle {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Button 按钮
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Button } from 'vant';
|
||||
|
||||
Vue.component(Button.name, Button);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 按钮类型
|
||||
|
||||
支持`default`、`primary`、`danger`三种类型，默认为`default`
|
||||
|
||||
:::demo 按钮类型
|
||||
```html
|
||||
<van-button type="default">Default</van-button>
|
||||
<van-button type="primary">Primary</van-button>
|
||||
<van-button type="danger">Danger</van-button>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 按钮尺寸
|
||||
|
||||
支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
|
||||
|
||||
:::demo 按钮尺寸
|
||||
```html
|
||||
<van-button size="large">Large</van-button>
|
||||
<van-button size="normal">Normal</van-button>
|
||||
<van-button size="small">Small</van-button>
|
||||
<van-button size="mini">Mini</van-button>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 禁用状态
|
||||
|
||||
通过`disabled`属性来禁用按钮，此时按钮不可点击
|
||||
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<van-button disabled>Diabled</van-button>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 加载状态
|
||||
|
||||
:::demo 加载状态
|
||||
```html
|
||||
<van-button loading></van-button>
|
||||
<van-button loading type="primary"></van-button>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 自定义按钮标签
|
||||
|
||||
按钮标签默认为`button`，可以使用`tag`属性来修改按钮标签
|
||||
|
||||
:::demo 自定义按钮标签
|
||||
```html
|
||||
<van-button tag="a" href="https://www.youzan.com" target="_blank">
|
||||
a 标签按钮
|
||||
</van-button>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 页面底部操作按钮
|
||||
|
||||
:::demo 页面底部操作按钮
|
||||
```html
|
||||
<van-button type="primary" bottom-action>立即购买</van-button>
|
||||
|
||||
<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` | 任意`HTML`标签 |
|
||||
| nativeType | 按钮类型（原生） | `String` | `''` | - |
|
||||
| diabled | 是否禁用 | `Boolean` | `false` | - |
|
||||
| loading | 是否显示为加载状态 | `Boolean` | `false` | - |
|
||||
| block | 是否为块级元素 | `Boolean` | `false` | - |
|
||||
| bottomAction | 是否为底部行动按钮 | `Boolean` | `false` | - |
|
||||
@@ -0,0 +1,75 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageURL: '//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## Card 卡片
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Card } from 'vant';
|
||||
|
||||
Vue.component(Card.name, Card);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-card
|
||||
title="商品名称"
|
||||
desc="商品描述"
|
||||
num="2"
|
||||
price="2.00"
|
||||
:thumb="imageURL"
|
||||
/>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 高级用法
|
||||
可以通过具名`slot`添加定制内容
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<van-card
|
||||
title="商品名称"
|
||||
desc="商品描述"
|
||||
num="2"
|
||||
price="2.00"
|
||||
:thumb="imageURL"
|
||||
>
|
||||
<div slot="footer">
|
||||
<van-button size="mini">按钮一</van-button>
|
||||
<van-button size="mini">按钮二</van-button>
|
||||
</div>
|
||||
</van-card>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| thumb | 左侧图片 | `String` | - | - |
|
||||
| title | 标题 | `String` | - | - |
|
||||
| desc | 描述 | `String` | - | - |
|
||||
| num | 商品数量 | `String | Number` | - | - |
|
||||
| price | 商品价格 | `String | Number` | - | - |
|
||||
| centered | 内容是否垂直居中 | `String` | `false` | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| title | 自定义标题 |
|
||||
| desc | 自定义描述 |
|
||||
| tags | 自定义 tags |
|
||||
| thumb | 自定义 thumb |
|
||||
| footer | 自定义 footer |
|
||||
@@ -0,0 +1,57 @@
|
||||
<style>
|
||||
.van-cell-swipe__left,
|
||||
.van-cell-swipe__right {
|
||||
color: #FFFFFF;
|
||||
font-size: 16px;
|
||||
width: 65px;
|
||||
height: 44px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
}
|
||||
.van-cell-swipe__left {
|
||||
background-color: #FF4444;
|
||||
}
|
||||
.van-cell-swipe__right {
|
||||
background-color: #84c483;
|
||||
}
|
||||
</style>
|
||||
## CellSwipe 滑动单元格
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { CellSwipe } from 'vant';
|
||||
|
||||
Vue.component(CellSwipe.name, CellSwipe);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-cell-swipe :right-width="65" :left-width="65">
|
||||
<span slot="left">选择</span>
|
||||
<van-cell-group>
|
||||
<van-cell title="单元格1" value="单元格1内容"></van-cell>
|
||||
</van-cell-group>
|
||||
<span slot="right">删除</span>
|
||||
</van-cell-swipe>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| left-width | 左侧滑动区域宽度 | `Number` | `0` | - |
|
||||
| right-width | 右侧滑动区域宽度 | `Number` | `0` | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| - | 自定义显示内容 |
|
||||
| left | 左侧滑动内容 |
|
||||
| right | 右侧滑动内容 |
|
||||
@@ -0,0 +1,125 @@
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleClick() {
|
||||
console.log('cell click');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-cell {
|
||||
.van-cell-text {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.van-cell__right-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
.van-cell-text,
|
||||
.van-tag--danger {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Cell 单元格
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Cell, CellGroup } from 'vant';
|
||||
|
||||
Vue.component(Cell.name, Cell);
|
||||
Vue.component(CellGroup.name, CellGroup);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
将`van-cell-group`组件看成一个容器即可
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell title="单元格1" value="单元格1内容"></van-cell>
|
||||
<van-cell title="单元格2" value="单元格2内容" label="描述信息"></van-cell>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 只设置value
|
||||
只设置`value`时会向左对齐
|
||||
|
||||
:::demo 只设置value
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell value="单元格内容"></van-cell>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 展示图标
|
||||
通过`icon`属性在标题左侧展示图标
|
||||
:::demo 展示图标
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell title="单元格" icon="location"></van-cell>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 展示箭头
|
||||
传入`isLink`属性则会在右侧显示箭头
|
||||
|
||||
:::demo 展示箭头
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell title="单元格1" is-link></van-cell>
|
||||
<van-cell title="单元格2" is-link value="内容"></van-cell>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 高级用法
|
||||
如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell value="进入店铺" icon="home" 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" is-link></van-cell>
|
||||
<van-cell title="其他">
|
||||
<template slot="right-icon">
|
||||
<van-icon name="search" class="van-cell__right-icon"></van-icon>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| icon | 左侧图标 | `String` | - | - |
|
||||
| title | 左侧标题 | `String` | - | - |
|
||||
| value | 右侧内容 | `String` | - | - |
|
||||
| label | 标题下方的描述信息 | `String` | - | - |
|
||||
| url | 跳转链接 | `String` | - | - |
|
||||
| isLink | 是否展示右侧箭头 | `Boolean` | `false` | - |
|
||||
| required | 是否显示表单必填符号 | `Boolean` | `false` | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| - | 自定义显示内容 |
|
||||
| icon | 自定义`icon` |
|
||||
| title | 自定义`title` |
|
||||
| right-icon | 自定义右侧按钮，默认是`arrow` |
|
||||
@@ -0,0 +1,487 @@
|
||||
## 更新日志
|
||||
|
||||
## [v0.9.9](https://github.com/youzan/vant/tree/v0.9.9) (2017-09-26)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.9.8...v0.9.9)
|
||||
|
||||
**处理的 Issue:**
|
||||
|
||||
- npm无法安装 npm WARN vant@0.9.7 requires a peer of vue@2.4.2 but none was installed. [\#141](https://github.com/youzan/vant/issues/141)
|
||||
|
||||
**合并的 Pull Request (可能有不兼容改动):**
|
||||
|
||||
- 增加单独禁用stepper input功能 [\#146](https://github.com/youzan/vant/pull/146) ([w91](https://github.com/w91))
|
||||
- 优化：waterfall 文档和组件优化 [\#145](https://github.com/youzan/vant/pull/145) ([pangxie1991](https://github.com/pangxie1991))
|
||||
- fix: wrong license in package.json [\#144](https://github.com/youzan/vant/pull/144) ([airyland](https://github.com/airyland))
|
||||
|
||||
## [v0.9.8](https://github.com/youzan/vant/tree/v0.9.8) (2017-09-24)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.9.7...v0.9.8)
|
||||
|
||||
**非兼容更新和新特性:**
|
||||
|
||||
- update changelog.md [\#140](https://github.com/youzan/vant/pull/140) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- add AddressList component [\#138](https://github.com/youzan/vant/pull/138) ([chenjiahan](https://github.com/chenjiahan))
|
||||
|
||||
**处理的 Issue:**
|
||||
|
||||
- pull-refresh 下拉成功后如何关闭加载，给的例子关闭不了 [\#139](https://github.com/youzan/vant/issues/139)
|
||||
|
||||
**合并的 Pull Request (可能有不兼容改动):**
|
||||
|
||||
- fix: sku message key [\#142](https://github.com/youzan/vant/pull/142) ([w91](https://github.com/w91))
|
||||
|
||||
## [v0.9.7](https://github.com/youzan/vant/tree/v0.9.7) (2017-09-21)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.9.6...v0.9.7)
|
||||
|
||||
**非兼容更新和新特性:**
|
||||
|
||||
- Checkbox: support different shape [\#137](https://github.com/youzan/vant/pull/137) ([chenjiahan](https://github.com/chenjiahan))
|
||||
|
||||
## [v0.9.6](https://github.com/youzan/vant/tree/v0.9.6) (2017-09-20)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.9.4...v0.9.6)
|
||||
|
||||
**修复:**
|
||||
|
||||
- ImagePreview 图片预览，有bug，滑动就没有图片了！ [\#126](https://github.com/youzan/vant/issues/126)
|
||||
- fix: reset.css compile error [\#136](https://github.com/youzan/vant/pull/136) ([chenjiahan](https://github.com/chenjiahan))
|
||||
|
||||
**合并的 Pull Request (可能有不兼容改动):**
|
||||
|
||||
- 移除大部分Lodash函数，更新文档 [\#135](https://github.com/youzan/vant/pull/135) ([w91](https://github.com/w91))
|
||||
- 修复：图片预览 滑动关闭bug [\#134](https://github.com/youzan/vant/pull/134) ([pangxie1991](https://github.com/pangxie1991))
|
||||
- icon 增加会员余额图标 [\#133](https://github.com/youzan/vant/pull/133) ([pangxie1991](https://github.com/pangxie1991))
|
||||
|
||||
## [v0.9.4](https://github.com/youzan/vant/tree/v0.9.4) (2017-09-15)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.9.3...v0.9.4)
|
||||
|
||||
**修复:**
|
||||
|
||||
- Button: fix disabled color wrong when has bottomAction prop [\#131](https://github.com/youzan/vant/pull/131) ([chenjiahan](https://github.com/chenjiahan))
|
||||
|
||||
**合并的 Pull Request (可能有不兼容改动):**
|
||||
|
||||
- Button: fix active color when disabled [\#132](https://github.com/youzan/vant/pull/132) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- 新增：增加一个已完成的icon [\#129](https://github.com/youzan/vant/pull/129) ([cookfront](https://github.com/cookfront))
|
||||
|
||||
## [v0.9.3](https://github.com/youzan/vant/tree/v0.9.3) (2017-09-13)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.9.2...v0.9.3)
|
||||
|
||||
**非兼容更新和新特性:**
|
||||
|
||||
- 你们页面上（譬如底部区域），能不能github上查看这个框架的issues入口，每次都是点更新日志切换到issues的！ [\#127](https://github.com/youzan/vant/issues/127)
|
||||
- add PasswordInput component [\#124](https://github.com/youzan/vant/pull/124) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- add NumberKeyboard component [\#122](https://github.com/youzan/vant/pull/122) ([chenjiahan](https://github.com/chenjiahan))
|
||||
|
||||
**修复:**
|
||||
|
||||
- Fix: component style should not depend on reset.css [\#128](https://github.com/youzan/vant/pull/128) ([chenjiahan](https://github.com/chenjiahan))
|
||||
|
||||
## [v0.9.2](https://github.com/youzan/vant/tree/v0.9.2) (2017-09-08)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.9.1...v0.9.2)
|
||||
|
||||
**非兼容更新和新特性:**
|
||||
|
||||
- add NavBar component [\#121](https://github.com/youzan/vant/pull/121) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- Rename some components and use more suitable names [\#120](https://github.com/youzan/vant/pull/120) ([chenjiahan](https://github.com/chenjiahan))
|
||||
|
||||
**合并的 Pull Request (可能有不兼容改动):**
|
||||
|
||||
- sku组件迁移 [\#123](https://github.com/youzan/vant/pull/123) ([w91](https://github.com/w91))
|
||||
|
||||
## [v0.9.1](https://github.com/youzan/vant/tree/v0.9.1) (2017-09-07)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.9.0...v0.9.1)
|
||||
|
||||
**修复:**
|
||||
|
||||
- Toast: fix background color [\#118](https://github.com/youzan/vant/pull/118) ([chenjiahan](https://github.com/chenjiahan))
|
||||
|
||||
**处理的 Issue:**
|
||||
|
||||
- 请问captain-ui 开源了吗？ [\#116](https://github.com/youzan/vant/issues/116)
|
||||
|
||||
## [v0.9.0](https://github.com/youzan/vant/tree/v0.9.0) (2017-09-07)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.8.9...v0.9.0)
|
||||
|
||||
**非兼容更新和新特性:**
|
||||
|
||||
- add PullRefresh component [\#117](https://github.com/youzan/vant/pull/117) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- Build: analyzes component dependencies when build style entries [\#115](https://github.com/youzan/vant/pull/115) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- Toast: use flex layout, support loading with text, improve performance [\#114](https://github.com/youzan/vant/pull/114) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- Card: support num and price props [\#112](https://github.com/youzan/vant/pull/112) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- vant-css: use hairline classes instead of mixins [\#110](https://github.com/youzan/vant/pull/110) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- update `popup` and `quickstart` readme [\#109](https://github.com/youzan/vant/pull/109) ([cookfront](https://github.com/cookfront))
|
||||
- add OrderCoupon component [\#108](https://github.com/youzan/vant/pull/108) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- Doc: improve site load speed [\#107](https://github.com/youzan/vant/pull/107) ([chenjiahan](https://github.com/chenjiahan))
|
||||
|
||||
**修复:**
|
||||
|
||||
- Fix: swipe tabs animation time and timing function [\#111](https://github.com/youzan/vant/pull/111) ([cookfront](https://github.com/cookfront))
|
||||
- hide indicators when one swipe page [\#106](https://github.com/youzan/vant/pull/106) ([Raistlin916](https://github.com/Raistlin916))
|
||||
|
||||
**合并的 Pull Request (可能有不兼容改动):**
|
||||
|
||||
- 新增：Area（省市区选择）组件 [\#113](https://github.com/youzan/vant/pull/113) ([cookfront](https://github.com/cookfront))
|
||||
|
||||
## [v0.8.9](https://github.com/youzan/vant/tree/v0.8.9) (2017-09-01)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.8.8...v0.8.9)
|
||||
|
||||
## [v0.8.8](https://github.com/youzan/vant/tree/v0.8.8) (2017-09-01)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.8.7...v0.8.8)
|
||||
|
||||
**非兼容更新和新特性:**
|
||||
|
||||
- PayOrder component add tip slot [\#105](https://github.com/youzan/vant/pull/105) ([Raistlin916](https://github.com/Raistlin916))
|
||||
- Checkbox: support listen to change event [\#104](https://github.com/youzan/vant/pull/104) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- add GoodsAction component [\#102](https://github.com/youzan/vant/pull/102) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- add InvalidGoods component [\#100](https://github.com/youzan/vant/pull/100) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- add OrderGoods component [\#99](https://github.com/youzan/vant/pull/99) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- add PayOrder component [\#98](https://github.com/youzan/vant/pull/98) ([chenjiahan](https://github.com/chenjiahan))
|
||||
|
||||
**修复:**
|
||||
|
||||
- 修复 make init bug [\#97](https://github.com/youzan/vant/pull/97) ([pangxie1991](https://github.com/pangxie1991))
|
||||
|
||||
**合并的 Pull Request (可能有不兼容改动):**
|
||||
|
||||
- Add deep-select component and fix a popup bug. [\#103](https://github.com/youzan/vant/pull/103) ([Tinysymphony](https://github.com/Tinysymphony))
|
||||
- Doc: update Step/Loading/Tag/Badge documents [\#101](https://github.com/youzan/vant/pull/101) ([chenjiahan](https://github.com/chenjiahan))
|
||||
|
||||
## [v0.8.7](https://github.com/youzan/vant/tree/v0.8.7) (2017-08-29)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.8.6...v0.8.7)
|
||||
|
||||
**非兼容更新和新特性:**
|
||||
|
||||
- add ExpressWay component [\#96](https://github.com/youzan/vant/pull/96) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- add CellSwitch component [\#95](https://github.com/youzan/vant/pull/95) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- add NoticeBar && test cases [\#94](https://github.com/youzan/vant/pull/94) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- Dialog: support both function call and component call [\#93](https://github.com/youzan/vant/pull/93) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- CellSwipe: improve test coverage && code review [\#91](https://github.com/youzan/vant/pull/91) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- Progress: adjust DOM struct [\#90](https://github.com/youzan/vant/pull/90) ([chenjiahan](https://github.com/chenjiahan))
|
||||
|
||||
## [v0.8.6](https://github.com/youzan/vant/tree/v0.8.6) (2017-08-24)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.8.5...v0.8.6)
|
||||
|
||||
**非兼容更新和新特性:**
|
||||
|
||||
- dalete merge && class operating methods [\#88](https://github.com/youzan/vant/pull/88) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- directory adjust: delete entry index.js [\#87](https://github.com/youzan/vant/pull/87) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- Button: reduce unnecessary styles [\#86](https://github.com/youzan/vant/pull/86) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- Layout: optimize doc [\#85](https://github.com/youzan/vant/pull/85) ([chenjiahan](https://github.com/chenjiahan))
|
||||
|
||||
**修复:**
|
||||
|
||||
- Fix datetime-picker init value [\#89](https://github.com/youzan/vant/pull/89) ([w91](https://github.com/w91))
|
||||
|
||||
**处理的 Issue:**
|
||||
|
||||
- When 'showIndicators' set to 'false' The second image does not show [\#80](https://github.com/youzan/vant/issues/80)
|
||||
|
||||
## [v0.8.5](https://github.com/youzan/vant/tree/v0.8.5) (2017-08-21)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.8.4...v0.8.5)
|
||||
|
||||
**非兼容更新和新特性:**
|
||||
|
||||
- Doc: add usage guide && top progress [\#83](https://github.com/youzan/vant/pull/83) ([chenjiahan](https://github.com/chenjiahan))
|
||||
|
||||
**修复:**
|
||||
|
||||
- Popup: not preventScroll by default [\#84](https://github.com/youzan/vant/pull/84) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- fix: swipe sometimes will change to drag image [\#81](https://github.com/youzan/vant/pull/81) ([pangxie1991](https://github.com/pangxie1991))
|
||||
|
||||
**处理的 Issue:**
|
||||
|
||||
- Href link does not work [\#82](https://github.com/youzan/vant/issues/82)
|
||||
- Swipe image not displayed [\#79](https://github.com/youzan/vant/issues/79)
|
||||
|
||||
## [v0.8.4](https://github.com/youzan/vant/tree/v0.8.4) (2017-08-18)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.8.3...v0.8.4)
|
||||
|
||||
**修复:**
|
||||
|
||||
- fix: field 计算autosize，需要nextTick [\#78](https://github.com/youzan/vant/pull/78) ([pangxie1991](https://github.com/pangxie1991))
|
||||
|
||||
## [v0.8.3](https://github.com/youzan/vant/tree/v0.8.3) (2017-08-18)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.8.1...v0.8.3)
|
||||
|
||||
**修复:**
|
||||
|
||||
- fix: dialog wrong z-index [\#77](https://github.com/youzan/vant/pull/77) ([chenjiahan](https://github.com/chenjiahan))
|
||||
|
||||
## [v0.8.1](https://github.com/youzan/vant/tree/v0.8.1) (2017-08-18)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.8.0...v0.8.1)
|
||||
|
||||
**非兼容更新和新特性:**
|
||||
|
||||
- field 增加icon slot支持 [\#76](https://github.com/youzan/vant/pull/76) ([pangxie1991](https://github.com/pangxie1991))
|
||||
|
||||
## [v0.8.0](https://github.com/youzan/vant/tree/v0.8.0) (2017-08-17)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.7.10...v0.8.0)
|
||||
|
||||
**非兼容更新和新特性:**
|
||||
|
||||
- Optimize component building, reduce dist file size [\#74](https://github.com/youzan/vant/pull/74) ([chenjiahan](https://github.com/chenjiahan))
|
||||
|
||||
## [v0.7.10](https://github.com/youzan/vant/tree/v0.7.10) (2017-08-16)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.7.8...v0.7.10)
|
||||
|
||||
**修复:**
|
||||
|
||||
- fix: 修复popup和dialog同时出现时，几率出现dialog被挡住的情况 [\#75](https://github.com/youzan/vant/pull/75) ([pangxie1991](https://github.com/pangxie1991))
|
||||
- 修复：popup滚动穿透 [\#73](https://github.com/youzan/vant/pull/73) ([cookfront](https://github.com/cookfront))
|
||||
|
||||
## [v0.7.8](https://github.com/youzan/vant/tree/v0.7.8) (2017-08-10)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.7.7...v0.7.8)
|
||||
|
||||
**非兼容更新和新特性:**
|
||||
|
||||
- 补充 babel-plugin-import 文档 [\#71](https://github.com/youzan/vant/pull/71) ([chenjiahan](https://github.com/chenjiahan))
|
||||
|
||||
**修复:**
|
||||
|
||||
- not require reset.css by default [\#72](https://github.com/youzan/vant/pull/72) ([chenjiahan](https://github.com/chenjiahan))
|
||||
|
||||
## [v0.7.7](https://github.com/youzan/vant/tree/v0.7.7) (2017-08-09)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.7.6...v0.7.7)
|
||||
|
||||
**修复:**
|
||||
|
||||
- Fixed: one page Swipe components error [\#70](https://github.com/youzan/vant/pull/70) ([Raistlin916](https://github.com/Raistlin916))
|
||||
|
||||
## [v0.7.6](https://github.com/youzan/vant/tree/v0.7.6) (2017-08-08)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.7.5...v0.7.6)
|
||||
|
||||
**非兼容更新和新特性:**
|
||||
|
||||
- 新增几个icon [\#69](https://github.com/youzan/vant/pull/69) ([cookfront](https://github.com/cookfront))
|
||||
|
||||
## [v0.7.5](https://github.com/youzan/vant/tree/v0.7.5) (2017-08-08)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.7.3...v0.7.5)
|
||||
|
||||
**修复:**
|
||||
|
||||
- fix: one page swiper broken [\#68](https://github.com/youzan/vant/pull/68) ([Raistlin916](https://github.com/Raistlin916))
|
||||
|
||||
**处理的 Issue:**
|
||||
|
||||
- 安装业务组件导致基础组件css样式文件引入失败 [\#65](https://github.com/youzan/vant/issues/65)
|
||||
|
||||
## [v0.7.3](https://github.com/youzan/vant/tree/v0.7.3) (2017-08-04)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.7.2...v0.7.3)
|
||||
|
||||
**处理的 Issue:**
|
||||
|
||||
- datetime-picker的问题 [\#45](https://github.com/youzan/vant/issues/45)
|
||||
|
||||
**合并的 Pull Request (可能有不兼容改动):**
|
||||
|
||||
- fix: utils 修复babel编译 [\#67](https://github.com/youzan/vant/pull/67) ([pangxie1991](https://github.com/pangxie1991))
|
||||
- README.md使用英文文档 [\#66](https://github.com/youzan/vant/pull/66) ([cookfront](https://github.com/cookfront))
|
||||
|
||||
## [v0.7.2](https://github.com/youzan/vant/tree/v0.7.2) (2017-07-31)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.6.6...v0.7.2)
|
||||
|
||||
**非兼容更新和新特性:**
|
||||
|
||||
- 支持 babel-plugin-import [\#62](https://github.com/youzan/vant/pull/62) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- 依赖更新 && 构建调整 [\#60](https://github.com/youzan/vant/pull/60) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- Switch 组件: 个人建议加了动画效果 [\#59](https://github.com/youzan/vant/pull/59) ([BosenY](https://github.com/BosenY))
|
||||
- 文档改版 [\#55](https://github.com/youzan/vant/pull/55) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- 新增：Card 组件增加 centered 属性 [\#54](https://github.com/youzan/vant/pull/54) ([chenjiahan](https://github.com/chenjiahan))
|
||||
|
||||
**修复:**
|
||||
|
||||
- fix: datetimepicker cancel event not work [\#64](https://github.com/youzan/vant/pull/64) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- 修复：popup多层级van-modal未插入到正确的位置 [\#63](https://github.com/youzan/vant/pull/63) ([cookfront](https://github.com/cookfront))
|
||||
- 新增几个图标 && 修复tabs组件为空报错的问题 [\#61](https://github.com/youzan/vant/pull/61) ([cookfront](https://github.com/cookfront))
|
||||
- Fix: deploy doc fail [\#56](https://github.com/youzan/vant/pull/56) ([chenjiahan](https://github.com/chenjiahan))
|
||||
|
||||
**处理的 Issue:**
|
||||
|
||||
- SVG's SMIL animations deprecated [\#46](https://github.com/youzan/vant/issues/46)
|
||||
|
||||
## [v0.6.6](https://github.com/youzan/vant/tree/v0.6.6) (2017-07-15)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.6.5...v0.6.6)
|
||||
|
||||
**非兼容更新和新特性:**
|
||||
|
||||
- 新增：Field 增加blur事件 && Field 支持尾部icon [\#53](https://github.com/youzan/vant/pull/53) ([pangxie1991](https://github.com/pangxie1991))
|
||||
|
||||
## [v0.6.5](https://github.com/youzan/vant/tree/v0.6.5) (2017-07-11)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.6.4...v0.6.5)
|
||||
|
||||
**非兼容更新和新特性:**
|
||||
|
||||
- tabs组件支持滑动 [\#52](https://github.com/youzan/vant/pull/52) ([cookfront](https://github.com/cookfront))
|
||||
|
||||
**处理的 Issue:**
|
||||
|
||||
- 有计划都生成vue版本吗 [\#50](https://github.com/youzan/vant/issues/50)
|
||||
|
||||
## [v0.6.4](https://github.com/youzan/vant/tree/v0.6.4) (2017-07-06)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.6.3...v0.6.4)
|
||||
|
||||
**非兼容更新和新特性:**
|
||||
|
||||
- src/utils目录支持SSR [\#51](https://github.com/youzan/vant/pull/51) ([cookfront](https://github.com/cookfront))
|
||||
|
||||
## [v0.6.3](https://github.com/youzan/vant/tree/v0.6.3) (2017-07-04)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.6.2...v0.6.3)
|
||||
|
||||
**非兼容更新和新特性:**
|
||||
|
||||
- 步骤条组件新增direction和activeColor属性，增加了竖的步骤条 [\#49](https://github.com/youzan/vant/pull/49) ([cookfront](https://github.com/cookfront))
|
||||
- Card component supoort thumb slot，use flex layout [\#48](https://github.com/youzan/vant/pull/48) ([chenjiahan](https://github.com/chenjiahan))
|
||||
|
||||
**修复:**
|
||||
|
||||
- 修复人民币符号在ios显示问题 [\#44](https://github.com/youzan/vant/pull/44) ([w91](https://github.com/w91))
|
||||
|
||||
**处理的 Issue:**
|
||||
|
||||
- goods-action 文档有误 [\#47](https://github.com/youzan/vant/issues/47)
|
||||
|
||||
## [v0.6.2](https://github.com/youzan/vant/tree/v0.6.2) (2017-06-26)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.6.1...v0.6.2)
|
||||
|
||||
**非兼容更新和新特性:**
|
||||
|
||||
- 新增icon、filed组件新增time类型和Dialog组件默认文案修改 [\#43](https://github.com/youzan/vant/pull/43) ([cookfront](https://github.com/cookfront))
|
||||
|
||||
## [v0.6.1](https://github.com/youzan/vant/tree/v0.6.1) (2017-06-19)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.6.0...v0.6.1)
|
||||
|
||||
**修复:**
|
||||
|
||||
- 新增icon和修复toast样式问题 [\#42](https://github.com/youzan/vant/pull/42) ([cookfront](https://github.com/cookfront))
|
||||
|
||||
## [v0.6.0](https://github.com/youzan/vant/tree/v0.6.0) (2017-06-15)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.5.12...v0.6.0)
|
||||
|
||||
**非兼容更新和新特性:**
|
||||
|
||||
- Search组件新增微杂志样式 [\#38](https://github.com/youzan/vant/pull/38) ([cookfront](https://github.com/cookfront))
|
||||
- 支持SSR、升级Vue版本和增加新的icon [\#40](https://github.com/youzan/vant/pull/40) ([cookfront](https://github.com/cookfront))
|
||||
- 增加cell swipe组件 [\#39](https://github.com/youzan/vant/pull/39) ([tsxuehu](https://github.com/tsxuehu))
|
||||
|
||||
## [v0.5.12](https://github.com/youzan/vant/tree/v0.5.12) (2017-06-02)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.5.11...v0.5.12)
|
||||
|
||||
**处理的 Issue:**
|
||||
|
||||
- 业务组件的cap-goods-list出现问题 [\#36](https://github.com/youzan/vant/issues/36)
|
||||
|
||||
**合并的 Pull Request (可能有不兼容改动):**
|
||||
|
||||
- utils/scroll [\#37](https://github.com/youzan/vant/pull/37) ([pangxie1991](https://github.com/pangxie1991))
|
||||
|
||||
## [v0.5.11](https://github.com/youzan/vant/tree/v0.5.11) (2017-05-25)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.5.10...v0.5.11)
|
||||
|
||||
**合并的 Pull Request (可能有不兼容改动):**
|
||||
|
||||
- 移除postcss-reset [\#35](https://github.com/youzan/vant/pull/35) ([cookfront](https://github.com/cookfront))
|
||||
|
||||
## [v0.5.10](https://github.com/youzan/vant/tree/v0.5.10) (2017-05-25)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.5.9...v0.5.10)
|
||||
|
||||
## [v0.5.9](https://github.com/youzan/vant/tree/v0.5.9) (2017-05-25)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.5.8...v0.5.9)
|
||||
|
||||
**合并的 Pull Request (可能有不兼容改动):**
|
||||
|
||||
- 新增微信导航icon [\#34](https://github.com/youzan/vant/pull/34) ([cookfront](https://github.com/cookfront))
|
||||
|
||||
## [v0.5.8](https://github.com/youzan/vant/tree/v0.5.8) (2017-05-25)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.5.7...v0.5.8)
|
||||
|
||||
**修复:**
|
||||
|
||||
- 修复长按图片后，图片会隐藏问题 [\#32](https://github.com/youzan/vant/pull/32) ([w91](https://github.com/w91))
|
||||
|
||||
**合并的 Pull Request (可能有不兼容改动):**
|
||||
|
||||
- 新增微信导航icon [\#33](https://github.com/youzan/vant/pull/33) ([cookfront](https://github.com/cookfront))
|
||||
|
||||
## [v0.5.7](https://github.com/youzan/vant/tree/v0.5.7) (2017-05-19)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.5.6...v0.5.7)
|
||||
|
||||
**非兼容更新和新特性:**
|
||||
|
||||
- picker 增加 title 显示 [\#30](https://github.com/youzan/vant/pull/30) ([pangxie1991](https://github.com/pangxie1991))
|
||||
|
||||
**合并的 Pull Request (可能有不兼容改动):**
|
||||
|
||||
- 更新reset中body背景色 [\#31](https://github.com/youzan/vant/pull/31) ([w91](https://github.com/w91))
|
||||
|
||||
## [v0.5.6](https://github.com/youzan/vant/tree/v0.5.6) (2017-05-15)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.5.4...v0.5.6)
|
||||
|
||||
**合并的 Pull Request (可能有不兼容改动):**
|
||||
|
||||
- 添加两个新的icon [\#29](https://github.com/youzan/vant/pull/29) ([cookfront](https://github.com/cookfront))
|
||||
- 改变打包出来的amd模块，增加amd模块的名字 [\#28](https://github.com/youzan/vant/pull/28) ([pangxie1991](https://github.com/pangxie1991))
|
||||
|
||||
## [v0.5.4](https://github.com/youzan/vant/tree/v0.5.4) (2017-05-09)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.5.3...v0.5.4)
|
||||
|
||||
**修复:**
|
||||
|
||||
- 修复：添加reset.css和cell加上right-icon的slot [\#27](https://github.com/youzan/vant/pull/27) ([cookfront](https://github.com/cookfront))
|
||||
- 修复：cell同时设置title和label时，value不居中 [\#26](https://github.com/youzan/vant/pull/26) ([cookfront](https://github.com/cookfront))
|
||||
- 修复：popup的zIndex转换为number [\#24](https://github.com/youzan/vant/pull/24) ([cookfront](https://github.com/cookfront))
|
||||
|
||||
**合并的 Pull Request (可能有不兼容改动):**
|
||||
|
||||
- fix bugs and add new features [\#25](https://github.com/youzan/vant/pull/25) ([radicalviva](https://github.com/radicalviva))
|
||||
|
||||
## [v0.5.3](https://github.com/youzan/vant/tree/v0.5.3) (2017-04-27)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.5.2...v0.5.3)
|
||||
|
||||
**修复:**
|
||||
|
||||
- 修复：picker中值变了后未更新picker-colum中的值 [\#23](https://github.com/youzan/vant/pull/23) ([cookfront](https://github.com/cookfront))
|
||||
|
||||
## [v0.5.2](https://github.com/youzan/vant/tree/v0.5.2) (2017-04-26)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.5.1...v0.5.2)
|
||||
|
||||
**处理的 Issue:**
|
||||
|
||||
- does it render UI Natively just like React - Native or like ionic ? [\#15](https://github.com/youzan/vant/issues/15)
|
||||
- give me an english version of this : https://www.youzanyun.com/zanui/react/guides/install [\#14](https://github.com/youzan/vant/issues/14)
|
||||
|
||||
**合并的 Pull Request (可能有不兼容改动):**
|
||||
|
||||
- 修复：webpack打包修复 [\#21](https://github.com/youzan/vant/pull/21) ([cookfront](https://github.com/cookfront))
|
||||
- unit test: picker [\#20](https://github.com/youzan/vant/pull/20) ([cookfront](https://github.com/cookfront))
|
||||
- Fix: 修复toast关闭时未移除Dom节点，以及补上单元测试 [\#19](https://github.com/youzan/vant/pull/19) ([cookfront](https://github.com/cookfront))
|
||||
- tabs 组件修改 [\#18](https://github.com/youzan/vant/pull/18) ([pangxie1991](https://github.com/pangxie1991))
|
||||
- 补充 Col & Row 测试用例 [\#16](https://github.com/youzan/vant/pull/16) ([w91](https://github.com/w91))
|
||||
- 单元测试 排除src/目录 [\#13](https://github.com/youzan/vant/pull/13) ([pangxie1991](https://github.com/pangxie1991))
|
||||
- 添加单元测试 [\#12](https://github.com/youzan/vant/pull/12) ([cookfront](https://github.com/cookfront))
|
||||
- test 环境不跑 PhantomJS [\#11](https://github.com/youzan/vant/pull/11) ([pangxie1991](https://github.com/pangxie1991))
|
||||
- 修改 unit test 的配置 [\#10](https://github.com/youzan/vant/pull/10) ([pangxie1991](https://github.com/pangxie1991))
|
||||
- unit test: uploader [\#9](https://github.com/youzan/vant/pull/9) ([tsxuehu](https://github.com/tsxuehu))
|
||||
- 文档页样式优化和打包配置优化 [\#8](https://github.com/youzan/vant/pull/8) ([cookfront](https://github.com/cookfront))
|
||||
- 修复表单组件样式和单元测试用例 [\#7](https://github.com/youzan/vant/pull/7) ([cookfront](https://github.com/cookfront))
|
||||
- 文档小细节优化 [\#6](https://github.com/youzan/vant/pull/6) ([cookfront](https://github.com/cookfront))
|
||||
|
||||
## [v0.5.1](https://github.com/youzan/vant/tree/v0.5.1) (2017-04-24)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.5.0...v0.5.1)
|
||||
|
||||
**合并的 Pull Request (可能有不兼容改动):**
|
||||
|
||||
- 文档细节优化，search、loading和dialog组件样式修复 [\#5](https://github.com/youzan/vant/pull/5) ([cookfront](https://github.com/cookfront))
|
||||
|
||||
## [v0.5.0](https://github.com/youzan/vant/tree/v0.5.0) (2017-04-23)
|
||||
**处理的 Issue:**
|
||||
|
||||
- 一些建议 [\#1](https://github.com/youzan/vant/issues/1)
|
||||
|
||||
**合并的 Pull Request (可能有不兼容改动):**
|
||||
|
||||
- use vue in amd & commonjs, use Vue in root [\#4](https://github.com/youzan/vant/pull/4) ([pangxie1991](https://github.com/pangxie1991))
|
||||
- 手机端样式细节调整，补充测试用例 [\#3](https://github.com/youzan/vant/pull/3) ([cookfront](https://github.com/cookfront))
|
||||
- 补充waterfall文档，依赖vue改为Vue [\#2](https://github.com/youzan/vant/pull/2) ([pangxie1991](https://github.com/pangxie1991))
|
||||
|
||||
|
||||
|
||||
\* *This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)*
|
||||
@@ -0,0 +1,245 @@
|
||||
## 更新日志
|
||||
|
||||
### [0.9.9](https://github.com/youzan/vant/tree/v0.9.9)
|
||||
`2017-09-26`
|
||||
|
||||
**Improvements**
|
||||
- Sku：支持禁用 Stepper [\#146](https://github.com/youzan/vant/pull/146) [@w91](https://github.com/w91)
|
||||
|
||||
**Bug Fixes**
|
||||
- 修复 packages.json 中 license 标注错误 [\#144](https://github.com/youzan/vant/pull/144) [@airyland](https://github.com/airyland)
|
||||
- 修复 Waterfall 滚动计算错误的问题 [\#145](https://github.com/youzan/vant/pull/145) [@pangxie1991](https://github.com/pangxie1991)
|
||||
|
||||
|
||||
### [0.9.8](https://github.com/youzan/vant/tree/v0.9.8)
|
||||
`2017-09-24`
|
||||
|
||||
**Improvements**
|
||||
- 新增 AddressList 组件 [\#138](https://github.com/youzan/vant/pull/138) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- 优化 changelog 结构 [\#140](https://github.com/youzan/vant/pull/140) [@chenjiahan](https://github.com/chenjiahan)
|
||||
|
||||
**Bug Fixes**
|
||||
- 修复 Sku 留言渲染错误 [\#142](https://github.com/youzan/vant/pull/142) [@w91](https://github.com/w91)
|
||||
|
||||
### [0.9.7](https://github.com/youzan/vant/tree/v0.9.7)
|
||||
`2017-09-21`
|
||||
|
||||
**Improvements**
|
||||
- Checkbox: 支持 shape 属性 [\#137](https://github.com/youzan/vant/pull/137) [@chenjiahan](https://github.com/chenjiahan)
|
||||
|
||||
|
||||
### [0.9.6](https://github.com/youzan/vant/tree/v0.9.6)
|
||||
`2017-09-20`
|
||||
|
||||
**Improvements**
|
||||
- Sku：移除大部分 Lodash 函数 [\#135](https://github.com/youzan/vant/pull/135) [@w91](https://github.com/w91)
|
||||
- Icon：增加会员余额图标 [\#133](https://github.com/youzan/vant/pull/133) [@pangxie1991](https://github.com/pangxie1991)
|
||||
|
||||
**Bug Fixes**
|
||||
- 修复 ImagePreview 滑动后无法展示图片的问题 [\#126](https://github.com/youzan/vant/issues/126) [@pangxie1991](https://github.com/pangxie1991)
|
||||
- 修复 reset.css 编译失败的问题 [\#136](https://github.com/youzan/vant/pull/136) [@chenjiahan](https://github.com/chenjiahan)
|
||||
|
||||
|
||||
|
||||
### [0.9.4](https://github.com/youzan/vant/tree/v0.9.4)
|
||||
`2017-09-15`
|
||||
|
||||
**Improvements**
|
||||
- Icon: 增加已完成图标 [\#129](https://github.com/youzan/vant/pull/129) [@cookfront](https://github.com/cookfront)
|
||||
|
||||
**Bug Fixes**
|
||||
- 修复 Button 同时使用 disabled 和 bottomAction 属性时颜色错误的问题 [\#131](https://github.com/youzan/vant/pull/131) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- 修复 Button 不可用状态下 acitive 背景色错误的问题 [\#132](https://github.com/youzan/vant/pull/132) [@chenjiahan](https://github.com/chenjiahan)
|
||||
|
||||
|
||||
|
||||
### [0.9.3](https://github.com/youzan/vant/tree/v0.9.3)
|
||||
`2017-09-13`
|
||||
|
||||
**Improvements**
|
||||
- 新增 PasswordInput 组件 [\#124](https://github.com/youzan/vant/pull/124) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- 新增 NumberKeyboard 组件 [\#122](https://github.com/youzan/vant/pull/122) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- 新增文档底部 issue 入口 [\#127](https://github.com/youzan/vant/issues/127) [@chenjiahan](https://github.com/chenjiahan)
|
||||
|
||||
**Bug Fixes**
|
||||
- 修复部分组件样式依赖 reset.css 的问题 [\#128](https://github.com/youzan/vant/pull/128) [@chenjiahan](https://github.com/chenjiahan)
|
||||
|
||||
|
||||
### [0.9.2](https://github.com/youzan/vant/tree/v0.9.2)
|
||||
`2017-09-08`
|
||||
|
||||
**Breaking changes**
|
||||
- 内置 van-hairline 类，用于添加 0.5px 边框 [\#110](https://github.com/youzan/vant/pull/110) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- Quantity：重命名为 Stepper [\#120](https://github.com/youzan/vant/pull/120) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- PayOrder 重命名为 SubmitBar [\#120](https://github.com/youzan/vant/pull/120) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- DeepSelect: 重命名为 TreeSelect [\#120](https://github.com/youzan/vant/pull/120) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- OrderCoupon: 拆分为 CouponList 和 CouponCell 组件 [\#120](https://github.com/youzan/vant/pull/120) [@chenjiahan](https://github.com/chenjiahan)
|
||||
|
||||
**Bug Fixes**
|
||||
- 修复 Tabs 动画过渡效果 [\#111](https://github.com/youzan/vant/pull/111) [@cookfront](https://github.com/cookfront)
|
||||
- 修复 Swipe 页数为一时指示器未隐藏的问题 [\#106](https://github.com/youzan/vant/pull/106) [@Raistlin916](https://github.com/Raistlin916)
|
||||
- 修复 Toast 背景色值错误的问题 [\#118](https://github.com/youzan/vant/pull/118) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- 修复自动引入组件样式时未引入内部依赖组件样式的问题 [\#115](https://github.com/youzan/vant/pull/115) [@chenjiahan](https://github.com/chenjiahan)
|
||||
|
||||
**Improvements**
|
||||
- 新增 Sku 组件 [\#123](https://github.com/youzan/vant/pull/123) [@w91](https://github.com/w91)
|
||||
- 新增 Area 组件 [\#113](https://github.com/youzan/vant/pull/113) [@cookfront](https://github.com/cookfront)
|
||||
- 新增 NavBar 组件 [\#121](https://github.com/youzan/vant/pull/121) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- 新增 PullRefresh 组件 [\#117](https://github.com/youzan/vant/pull/117) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- 新增 OrderCoupon 组件 [\#108](https://github.com/youzan/vant/pull/108) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- 优化文档加载速度 [\#107](https://github.com/youzan/vant/pull/107) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- 优化 Popup 文档 [\#109](https://github.com/youzan/vant/pull/109) [@cookfront](https://github.com/cookfront)
|
||||
- Card：支持 num 和 price 属性 [\#112](https://github.com/youzan/vant/pull/112) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- Toast: 支持 loading 和 text 属性同时使用，优化渲染性能 [\#114](https://github.com/youzan/vant/pull/114) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- Toast：布局方式改为 Flex 布局 [\#114](https://github.com/youzan/vant/pull/114) [@chenjiahan](https://github.com/chenjiahan)
|
||||
|
||||
### [0.8.8](https://github.com/youzan/vant/tree/v0.8.8)
|
||||
`2017-09-01`
|
||||
|
||||
**Improvements**
|
||||
- 新增 DeepSelect 组件 [\#103](https://github.com/youzan/vant/pull/103) [@Tinysymphony](https://github.com/Tinysymphony)
|
||||
- 新增 GoodsAction 组件 [\#102](https://github.com/youzan/vant/pull/102) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- 新增 OrderGoods 组件 [\#99](https://github.com/youzan/vant/pull/99) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- 新增 PayOrder 组件 [\#98](https://github.com/youzan/vant/pull/98) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- 优化 Step、Loading、Tag、Badge 文档 [\#101](https://github.com/youzan/vant/pull/101) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- Checkbox: 支持 change 事件 [\#104](https://github.com/youzan/vant/pull/104) [@chenjiahan](https://github.com/chenjiahan)
|
||||
|
||||
**Bug Fixes**
|
||||
- 修复 make init 命令报错的问题 [\#97](https://github.com/youzan/vant/pull/97) [@pangxie1991](https://github.com/pangxie1991)
|
||||
|
||||
|
||||
### [0.8.7](https://github.com/youzan/vant/tree/v0.8.7)
|
||||
`2017-08-29`
|
||||
|
||||
**Improvements**
|
||||
- 新增 NoticeBar 组件 [\#94](https://github.com/youzan/vant/pull/94) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- 新增 CellSwitch 组件 [\#95](https://github.com/youzan/vant/pull/95) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- Dialog: 支持通过组件的方式进行调用 [\#93](https://github.com/youzan/vant/pull/93) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- Progress: 简化 DOM 结构 [\#90](https://github.com/youzan/vant/pull/90) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- CellSwipe: 性能优化，补充单元测试 [\#91](https://github.com/youzan/vant/pull/91) [@chenjiahan](https://github.com/chenjiahan)
|
||||
|
||||
### [0.8.6](https://github.com/youzan/vant/tree/v0.8.6)
|
||||
`2017-08-24`
|
||||
|
||||
**Improvements**
|
||||
- 去除对 merge 和 class 操作方法的依赖 [\#88](https://github.com/youzan/vant/pull/88) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- 目录结构简化，去除 index.js 文件 [\#87](https://github.com/youzan/vant/pull/87) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- Button: 精简部分样式 [\#86](https://github.com/youzan/vant/pull/86) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- Layout: 文档优化 [\#85](https://github.com/youzan/vant/pull/85) [@chenjiahan](https://github.com/chenjiahan)
|
||||
|
||||
**Bug Fixes**
|
||||
- 修复 DatetimePicker 初始值错误的问题 [\#89](https://github.com/youzan/vant/pull/89) [@w91](https://github.com/w91)
|
||||
|
||||
### [0.8.5](https://github.com/youzan/vant/tree/v0.8.5)
|
||||
`2017-08-21`
|
||||
|
||||
**Breaking changes**
|
||||
- 优化单个组件构建方式, 减少文件体积 [\#74](https://github.com/youzan/vant/pull/74) [@chenjiahan](https://github.com/chenjiahan)
|
||||
|
||||
**Improvements**
|
||||
- 新增文档组件使用指南 [\#83](https://github.com/youzan/vant/pull/83) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- 新增文档加载动效 [\#83](https://github.com/youzan/vant/pull/83) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- Field：新增 icon slot [\#76](https://github.com/youzan/vant/pull/76) [@pangxie1991](https://github.com/pangxie1991)
|
||||
|
||||
**Bug Fixes**
|
||||
- 修复 Popup 默认开启 preventScroll 导致无法局部滚动的问题 [\#84](https://github.com/youzan/vant/pull/84) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- 修复 Field autosize 高度错误的问题 [\#78](https://github.com/youzan/vant/pull/78) [@pangxie1991](https://github.com/pangxie1991)
|
||||
- 修复 Dialog z-index 错误的问题 [\#77](https://github.com/youzan/vant/pull/77) [@chenjiahan](https://github.com/chenjiahan)
|
||||
|
||||
|
||||
### [0.7.8](https://github.com/youzan/vant/tree/v0.7.8)
|
||||
`2017-08-10`
|
||||
|
||||
**Improvements**
|
||||
- 新增 README 英文文档 [\#66](https://github.com/youzan/vant/pull/66) [@cookfront](https://github.com/cookfront)
|
||||
- 新增 babel-plugin-import 使用教程 [\#71](https://github.com/youzan/vant/pull/71) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- 新增多个 Icon 类型 [\#69](https://github.com/youzan/vant/pull/69) [@cookfront](https://github.com/cookfront)
|
||||
|
||||
**Bug Fixes**
|
||||
- 修复 Swipe 组件报错的问题 [\#70](https://github.com/youzan/vant/pull/70) [@Raistlin916](https://github.com/Raistlin916)
|
||||
- 修复 DatetimePicker cancel 事件无法触发的问题 [\#45](https://github.com/youzan/vant/issues/45) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- 修复 utils 编译时未转成 ES5 的问题 [\#67](https://github.com/youzan/vant/pull/67) [@pangxie1991](https://github.com/pangxie1991)
|
||||
|
||||
|
||||
### [0.7.2](https://github.com/youzan/vant/tree/v0.7.2)
|
||||
`2017-07-31`
|
||||
|
||||
**Breaking changes**
|
||||
- 文档站点样式改版 [\#55](https://github.com/youzan/vant/pull/55) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- 支持 babel-plugin-import [\#62](https://github.com/youzan/vant/pull/62) [@chenjiahan](https://github.com/chenjiahan)
|
||||
|
||||
**Bug Fixes**
|
||||
- 修复 Popup 多层级 modal 未插入到正确的位置的问题 [\#63](https://github.com/youzan/vant/pull/63) [@cookfront](https://github.com/cookfront)
|
||||
- 修复 Tabs 组件为空报错的问题 [\#61](https://github.com/youzan/vant/pull/61) [@cookfront](https://github.com/cookfront)
|
||||
|
||||
**Improvements**
|
||||
- Switch：增加过渡动画效果 [\#59](https://github.com/youzan/vant/pull/59) [@BosenY](https://github.com/BosenY)
|
||||
- Card：支持 centered 属性 [\#54](https://github.com/youzan/vant/pull/54) [@chenjiahan](https://github.com/chenjiahan)
|
||||
|
||||
### [0.6.6](https://github.com/youzan/vant/tree/v0.6.6)
|
||||
`2017-07-15`
|
||||
|
||||
**Improvements**
|
||||
- Tabs：支持滑动 [\#52](https://github.com/youzan/vant/pull/52) [@cookfront](https://github.com/cookfront)
|
||||
- Steps：新增 direction 和 activeColor 属性，支持竖向展示 [\#49](https://github.com/youzan/vant/pull/49) [@cookfront](https://github.com/cookfront)
|
||||
- Card：支持 thumb slot [\#48](https://github.com/youzan/vant/pull/48) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- Field：支持 blur 事件，新增 icon slot [\#53](https://github.com/youzan/vant/pull/53) [@pangxie1991](https://github.com/pangxie1991)
|
||||
|
||||
### [0.6.2](https://github.com/youzan/vant/tree/v0.6.2)
|
||||
`2017-06-26`
|
||||
|
||||
**Improvements**
|
||||
- Filed组件：支持 time类型 [\#43](https://github.com/youzan/vant/pull/43) [@cookfront](https://github.com/cookfront)
|
||||
|
||||
**Bug Fixes**
|
||||
- 修复 Toast 样式问题 [\#42](https://github.com/youzan/vant/pull/42) [@cookfront](https://github.com/cookfront)
|
||||
- 修复人民币符号在 iOS 下显示问题 [\#44](https://github.com/youzan/vant/pull/44) [@w91](https://github.com/w91)
|
||||
|
||||
|
||||
### [0.6.0](https://github.com/youzan/vant/tree/v0.6.0)
|
||||
`2017-06-15`
|
||||
|
||||
**Improvements**
|
||||
- 支持 SSR [\#40](https://github.com/youzan/vant/pull/40) [@cookfront](https://github.com/cookfront)
|
||||
- 新增多个 Icon 类型 [\#40](https://github.com/youzan/vant/pull/40) [@cookfront](https://github.com/cookfront)
|
||||
- 新增 CellSwipe 组件 [\#39](https://github.com/youzan/vant/pull/39) [@tsxuehu](https://github.com/tsxuehu)
|
||||
- 新增 Search 组件微杂志样式 [\#38](https://github.com/youzan/vant/pull/38) [@cookfront](https://github.com/cookfront)
|
||||
|
||||
### [0.5.8](https://github.com/youzan/vant/tree/v0.5.8)
|
||||
`2017-05-25`
|
||||
|
||||
**Improvements**
|
||||
- 新增多个 Icon 类型 [\#29](https://github.com/youzan/vant/pull/29) [@cookfront](https://github.com/cookfront)
|
||||
- 新增打包后的 amd 模块名称 [\#28](https://github.com/youzan/vant/pull/28) [@pangxie1991](https://github.com/pangxie1991)
|
||||
- 移除 postcss-reset 插件 [\#35](https://github.com/youzan/vant/pull/35) [@cookfront](https://github.com/cookfront)
|
||||
- Picker：支持 title 属性 [\#30](https://github.com/youzan/vant/pull/30) [@pangxie1991](https://github.com/pangxie1991)
|
||||
|
||||
**Bug Fixes**
|
||||
- 修复长按图片后隐藏的问题 [\#32](https://github.com/youzan/vant/pull/32) [@w91](https://github.com/w91)
|
||||
|
||||
|
||||
### [0.5.4](https://github.com/youzan/vant/tree/v0.5.4)
|
||||
`2017-05-09`
|
||||
|
||||
**Bug Fixes**
|
||||
- 修复 Cell 同时设置 title 和 label 时 value 不居中的问题 [\#26](https://github.com/youzan/vant/pull/26) [@cookfront](https://github.com/cookfront)
|
||||
- 修复 Popup zIndex 类型错误 [\#24](https://github.com/youzan/vant/pull/24) [@cookfront](https://github.com/cookfront)
|
||||
- 修复 Picker 状态更新错误 [\#23](https://github.com/youzan/vant/pull/23) [@cookfront](https://github.com/cookfront)
|
||||
|
||||
**Improvements**
|
||||
- 新增 reset.css [\#27](https://github.com/youzan/vant/pull/27) [@cookfront](https://github.com/cookfront)
|
||||
- Cell: 新增 right-icon slot [\#27](https://github.com/youzan/vant/pull/27) [@cookfront](https://github.com/cookfront)
|
||||
|
||||
|
||||
### [0.5.2](https://github.com/youzan/vant/tree/v0.5.2)
|
||||
`2017-04-26`
|
||||
|
||||
**Improvements**
|
||||
- 新增 Picker 组件测试用例 [\#20](https://github.com/youzan/vant/pull/20) [@cookfront](https://github.com/cookfront)
|
||||
- 新增 Col & Row 组件测试用例 [\#16](https://github.com/youzan/vant/pull/16) [@w91](https://github.com/w91)
|
||||
- 新增 Uploader 单元测试 [\#9](https://github.com/youzan/vant/pull/9) [@tsxuehu](https://github.com/tsxuehu)
|
||||
|
||||
**Bug Fixes**
|
||||
- 修复 Webpack 打包错误 [\#21](https://github.com/youzan/vant/pull/21) [@cookfront](https://github.com/cookfront)
|
||||
- 修复 Toast 关闭时未移除 Dom 节点的问题 [\#19](https://github.com/youzan/vant/pull/19) [@cookfront](https://github.com/cookfront)
|
||||
- 修复组件样式问题 [\#5](https://github.com/youzan/vant/pull/5) [@cookfront](https://github.com/cookfront)
|
||||
@@ -0,0 +1,173 @@
|
||||
<style>
|
||||
.demo-checkbox {
|
||||
.van-checkbox {
|
||||
margin: 10px 0 0 20px;
|
||||
}
|
||||
.van-cell {
|
||||
.van-checkbox {
|
||||
margin: 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 复选框
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Checkbox } from 'vant';
|
||||
|
||||
Vue.component(Checkbox.name, Checkbox);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
通过`v-model`绑定 checkbox 的勾选状态
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-checkbox v-model="checkbox1">复选框1</van-checkbox>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkbox1: true
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### 禁用状态
|
||||
|
||||
设置`disabled`属性即可，此时`Checkbox`不能点击。
|
||||
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<van-checkbox v-model="checkbox2" disabled>复选框2</van-checkbox>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkbox2: true
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### Checkbox组
|
||||
|
||||
需要与`van-checkbox-group`一起使用，值通过`v-model`绑定在`van-checkbox-group`上，例如下面的`result`，此时`result`的值是一个数组。数组中的项即为选中的`Checkbox`的`name`属性设置的值。
|
||||
|
||||
:::demo Checkbox组
|
||||
```html
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-checkbox
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:name="item"
|
||||
>
|
||||
复选框{{ item }}
|
||||
</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: ['a', 'b', 'c'],
|
||||
result: ['a', 'b']
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
result(val) {
|
||||
console.log(val);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### 与Cell组件一起使用
|
||||
|
||||
此时你需要再引入`Cell`和`CellGroup`组件。
|
||||
|
||||
:::demo 与Cell组件一起使用
|
||||
```html
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-cell-group>
|
||||
<van-cell v-for="(item, index) in list" :key="index">
|
||||
<van-checkbox :name="item">复选框{{ item }}</van-checkbox>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: ['a', 'b', 'c'],
|
||||
result: ['a', 'b']
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### Checkbox API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| name | 标识 Checkbox 名称 | `Boolean` | `false` | - |
|
||||
| disabled | 是否禁用单选框 | `Boolean` | `false` | - |
|
||||
| shape | 形状 | `String` | `round` | `square` |
|
||||
|
||||
### CheckboxGroup API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | 是否禁用所有单选框 | `Boolean` | `false` | - |
|
||||
|
||||
### Checkbox Event
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|
||||
|
||||
### CheckboxGroup Event
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|
||||
@@ -0,0 +1,245 @@
|
||||
<style>
|
||||
.demo-contact {
|
||||
.van-popup {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chosenContactId: null,
|
||||
editingContact: {},
|
||||
showList: false,
|
||||
showEdit: false,
|
||||
isEdit: false,
|
||||
list: [{
|
||||
name: '张三',
|
||||
tel: '13000000000',
|
||||
id: 0
|
||||
}]
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
cardType() {
|
||||
return this.chosenContactId !== null ? 'edit' : 'add';
|
||||
},
|
||||
|
||||
currentContact() {
|
||||
const id = this.chosenContactId;
|
||||
return id !== null ? this.list.filter(item => item.id === id)[0] : {};
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onAdd() {
|
||||
this.editingContact = { id: this.list.length };
|
||||
this.isEdit = false;
|
||||
this.showEdit = true;
|
||||
},
|
||||
|
||||
onEdit(item) {
|
||||
this.isEdit = true;
|
||||
this.showEdit = true;
|
||||
this.editingContact = item;
|
||||
},
|
||||
|
||||
onSelect() {
|
||||
this.showList = false;
|
||||
},
|
||||
|
||||
onSave(info) {
|
||||
this.showEdit = false;
|
||||
this.showList = false;
|
||||
|
||||
if (this.isEdit) {
|
||||
this.list = this.list.map(item => item.id === info.id ? info : item);
|
||||
} else {
|
||||
this.list.push(info);
|
||||
}
|
||||
this.chosenContactId = info.id;
|
||||
},
|
||||
|
||||
onDelete(info) {
|
||||
this.showEdit = false;
|
||||
this.list = this.list.filter(item => item.id !== info.id);
|
||||
if (this.chosenContactId === info.id) {
|
||||
this.chosenContactId = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Contact 联系人
|
||||
通过 Contact 组件可以实现联系人的展示、选择、编辑等功能。
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { ContactCard, ContactList, ContactEdit } from 'vant';
|
||||
|
||||
Vue.component(ContactCard.name, ContactCard);
|
||||
Vue.component(ContactList.name, ContactList);
|
||||
Vue.component(ContactEdit.name, ContactEdit);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<!-- 联系人卡片 -->
|
||||
<van-contact-card
|
||||
:type="cardType"
|
||||
:name="currentContact.name"
|
||||
:tel="currentContact.tel"
|
||||
@click="showList = true"
|
||||
></van-contact-card>
|
||||
|
||||
<!-- 联系人列表 -->
|
||||
<van-popup v-model="showList" position="bottom">
|
||||
<van-contact-list
|
||||
v-model="chosenContactId"
|
||||
:list="list"
|
||||
@add="onAdd"
|
||||
@edit="onEdit"
|
||||
@select="onSelect"
|
||||
/>
|
||||
</van-popup>
|
||||
|
||||
<!-- 联系人编辑 -->
|
||||
<van-popup v-model="showEdit" position="bottom">
|
||||
<van-contact-edit
|
||||
:contact-info="editingContact"
|
||||
:is-edit="isEdit"
|
||||
@save="onSave"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
``` javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chosenContactId: null,
|
||||
editingContact: {},
|
||||
showList: false,
|
||||
showEdit: false,
|
||||
isEdit: false,
|
||||
list: [{
|
||||
name: '张三',
|
||||
tel: '13000000000',
|
||||
id: 0
|
||||
}]
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
cardType() {
|
||||
return this.chosenContactId !== null ? 'edit' : 'add';
|
||||
},
|
||||
|
||||
currentContact() {
|
||||
const id = this.chosenContactId;
|
||||
return id !== null ? this.list.filter(item => item.id === id)[0] : {};
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 添加联系人
|
||||
onAdd() {
|
||||
this.editingContact = { id: this.list.length };
|
||||
this.isEdit = false;
|
||||
this.showEdit = true;
|
||||
},
|
||||
|
||||
// 编辑联系人
|
||||
onEdit(item) {
|
||||
this.isEdit = true;
|
||||
this.showEdit = true;
|
||||
this.editingContact = item;
|
||||
},
|
||||
|
||||
// 选中联系人
|
||||
onSelect() {
|
||||
this.showList = false;
|
||||
},
|
||||
|
||||
// 保存联系人
|
||||
onSave(info) {
|
||||
this.showEdit = false;
|
||||
this.showList = false;
|
||||
|
||||
if (this.isEdit) {
|
||||
this.list = this.list.map(item => item.id === info.id ? info : item);
|
||||
} else {
|
||||
this.list.push(info);
|
||||
}
|
||||
this.chosenContactId = info.id;
|
||||
},
|
||||
|
||||
// 删除联系人
|
||||
onDelete(info) {
|
||||
this.showEdit = false;
|
||||
this.list = this.list.filter(item => item.id !== info.id);
|
||||
if (this.chosenContactId === info.id) {
|
||||
this.chosenContactId = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### ContactCard API
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 类型，分为添加和编辑两种样式 | `String` | `add` | `edit` |
|
||||
| addText | 添加时的文案提示 | `String` | `添加订单联系人信息` | - |
|
||||
| name | 联系人姓名 | `String` | - | - |
|
||||
| tel | 联系人手机号 | `String` | - | - |
|
||||
|
||||
### ContactList API
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 当前选中联系人的 id | `String | Number` | - | - |
|
||||
| addText | 新建按钮文案 | `String` | `新建联系人` | - |
|
||||
| list | 联系人列表 | `Array` | `[]` | - |
|
||||
|
||||
### ContactList Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| add | 点击新增按钮时触发 | - |
|
||||
| edit | 点击编辑按钮时触发 | item: 当前联系人对象，index: 索引 |
|
||||
| select | 切换选中的联系人时触发 | item: 当前联系人对象，index: 索引 |
|
||||
|
||||
|
||||
### ContactEdit API
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| contactInfo | 联系人信息 | `Object` | `[]` | - |
|
||||
| isEdit | 是否为编辑联系人 | `Boolean` | `false` | - |
|
||||
| isSaving | 是否显示保存按钮加载动画 | `Boolean` | `false` | - |
|
||||
| isDeleting | 是否显示删除按钮加载动画 | `Boolean` | `false` | - |
|
||||
|
||||
### ContactEdit Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| save | 点击保存按钮时触发 | content：表单内容 |
|
||||
| delete | 点击删除按钮时触发 | content：表单内容 |
|
||||
|
||||
### 数据格式
|
||||
|
||||
#### 联系人数据格式
|
||||
| key | 说明 | 类型 |
|
||||
|-----------|-----------|-----------|
|
||||
| id | 每位联系人的唯一标识 | `String | Number` |
|
||||
| name | 联系人姓名 | `String` |
|
||||
| tel | 联系人手机号 | `String` |
|
||||
@@ -0,0 +1,185 @@
|
||||
<script>
|
||||
import { Toast } from 'packages';
|
||||
|
||||
const coupon = {
|
||||
available: 1,
|
||||
discount: 0,
|
||||
denominations: 150,
|
||||
origin_condition: 0,
|
||||
reason: '',
|
||||
value: 150,
|
||||
condition: '下单立减 1.50 元',
|
||||
name: '新手专用优惠券',
|
||||
start_at: 1489104000,
|
||||
end_at: 1514592000
|
||||
};
|
||||
|
||||
const discountCoupon = {
|
||||
...coupon,
|
||||
discount: 88,
|
||||
denominations: 0,
|
||||
origin_condition: 50,
|
||||
value: 12,
|
||||
condition: '下单即享 8.8 折',
|
||||
};
|
||||
|
||||
const disabledCoupon = {
|
||||
...coupon,
|
||||
avaliable: 0,
|
||||
reason: '未满足使用门槛'
|
||||
};
|
||||
|
||||
const disabledDiscountCoupon = {
|
||||
...discountCoupon,
|
||||
avaliable: 0,
|
||||
reason: '未满足使用门槛'
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showList: false,
|
||||
chosenCoupon: -1,
|
||||
coupons: [coupon, discountCoupon],
|
||||
disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(index) {
|
||||
this.showList = false;
|
||||
this.chosenCoupon = index;
|
||||
},
|
||||
onExchange(code) {
|
||||
Toast('兑换成功');
|
||||
this.coupons.push(coupon);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-coupon {
|
||||
.van-popup {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Coupon 优惠券选择器
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { CouponCell, CouponList } from 'vant';
|
||||
|
||||
Vue.component(CouponCell.name, CouponCell);
|
||||
Vue.component(CouponList.name, CouponList);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<!-- 优惠券单元格 -->
|
||||
<van-coupon-cell
|
||||
:coupons="coupons"
|
||||
:chosen-coupon="chosenCoupon"
|
||||
@click="showList = true"
|
||||
></van-coupon-cell>
|
||||
|
||||
<!-- 优惠券列表 -->
|
||||
<van-popup v-model="showList" position="bottom">
|
||||
<van-coupon-list
|
||||
:coupons="coupons"
|
||||
:chosen-coupon="chosenCoupon"
|
||||
:disabled-coupons="disabledCoupons"
|
||||
@change="onChange"
|
||||
@exchange="onExchange"
|
||||
></van-coupon-list>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```javascript
|
||||
const coupon = {
|
||||
available: 1,
|
||||
discount: 0,
|
||||
denominations: 150,
|
||||
origin_condition: 0,
|
||||
reason: '',
|
||||
value: 150,
|
||||
condition: '下单立减 1.50 元',
|
||||
name: '新手专用优惠券',
|
||||
start_at: 1489104000,
|
||||
end_at: 1514592000
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chosenCoupon: -1,
|
||||
coupons: [coupon],
|
||||
disabledCoupons: [coupon]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(index) {
|
||||
this.showList = false;
|
||||
this.chosenCoupon = index;
|
||||
},
|
||||
onExchange(code) {
|
||||
this.coupons.push(coupon);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
### CouponCell API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | 单元格标题 | `String` | `优惠` | - |
|
||||
| chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
|
||||
| coupons | 可用优惠券列表 | `Array` | `[]` | - |
|
||||
| editable | 能否切换优惠券 | `Boolean` | `true` | - |
|
||||
|
||||
### CouponList API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 是否展示优惠券列表 | `Boolean` | `false` | - |
|
||||
| chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
|
||||
| coupons | 可用优惠券列表 | `Array` | `[]` | - |
|
||||
| disabledCoupons | 不可用优惠券列表 | `Array` | `[]` | - |
|
||||
| exchangeButtonText | 兑换按钮文字 | `String` | `兑换` | - |
|
||||
| exchangeButtonDisabled | 是否禁用兑换按钮 | `Boolean` | `false` | - |
|
||||
| displayedCouponIndex | 滚动至特定优惠券位置 | `Number` | - | - |
|
||||
| closeButtonText | 列表底部按钮文字 | `String` | 不使用优惠 | - |
|
||||
| disabledListTitle | 不可用券列表标题 | `String` | 不可用优惠 | - |
|
||||
| inputPlaceholder | 输入框文字提示 | `String` | 请输入优惠码 | - |
|
||||
|
||||
### CouponList Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 优惠券切换回调 | index, 选中优惠券的索引 |
|
||||
| exchange | 兑换优惠券回调 | code, 兑换码 |
|
||||
|
||||
### 数据格式
|
||||
#### 优惠券字段说明
|
||||
| key | 说明 | 类型 |
|
||||
|-----------|-----------|-----------|
|
||||
| id | 优惠券 id | `String` |
|
||||
| name | 优惠券名称 | `String` |
|
||||
| available | 是否可用, 1:可用,0:不可用 | `Number` |
|
||||
| discount | 折扣（0为满减券）88=>8.8折 | `Number` |
|
||||
| denominations | 面值（0为折扣券）单位分 | `Number` |
|
||||
| origin_condition | 满减条件（0为无门槛，满XX元可用）单位分 | `Number` |
|
||||
| start_at | 卡有效开始时间 | `Number` |
|
||||
| end_at | 卡失效日期 | `Number` |
|
||||
| reason | 不可用原因 | `String` |
|
||||
| value | 订单优惠金额，单位分 | `Number` |
|
||||
| condition | 格式化输出 value | `String` |
|
||||
@@ -0,0 +1,137 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
minHour: 10,
|
||||
maxHour: 20,
|
||||
minDate: new Date(),
|
||||
maxDate: new Date(2019, 10, 1),
|
||||
currentDate1: new Date(2018, 0, 1),
|
||||
currentDate2: null,
|
||||
currentDate3: null
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handlePickerChange(picker) {
|
||||
console.log(picker);
|
||||
},
|
||||
handlePickerCancel() {
|
||||
console.log('picker cancel');
|
||||
},
|
||||
handlePickerConfirm() {
|
||||
console.log('picker confirm');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## DatetimePicker 时间选择
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { DatetimePicker } from 'vant';
|
||||
|
||||
Vue.component(DatetimePicker.name, DatetimePicker);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate1"
|
||||
type="datetime"
|
||||
:min-hour="minHour"
|
||||
:max-hour="maxHour"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
@change="handlePickerChange">
|
||||
</van-datetime-picker>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
minHour: 10,
|
||||
maxHour: 20,
|
||||
minDate: new Date(),
|
||||
maxDate: new Date(2019, 10, 1),
|
||||
currentDate: new Date(2018, 0, 1)
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handlePickerChange(picker) {
|
||||
console.log(picker);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### 选择日期
|
||||
|
||||
:::demo 选择日期
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate2"
|
||||
type="date"
|
||||
:min-hour="minHour"
|
||||
:max-hour="maxHour"
|
||||
:min-date="minDate"
|
||||
@change="handlePickerChange">
|
||||
</van-datetime-picker>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 选择时间
|
||||
|
||||
:::demo 选择时间
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate3"
|
||||
type="time"
|
||||
:min-hour="minHour"
|
||||
:max-hour="maxHour"
|
||||
:min-date="minDate"
|
||||
@change="handlePickerChange">
|
||||
</van-datetime-picker>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | |
|
||||
| type | 组件类型 | String | 'datetime' | 'datetime', 'date', 'time' |
|
||||
| minDate | 可选的最小日期 | Date | 十年前的 1 月 1 日 | |
|
||||
| maxDate | 可选的最大日期 | Date | 十年后的 12 月 31 日 | |
|
||||
| minHour | 可选的最小小时 | Number | 0 | |
|
||||
| maxHour | 可选的最大小时 | Number | 23 | |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 当值变化时触发的事件 | picker 实例 |
|
||||
| confirm | 点击完成按钮时触发的事件 | 当前 value |
|
||||
| cancel | 点击取消按钮时触发的事件 | - |
|
||||
|
||||
### change事件
|
||||
|
||||
在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作：
|
||||
|
||||
| 函数 | 说明 |
|
||||
|-----------|-----------|
|
||||
| getColumnValue(index) | 获取对应列中选中的值 |
|
||||
| setColumnValue(index, value) | 设置对应列中选中的值 |
|
||||
| getColumnValues(index) | 获取对应列中所有的备选值 |
|
||||
| setColumnValues(index, values) | 设置对应列中所有的备选值 |
|
||||
| getValues() | 获取所有列中被选中的值，返回一个数组 |
|
||||
| setValues(values) | `values`为一个数组，设置所有列中被选中的值 |
|
||||
@@ -0,0 +1,132 @@
|
||||
<style>
|
||||
.demo-dialog {
|
||||
.van-button {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { Dialog } from 'packages';
|
||||
|
||||
const message = '弹窗内容';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
onClickAlert() {
|
||||
Dialog.alert({
|
||||
title: '标题',
|
||||
message
|
||||
});
|
||||
},
|
||||
|
||||
onClickAlert2() {
|
||||
Dialog.alert({
|
||||
message
|
||||
});
|
||||
},
|
||||
|
||||
onClickConfirm() {
|
||||
Dialog.confirm({
|
||||
title: '标题',
|
||||
message
|
||||
}).catch(action => {
|
||||
console.log(action);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Dialog 弹出框
|
||||
|
||||
### 使用指南
|
||||
|
||||
```js
|
||||
import { Dialog } from 'vant';
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 消息提示
|
||||
|
||||
用于提示一些消息，只包含一个确认按钮
|
||||
|
||||
:::demo 消息提示
|
||||
```html
|
||||
<van-button @click="onClickAlert">Alert</van-button>
|
||||
<van-button @click="onClickAlert2">无标题 Alert</van-button>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
onClickAlert() {
|
||||
Dialog.alert({
|
||||
title: '标题',
|
||||
message: '弹窗内容'
|
||||
}).then(() => {
|
||||
// on close
|
||||
});
|
||||
},
|
||||
|
||||
onClickAlert2() {
|
||||
Dialog.alert({
|
||||
message: '弹窗内容'
|
||||
}).then(() => {
|
||||
// on close
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### 消息确认
|
||||
|
||||
用于确认消息，包含取消和确认按钮
|
||||
|
||||
:::demo 消息确认
|
||||
```html
|
||||
<van-button @click="onClickConfirm">Confirm</van-button>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
onClickConfirm() {
|
||||
Dialog.confirm({
|
||||
title: '标题',
|
||||
message: '弹窗内容'
|
||||
}).then(() => {
|
||||
// on confirm
|
||||
}).catch(() => {
|
||||
// on cancel
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### 方法
|
||||
|
||||
| 方法名 | 参数 | 返回值 | 介绍 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| Dialog.alert | options | `Promise` | 展示消息提示弹窗 |
|
||||
| Dialog.confirm | options | `Promise` | 展示消息确认弹窗 |
|
||||
| Dialog.close | - | `void` | 关闭弹窗 |
|
||||
|
||||
### Options
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | 标题 | `String` | | |
|
||||
| message | 内容 | `String` | | |
|
||||
| showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` | |
|
||||
| showCancelButton | 是否展示取消按钮 | `Boolean` | `false` | |
|
||||
| confirmButtonText | 确认按钮的文案 | `String` | `确认` | |
|
||||
| cancelButtonText | 取消按钮的文案 | `String` | `取消` | |
|
||||
| overlay | 是否展示蒙层 | `Boolean` | `true` | |
|
||||
| closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | |
|
||||
| lockOnScroll | 是否禁用背景滚动 | `Boolean` | `true` | |
|
||||
@@ -0,0 +1,134 @@
|
||||
<style>
|
||||
.demo-field {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
password: '',
|
||||
username: 'zhangmin',
|
||||
message: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Field 输入框
|
||||
|
||||
表单中`input`或`textarea`的输入框。
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Field } from 'vant';
|
||||
|
||||
Vue.component(Field.name, Field);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
通过 v-model 绑定输入框的值
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field v-model="value" placeholder="请输入用户名"></van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 自定义类型
|
||||
根据`type`属性定义不同类型的输入框
|
||||
|
||||
:::demo 自定义类型
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="username"
|
||||
label="用户名"
|
||||
icon="clear"
|
||||
placeholder="请输入用户名"
|
||||
required
|
||||
@click-icon="username = ''"
|
||||
>
|
||||
</van-field>
|
||||
|
||||
<van-field
|
||||
v-model="password"
|
||||
type="password"
|
||||
label="密码"
|
||||
placeholder="请输入密码"
|
||||
required>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 禁用输入框
|
||||
|
||||
:::demo 禁用输入框
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field value="输入框已禁用" label="用户名" disabled></van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 错误提示
|
||||
|
||||
:::demo 错误提示
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field label="用户名" placeholder="请输入用户名" error></van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 高度自适应
|
||||
对于 textarea，可以通过`autosize`属性设置高度自适应
|
||||
|
||||
:::demo 高度自适应
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="message"
|
||||
label="留言"
|
||||
type="textarea"
|
||||
placeholder="请输入留言"
|
||||
rows="1"
|
||||
autosize
|
||||
>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 输入框类型 | `String` | `text` | `number` `email` <br> `textarea` `tel` <br> `datetime` `date` <br> `password` `url` |
|
||||
| value | 输入框的值 | `String` | - | - |
|
||||
| label | 输入框标签 | `String` | - | - |
|
||||
| disabled | 是否禁用输入框 | `Boolean` | `false` | - |
|
||||
| error | 输入框是否有错误 | `Boolean` | `false` | - |
|
||||
| autosize | 高度自适应(仅支持textarea) | `Boolean` | `false` | - |
|
||||
| icon | 输入框尾部图标 | `String` | - | Icon 组件支持的类型 |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| focus | 输入框聚焦时触发 | - |
|
||||
| blur | 输入框失焦时触发 | - |
|
||||
| click-icon | 点击尾部图标时触发 | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| icon | 自定义icon |
|
||||
@@ -0,0 +1,88 @@
|
||||
<script>
|
||||
import { Toast } from 'packages';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
onClickMiniBtn() {
|
||||
Toast('点击图标');
|
||||
},
|
||||
onClickBigBtn() {
|
||||
Toast('点击按钮');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-goods-action {
|
||||
.van-goods-action {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## GoodsAction 商品页行动点
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import {
|
||||
GoodsAction,
|
||||
GoodsActionBigBtn,
|
||||
GoodsActionMiniBtn
|
||||
} from 'vant';
|
||||
|
||||
Vue.component(GoodsAction.name, GoodsAction);
|
||||
Vue.component(GoodsActionBigBtn.name, GoodsActionBigBtn);
|
||||
Vue.component(GoodsActionMiniBtn.name, GoodsActionMiniBtn);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<van-goods-action>
|
||||
<van-goods-action-mini-btn icon="chat" @click="onClickMiniBtn">
|
||||
客服
|
||||
</van-goods-action-mini-btn>
|
||||
<van-goods-action-mini-btn icon="cart" @click="onClickMiniBtn">
|
||||
购物车
|
||||
</van-goods-action-mini-btn>
|
||||
<van-goods-action-big-btn @click="onClickBigBtn">
|
||||
加入购物车
|
||||
</van-goods-action-big-btn>
|
||||
<van-goods-action-big-btn @click="onClickBigBtn" primary>
|
||||
立即购买
|
||||
</van-goods-action-big-btn>
|
||||
</van-goods-action>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
onClickMiniBtn() {
|
||||
Toast('点击图标');
|
||||
},
|
||||
onClickBigBtn() {
|
||||
Toast('点击按钮');
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
#### GoodsActionMiniBtn
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| icon | 图标 | `String` | - | Icon 组件支持的所有图标 |
|
||||
| iconClass | 图标额外类名 | `String` | `''` | - |
|
||||
| url | 跳转链接 | `String` | `javascript:;` | - |
|
||||
|
||||
#### GoodsActionBigBtn
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| url | 跳转链接 | `String` | `javascript:;` | - |
|
||||
| primary | 是否主行动按钮，主行动按钮默认为红色 | `Boolean` | `false` | - |
|
||||
@@ -0,0 +1,168 @@
|
||||
<style>
|
||||
.demo-icon {
|
||||
font-size: 0;
|
||||
|
||||
.examples {
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.van-col {
|
||||
text-align: center;
|
||||
height: 100px;
|
||||
float: none;
|
||||
display: inline-block;
|
||||
|
||||
.van-icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
display: none;
|
||||
font-size: 32px;
|
||||
margin: 15px 0;
|
||||
color: rgba(69, 90, 100, .8);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
|
||||
const icons = [
|
||||
'close',
|
||||
'location',
|
||||
'clock',
|
||||
'gold-coin',
|
||||
'chat',
|
||||
'exchange',
|
||||
'upgrade',
|
||||
'edit',
|
||||
'contact',
|
||||
'passed',
|
||||
'points',
|
||||
'delete',
|
||||
'records',
|
||||
'logistics',
|
||||
'check',
|
||||
'checked',
|
||||
'gift',
|
||||
'like-o',
|
||||
'like',
|
||||
'qr',
|
||||
'qr-invalid',
|
||||
'shop',
|
||||
'photograph',
|
||||
'add',
|
||||
'add2',
|
||||
'photo',
|
||||
'cart',
|
||||
'arrow',
|
||||
'search',
|
||||
'clear',
|
||||
'success',
|
||||
'fail',
|
||||
'wechat',
|
||||
'alipay',
|
||||
'password-view',
|
||||
'wap-nav',
|
||||
'password-not-view',
|
||||
'wap-home',
|
||||
'ecard-pay',
|
||||
'balance-pay',
|
||||
'peer-pay',
|
||||
'credit-pay',
|
||||
'debit-pay',
|
||||
'other-pay',
|
||||
'cart',
|
||||
'browsing-history',
|
||||
'goods-collect',
|
||||
'shop-collect',
|
||||
'receive-gift',
|
||||
'send-gift',
|
||||
'setting',
|
||||
'coupon',
|
||||
'free-postage',
|
||||
'discount',
|
||||
'birthday-privilege',
|
||||
'member-day-privilege',
|
||||
'balance-details',
|
||||
'cash-back-record',
|
||||
'points-mall',
|
||||
'exchange-record',
|
||||
'pending-payment',
|
||||
'pending-orders',
|
||||
'pending-deliver',
|
||||
'pending-evaluate',
|
||||
'cash-on-deliver',
|
||||
'gift-card-pay',
|
||||
'underway',
|
||||
'point-gift',
|
||||
'after-sale',
|
||||
'edit-data',
|
||||
'question',
|
||||
'description',
|
||||
'card',
|
||||
'gift-card',
|
||||
'coupon',
|
||||
'completed',
|
||||
'value-card'
|
||||
];
|
||||
|
||||
const IconListConstructor = Vue.extend({
|
||||
render(h) {
|
||||
return (
|
||||
<div>
|
||||
{icons.map(icon => (
|
||||
<van-col span="8">
|
||||
<van-icon name={icon}></van-icon>
|
||||
<span>{icon}</span>
|
||||
</van-col>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
});
|
||||
|
||||
export default {
|
||||
mounted() {
|
||||
const IconList = new IconListConstructor({
|
||||
el: document.createElement('div')
|
||||
});
|
||||
const block = document.querySelector('.zan-doc-demo-block');
|
||||
if (block) {
|
||||
block.appendChild(IconList.$el);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Icon 图标
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Icon } from 'vant';
|
||||
|
||||
Vue.component(Icon.name, Icon);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
设置`name`属性为对应的图标名称即可，所有可用的图标名称见右侧列表
|
||||
:::demo 图标列表
|
||||
```html
|
||||
<van-icon name="success" />
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| name | icon名称 | `String` | `''` | - |
|
||||
@@ -0,0 +1,62 @@
|
||||
<style>
|
||||
.demo-image-preview {
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { ImagePreview } from 'packages';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
showImagePreview() {
|
||||
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="showImagePreview">预览图片</van-button>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
showImagePreview() {
|
||||
ImagePreview([
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
]);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### 方法参数
|
||||
|
||||
| 参数名 | 说明 | 类型 |
|
||||
|-----------|-----------|-----------|
|
||||
| imageUrls | 需要预览的图片 | `Array` |
|
||||
@@ -0,0 +1,90 @@
|
||||
<style>
|
||||
.demo-layout {
|
||||
.van-row {
|
||||
padding: 0 15px;
|
||||
}
|
||||
.van-col {
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
background-clip: content-box;
|
||||
|
||||
&:nth-child(odd) {
|
||||
background-color: #39a9ed;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
background-color: #66c6f2;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Layout 布局
|
||||
|
||||
提供了`van-row`和`van-col`两个组件来进行行列布局
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Row, Col } from 'vant';
|
||||
|
||||
Vue.component(Row.name, Row);
|
||||
Vue.component(Col.name, Col);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基本用法
|
||||
|
||||
Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置列所占的宽度百分比
|
||||
此外，添加`offset`属性可以设置列的偏移宽度，计算方式与 span 相同
|
||||
|
||||
:::demo 基本用法
|
||||
```html
|
||||
<van-row>
|
||||
<van-col span="8">span: 8</van-col>
|
||||
<van-col span="8">span: 8</van-col>
|
||||
<van-col span="8">span: 8</van-col>
|
||||
</van-row>
|
||||
|
||||
<van-row>
|
||||
<van-col span="4">span: 4</van-col>
|
||||
<van-col span="10" offset="4">offset: 4, span: 10</van-col>
|
||||
</van-row>
|
||||
|
||||
<van-row>
|
||||
<van-col offset="12" span="12">offset: 12, span: 12</van-col>
|
||||
</van-row>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 设置列元素间距
|
||||
|
||||
通过`gutter`属性可以设置列元素之间的间距，默认间距为 0
|
||||
|
||||
:::demo 在列元素之间增加间距
|
||||
```html
|
||||
<van-row gutter="20">
|
||||
<van-col span="8">span: 8</van-col>
|
||||
<van-col span="8">span: 8</van-col>
|
||||
<van-col span="8">span: 8</van-col>
|
||||
</van-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
#### Row
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| gutter | 列元素之间的间距（单位为px） | `String | Number` | - | - |
|
||||
| prefix | className 前缀 | `String` | `van` | - |
|
||||
|
||||
#### Column
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| span | 列元素宽度 | `String | Number` | - | - |
|
||||
| offset | 列元素偏移距离 | `String | Number` | - | - |
|
||||
| prefix | className 前缀 | `String` | `van` | - |
|
||||
@@ -0,0 +1,145 @@
|
||||
<style>
|
||||
.demo-lazyload {
|
||||
img,
|
||||
div[lazy] {
|
||||
padding: 15px;
|
||||
width: 315px;
|
||||
height: 250px;
|
||||
margin: 10px 15px 0;
|
||||
background-color: white;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
background-size: 315px 250px;
|
||||
background-position: 15px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageList: [
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg',
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg',
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg',
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg'
|
||||
],
|
||||
backgroundImageList: [
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/bac1903e863834ace25773f3554b6890.jpg',
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/138c32d4384b5e4a78dc4e1ba58e6a80.jpg'
|
||||
],
|
||||
componentImageList: [
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/100a7845756a70af2df513bdd1307d0e.jpg',
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/8a4f5be8289cb3a7434fc19a3de780a2.jpg'
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
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
|
||||
<img v-for="img in imageList" v-lazy="img">
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageList: [
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
#### 背景图懒加载
|
||||
|
||||
和图片懒加载不同，背景图懒加载需要使用`v-lazy:background-image`，值设置为背景图片的地址，需要注意的是必须声明容器高度。
|
||||
|
||||
:::demo 背景图懒加载
|
||||
```html
|
||||
<div v-for="img in backgroundImageList" v-lazy:background-image="img" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
backgroundImageList: [
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
#### 懒加载模块
|
||||
|
||||
懒加载模块需要使用到`lazy-component`，将需要懒加载的内容放在`lazy-component`中即可。
|
||||
|
||||
:::demo 懒加载模块
|
||||
```html
|
||||
<lazy-component>
|
||||
<img v-for="img in componentImageList" v-lazy="img">
|
||||
</lazy-component>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
componentImageList: [
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
### Options
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| loading | 加载时的图片 | `String` | - | - |
|
||||
| error | 错误时的图片 | `String` | - | - |
|
||||
| preload | 预加载高度的比例 | `String` | - | - |
|
||||
| attempt | 尝试次数 | `Number` | `3` | |
|
||||
| listenEvents | 监听的事件 | `Array` | `scroll`等 | - |
|
||||
| adapter | 适配器 | `Object` | - | - |
|
||||
| filter | 图片url过滤 | `Object` | - | - |
|
||||
| lazyComponent | 是否能懒加载模块 | `Boolean` | `false` | - |
|
||||
|
||||
更多内容请参照：[ vue-lazyload 官方文档](https://github.com/hilongjw/vue-lazyload)
|
||||
@@ -0,0 +1,44 @@
|
||||
<style>
|
||||
.demo-loading {
|
||||
.van-loading {
|
||||
display: inline-block;
|
||||
margin: 10px 0 10px 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Loading 加载
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Loading } from 'vant';
|
||||
|
||||
Vue.component(Loading.name, Loading);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 单色 spinner
|
||||
|
||||
:::demo 单色 spinner
|
||||
```html
|
||||
<van-loading type="circle" color="black"></van-loading>
|
||||
<van-loading type="circle" color="white"></van-loading>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 渐变色 spinner
|
||||
|
||||
:::demo 渐变色 spinner
|
||||
```html
|
||||
<van-loading type="gradient-circle" color="black"></van-loading>
|
||||
<van-loading type="gradient-circle" color="white"></van-loading>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| color | 颜色 | `String` | `black` | `black` `white` |
|
||||
| type | 类型 | `String` | `gradient-circle` | `gradient-circle` `circle` |
|
||||
@@ -0,0 +1,52 @@
|
||||
## NavBar 导航栏
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { NavBar } from 'vant';
|
||||
|
||||
Vue.component(NavBar.name, NavBar);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-nav-bar
|
||||
title="标题"
|
||||
left-text="返回"
|
||||
right-text="按钮"
|
||||
left-arrow
|
||||
/>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 高级用法
|
||||
通过 slot 定制内容
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<van-nav-bar title="标题" left-text="返回" left-arrow>
|
||||
<van-icon name="search" slot="right" />
|
||||
</van-nav-bar>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### API
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | 标题 | `String` | `''` | - |
|
||||
| left-text | 左侧文案 | `String` | `''` | - |
|
||||
| right-text | 右侧文案 | `String` | `''` | - |
|
||||
| left-arrow | 是否显示左侧箭头 | `Boolean` | `false` | - |
|
||||
| fixed | 是否固定在顶部 | `Boolean` | `false` | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| title | 自定义标题 |
|
||||
| left | 自定义左侧区域内容 |
|
||||
| right | 自定义右侧区域内容 |
|
||||
@@ -0,0 +1,69 @@
|
||||
<style>
|
||||
.demo-notice-bar {
|
||||
.van-notice-bar:not(:first-of-type) {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## NoticeBar 通告栏
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { NoticeBar } from 'vant';
|
||||
|
||||
Vue.component(NoticeBar.name, NoticeBar);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-notice-bar text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。" />
|
||||
```
|
||||
:::
|
||||
|
||||
#### 禁用滚动
|
||||
文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动
|
||||
|
||||
:::demo 禁用滚动
|
||||
```html
|
||||
<van-notice-bar :scrollable="false">
|
||||
足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
|
||||
</van-notice-bar>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 通告栏模式
|
||||
默认模式为空，支持`closeable`和`link`。
|
||||
|
||||
:::demo 通告栏模式
|
||||
```html
|
||||
<!-- closeable 模式，在右侧显示关闭按钮 -->
|
||||
<van-notice-bar mode="closeable">
|
||||
足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
|
||||
</van-notice-bar>
|
||||
|
||||
<!-- link 模式，在右侧显示链接箭头 -->
|
||||
<van-notice-bar mode="link">
|
||||
足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
|
||||
</van-notice-bar>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| mode | 通告栏模式 | String | `''` | `closeable` `link` |
|
||||
| delay | 动画延迟时间，单位秒 | Number | `1` | - |
|
||||
| speed | 滚动速率，单位px | Number | `40` | - |
|
||||
| scrollable | 是否滚动 | Boolean | `true` | - |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| click | 点击事件回调 | - |
|
||||
@@ -0,0 +1,101 @@
|
||||
<style>
|
||||
.demo-number-keyboard {
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { Toast } from 'packages';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showKeyboard: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(value) {
|
||||
Toast('Input: ' + value);
|
||||
},
|
||||
onDelete() {
|
||||
Toast('Delete');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## NumberKeyboard 数字键盘
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { NumberKeyboard } from 'vant';
|
||||
|
||||
Vue.component(NumberKeyboard.name, NumberKeyboard);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-button @touchstart.native.stop="showKeyboard = true">
|
||||
弹出键盘
|
||||
</van-button>
|
||||
|
||||
<van-button @touchstart.native.stop="showKeyboard = false">
|
||||
收起键盘
|
||||
</van-button>
|
||||
|
||||
<van-number-keyboard
|
||||
:show="showKeyboard"
|
||||
@blur="showKeyboard = false"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showKeyboard: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(value) {
|
||||
Toast(value);
|
||||
},
|
||||
onDelete() {
|
||||
Toast('delete');
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| show | 是否显示键盘 | `Boolean` | - | - |
|
||||
| title | 键盘标题 | `String` | `安全输入键盘` | - |
|
||||
| extraKey | 左下角按键内容 | `String` | `''` | - |
|
||||
| zIndex | 键盘 z-index | `Number` | `100` | - |
|
||||
| transition | 是否开启过场动画 | `Boolean` | `true` | - |
|
||||
| showDeleteKey | 是否展示删除按钮 | `Boolean` | `true` | - |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| input | 点击按键时触发 | key: 按键内容 |
|
||||
| delete | 点击删除键时触发 | - |
|
||||
| blur | 点击非键盘区域时触发 | - |
|
||||
| show | 键盘完全弹出时触发 | - |
|
||||
| hide | 键盘完全收起时触发 | - |
|
||||
@@ -0,0 +1,69 @@
|
||||
<style>
|
||||
.demo-panel {
|
||||
.van-panel__footer {
|
||||
text-align: right;
|
||||
|
||||
.van-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.van-panel__content {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Panel 面板
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Panel } from 'vant';
|
||||
|
||||
Vue.component(Panel.name, Panel);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
面板只是一个容器，里面可以放入自定义的内容
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-panel title="标题" desc="标题描述" status="状态">
|
||||
<div>Panel内容</div>
|
||||
</van-panel>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 高级用法
|
||||
使用`slot`自定义内容
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<van-panel title="标题" desc="标题描述" status="状态">
|
||||
<div>Panel内容</div>
|
||||
<div 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,88 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
showKeyboard: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(key) {
|
||||
this.value = (this.value + key).slice(0, 6);
|
||||
},
|
||||
onDelete() {
|
||||
this.value = this.value.slice(0, this.value.length - 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## PasswordInput 密码输入框
|
||||
密码输入框组件通常与 [数字键盘](/zanui/vue/component/number-keyboard) 组件配合使用
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { PasswordInput, NumberKeyBoard } from 'vant';
|
||||
|
||||
Vue.component(PasswordInput.name, PasswordInput);
|
||||
Vue.component(NumberKeyBoard.name, NumberKeyBoard);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<!-- 密码输入框 -->
|
||||
<van-password-input
|
||||
:value="value"
|
||||
info="密码为 6 位数字"
|
||||
@focus="showKeyboard = true"
|
||||
></van-password-input>
|
||||
|
||||
<!-- 数字键盘 -->
|
||||
<van-number-keyboard
|
||||
:show="showKeyboard"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
@blur="showKeyboard = false"
|
||||
></van-number-keyboard>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
showKeyboard: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(key) {
|
||||
this.value = (this.value + key).slice(0, 6);
|
||||
},
|
||||
onDelete() {
|
||||
this.value = this.value.slice(0, this.value.length - 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| value | 密码值 | `String` | `''` | - |
|
||||
| length | 密码长度 | `Number` | `6` | - |
|
||||
| info | 输入框下方提示 | `String` | - | - |
|
||||
| errorInfo | 输入框下方错误提示 | `String` | - | - |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| focus | 输入框聚焦时触发 | - |
|
||||
@@ -0,0 +1,173 @@
|
||||
<script>
|
||||
const citys = {
|
||||
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
|
||||
'福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
|
||||
'湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: '地区选择',
|
||||
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 选择器
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Picker } from 'vant';
|
||||
|
||||
Vue.component(Picker.name, Picker);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-picker :columns="pickerColumns" @change="handlePickerChange"></van-picker>
|
||||
```
|
||||
|
||||
```javascript
|
||||
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]]);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### 带toolbar的Picker
|
||||
|
||||
:::demo 带toolbar的Picker
|
||||
```html
|
||||
<van-picker
|
||||
:title="title"
|
||||
:columns="pickerColumns"
|
||||
show-toolbar
|
||||
@change="handlePickerChange"
|
||||
@cancel="handlePickerCancel"
|
||||
@confirm="handlePickerConfirm"
|
||||
></van-picker>
|
||||
```
|
||||
|
||||
```javascript
|
||||
const citys = {
|
||||
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
|
||||
'福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
|
||||
'湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: '地区选择',
|
||||
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');
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| visibileColumnCount | 每一列可见备选元素的个数 | `Number` | `5` | |
|
||||
| itemHeight | 选中元素区高度 | `Number` | `44` | |
|
||||
| columns | 对象数组，配置每一列显示的数据 | `Array` | | |
|
||||
| showToolbar | 是否在组件顶部显示一个toolbar | `Boolean` | `true` | |
|
||||
| title | 在toolbar上显示的标题文字 | `String` | | |
|
||||
|
||||
### 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,172 @@
|
||||
<style>
|
||||
.demo-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 Dialog from 'packages/dialog';
|
||||
|
||||
export default {
|
||||
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 弹出层
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Popup } from 'vant';
|
||||
|
||||
Vue.component(Popup.name, 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>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
popupShow1: false
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### 从不同位置弹出层
|
||||
|
||||
可以设置`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>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
popupShow1: false,
|
||||
popupShow2: false,
|
||||
popupShow3: false,
|
||||
popupShow4: false
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
popupShow2(val) {
|
||||
if (val) {
|
||||
setTimeout(() => {
|
||||
this.popupShow2 = false;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 当前组件是否显示 | `Boolean` | `false` | - |
|
||||
| overlay | 是否显示背景遮罩层 | `Boolean` | `true` | - |
|
||||
| lockOnScroll | 背景是否跟随滚动 | `Boolean` | `false` | - |
|
||||
| position | 弹出层位置 | `String` | - | `top`, `bottom`, `right`, `left` |
|
||||
| closeOnClickOverlay | 点击遮罩层是否关闭弹出层 | `Boolean` | `true` | - |
|
||||
| transition | 弹出层的`transition` | `String` | `popup-slide` | |
|
||||
| preventScroll | 是否防止滚动穿透 | `Boolean` | `false` | - |
|
||||
@@ -0,0 +1,64 @@
|
||||
<style>
|
||||
.demo-progress {
|
||||
.van-progress {
|
||||
margin: 20px 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Progress 进度条
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Progress } from 'vant';
|
||||
|
||||
Vue.component(Progress.name, Progress);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
进度条默认为蓝色，使用`percentage`属性来设置当前进度
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-progress :percentage="0"></van-progress>
|
||||
<van-progress :percentage="46"></van-progress>
|
||||
<van-progress :percentage="100"></van-progress>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
#### 进度条置灰
|
||||
|
||||
:::demo 进度条置灰
|
||||
```html
|
||||
<van-progress inactive :percentage="0"></van-progress>
|
||||
<van-progress inactive :percentage="46"></van-progress>
|
||||
<van-progress inactive :percentage="100"></van-progress>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
#### 样式定制
|
||||
|
||||
可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
|
||||
|
||||
:::demo 样式定制
|
||||
```html
|
||||
<van-progress pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
|
||||
<van-progress pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
|
||||
<van-progress pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| inactive | 是否置灰 | `Boolean` | `false` | |
|
||||
| percentage | 进度百分比 | `Number` | `false` | `0-100` |
|
||||
| pivotText | 文字显示 | `String` | 百分比文字 | - |
|
||||
| color | 进度条颜色 | `String` | `#38f` | hexvalue |
|
||||
| textColor | 进度条文字颜色 | `String` | `#fff` | hexvalue |
|
||||
@@ -0,0 +1,115 @@
|
||||
<style>
|
||||
.demo-pull-refresh {
|
||||
.zan-doc-demo-block__title,
|
||||
.zan-doc-demo-block__subtitle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.van-pull-refresh {
|
||||
height: 450px;
|
||||
background-color: #fff;
|
||||
|
||||
.zan-doc-demo-block__title {
|
||||
display: block;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 10px 0 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { Toast } from 'packages';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
count: 0,
|
||||
isLoading: false
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
isLoading() {
|
||||
if (this.isLoading) {
|
||||
setTimeout(() => {
|
||||
Toast('刷新成功');
|
||||
this.isLoading = false;
|
||||
this.count++;
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
const head = document.querySelector('.van-pull-refresh__head');
|
||||
head.insertAdjacentHTML('afterend', '<h1 class="zan-doc-demo-block__title">PullRefresh 下拉刷新</h1>');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## PullRefresh 下拉刷新
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { PullRefresh } from 'vant';
|
||||
|
||||
Vue.component(PullRefresh.name, PullRefresh);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<!-- 通过 v-model 控制加载状态 -->
|
||||
<van-pull-refresh v-model="isLoading">
|
||||
<p>刷新次数: {{ count }}</p>
|
||||
</van-pull-refresh>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
count: 0,
|
||||
isLoading: false
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
isLoading() {
|
||||
if (this.isLoading) {
|
||||
setTimeout(() => {
|
||||
Toast('刷新成功');
|
||||
this.isLoading = false;
|
||||
this.count++;
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 是否在加载中 | `Boolean` | - | - |
|
||||
| pullingText | 下拉过程中顶部文案 | `String` | `下拉即可刷新...` | - |
|
||||
| loosingText | 释放过程中顶部文案 | `String` | `释放即可刷新...` | - |
|
||||
| loadingText | 加载过程中顶部文案 | `String` | `加载中...` | - |
|
||||
| animationDuration | 动画时长 | `Number` | `300` | - |
|
||||
| headHeight | 顶部内容高度 | `Number` | `50` | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| - | 自定义内容 |
|
||||
| normal | 非下拉状态时顶部内容 |
|
||||
| pulling | 下拉过程中顶部内容 |
|
||||
| loosing | 释放过程中顶部内容 |
|
||||
| loading | 加载过程中顶部内容 |
|
||||
@@ -0,0 +1,77 @@
|
||||
## Vant
|
||||
|
||||
基于`Vue 2.0`的 Mobile 组件库
|
||||
|
||||
### 安装
|
||||
|
||||
```shell
|
||||
npm i vant -S
|
||||
```
|
||||
|
||||
### 引入组件
|
||||
|
||||
#### 方式一. 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐)
|
||||
```bash
|
||||
# 安装 babel-plugin-import 插件
|
||||
npm i babel-plugin-import -D
|
||||
```
|
||||
|
||||
```js
|
||||
// 在 .babelrc 或 babel-loader 中添加插件配置
|
||||
{
|
||||
"plugins": [
|
||||
["import", { "libraryName": "vant", "style": true }]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
接着你可以在代码中直接引入 Vant 组件，插件会自动将代码转化为方式二中的按需引入形式。
|
||||
|
||||
```js
|
||||
import { Button } from 'vant';
|
||||
```
|
||||
|
||||
#### 方式二. 按需引入组件
|
||||
|
||||
```js
|
||||
import { Button } from 'vant/lib/button';
|
||||
import 'vant/lib/vant-css/button.css';
|
||||
```
|
||||
|
||||
#### 方式三. 导入所有组件
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import Vant from 'vant';
|
||||
import 'vant/lib/vant-css/index.css';
|
||||
|
||||
Vue.use(Vant);
|
||||
```
|
||||
|
||||
### 自定义主题
|
||||
|
||||
`Vant`提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者部分样式，可以使用下面的方法：
|
||||
|
||||
#### 下载主题
|
||||
|
||||
可以通过 Github 或 npm 来下载主题：
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm i vant-css -D
|
||||
|
||||
# github
|
||||
git clone git@github.com:youzan/vant.git
|
||||
cd packages/vant-css
|
||||
```
|
||||
|
||||
#### 修改主题
|
||||
|
||||
修改你下载主题对应的样式即可，然后引入你修改后的主题。
|
||||
|
||||
### vue-cli 模板
|
||||
可以使用`vue-cli`来初始化`Vant`的通用模板：
|
||||
|
||||
```shell
|
||||
vue init youzan/vue-cli-template-vant projectName
|
||||
```
|
||||
@@ -0,0 +1,149 @@
|
||||
<style>
|
||||
.demo-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 单选框
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Radio } from 'vant';
|
||||
|
||||
Vue.component(Radio.name, Radio);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
通过`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>
|
||||
```
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio1: '1'
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### 禁用状态
|
||||
|
||||
设置`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>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio2: '2'
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### 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>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio3: '1'
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### 与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>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio4: '1'
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### Radio API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | 是否禁用单选框 | `Boolean` | `false` | |
|
||||
| name | 根据这个来判断radio是否选中 | `Boolean` | `false` | |
|
||||
|
||||
### RadioGroup API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | 是否禁用单选框 | `Boolean` | `false` | |
|
||||
|
||||
### RadioGroup Event
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|
||||
@@ -0,0 +1,95 @@
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
goSearch(value) {
|
||||
alert(value)
|
||||
},
|
||||
handleChange(value) {
|
||||
console.log(value);
|
||||
},
|
||||
handleCancel() {
|
||||
alert('cancel');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Search 搜索
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Search } from 'vant';
|
||||
|
||||
Vue.component(Search.name, Search);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
如果你只需要在搜索时有个回调，只要监听一个`search`事件。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-search placeholder="商品名称" @search="goSearch"></van-search>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
goSearch(value) {
|
||||
alert(value)
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### 微杂志页搜索样式
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-search placeholder="搜索商品" type="showcase"></van-search>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 监听对应事件
|
||||
|
||||
除了`search`事件，还有`change`和`cancel`事件，`change`事件在`input`输入框每次`change`时触发，适用于实时搜索等，`cancel`在取消按钮点击时触发。
|
||||
|
||||
:::demo 监听对应事件
|
||||
```html
|
||||
<van-search placeholder="商品名称" @search="goSearch" @change="handleChange" @cancel="handleCancel"></van-search>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
goSearch(value) {
|
||||
alert(value)
|
||||
},
|
||||
handleChange(value) {
|
||||
console.log(value);
|
||||
},
|
||||
handleCancel() {
|
||||
alert('cancel');
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| placeholder | `input`的`placeholder`文案 | `String` | | |
|
||||
| type | 搜索样式类型 | `String` | `normal` | `normal`：普通样式，`showcase`：微杂志页样式 |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | `input`输入框每次`change`时触发，适用于实时搜索等 | value：当前`input`输入框的值 |
|
||||
| cancel | 取消搜索 | |
|
||||
| search | 确定搜索 | value：当前`input`输入框的值 |
|
||||
@@ -0,0 +1,233 @@
|
||||
## Sku 商品购买组件
|
||||
|
||||
<script>
|
||||
import data from '../../mock/sku';
|
||||
|
||||
const goods = data.goods_info;
|
||||
goods.picture = goods.picture[0];
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showBase: false,
|
||||
showCustomAction: false,
|
||||
sku: data.sku,
|
||||
goods: goods,
|
||||
goodsId: data.goods_id,
|
||||
quota: data.quota,
|
||||
quotaUsed: data.quota_used,
|
||||
disableStepperInput: true,
|
||||
resetStepperOnHide: true,
|
||||
initialSku: {
|
||||
s1: '30349',
|
||||
s2: '1193'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleBuyClicked(data) {
|
||||
alert(JSON.stringify(data));
|
||||
},
|
||||
handleAddCartClicked(data) {
|
||||
alert(JSON.stringify(data));
|
||||
},
|
||||
handlePointClicked() {
|
||||
alert('积分兑换');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.sku-container {
|
||||
padding: 0 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
### 使用指南
|
||||
```javascript
|
||||
import { Sku } from 'vant';
|
||||
|
||||
Vue.component(Sku.name, Sku);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
#### 基础用法
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<div class="sku-container">
|
||||
<van-sku
|
||||
v-model="showBase"
|
||||
:sku="sku"
|
||||
:goods="goods"
|
||||
:goods-id="goodsId"
|
||||
:hide-stock="sku.hide_stock"
|
||||
:quota="quota"
|
||||
:quota-used="quotaUsed"
|
||||
:reset-stepper-on-hide="resetStepperOnHide"
|
||||
:disable-stepper-input="disableStepperInput"
|
||||
@buy-clicked="handleBuyClicked"
|
||||
@add-cart="handleAddCartClicked"
|
||||
>
|
||||
</van-sku>
|
||||
<van-button type="primary" @click="showBase = true" block>基础用法</van-button>
|
||||
</d>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 自定义sku slot区块
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<div class="sku-container">
|
||||
<van-sku
|
||||
v-model="showCustomAction"
|
||||
stepper-title="我要买"
|
||||
:sku="sku"
|
||||
:goods="goods"
|
||||
:goods-id="goodsId"
|
||||
:hide-stock="sku.hide_stock"
|
||||
:show-add-cart-btn="true"
|
||||
:quota="quota"
|
||||
:quota-used="quotaUsed"
|
||||
:reset-stepper-on-hide="true"
|
||||
:initial-sku="initialSku"
|
||||
@buy-clicked="handleBuyClicked"
|
||||
@add-cart="handleAddCartClicked"
|
||||
>
|
||||
<!-- 隐藏sku messages -->
|
||||
<template slot="sku-messages"></template>
|
||||
<!-- 自定义sku actions -->
|
||||
<template slot="sku-actions" scope="props">
|
||||
<div class="van-sku-actions">
|
||||
<button class="van-sku__add-cart-btn" @click="handlePointClicked">
|
||||
积分兑换
|
||||
</button>
|
||||
<!-- 直接触发sku内部事件，通过内部事件执行handleBuyClicked回调 -->
|
||||
<button class="van-sku__buy-btn" @click="props.skuEventBus.$emit('sku:buy')">
|
||||
买买买
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</van-sku>
|
||||
<van-button type="primary" @click="showCustomAction = true" block>自定义sku actions</van-button>
|
||||
</d>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 是否显示sku | Boolean | false | 是 |
|
||||
| sku | 商品sku数据 | Object | - | 是 |
|
||||
| goods | 商品信息 | Object | - | 是 |
|
||||
| goodsId | 商品id | String/Number | - | 是 |
|
||||
| hideStock | 是否显示商品剩余库存 | Boolean | false | 否 |
|
||||
| showAddCartBtn | 是否显示加入购物车按钮 | Boolean | true | 否 |
|
||||
| quota | 限购数(0表示不限购) | Number | 0 | 否 |
|
||||
| quotaUsed | 已经购买过的数量 | Number | 0 | 否 |
|
||||
| resetStepperOnHide | 窗口隐藏时重置选择的商品数量 | Boolean | false | 否 |
|
||||
| disableStepperInput | 是否禁用sku中stepper的input框 | Boolean | false | 否 |
|
||||
| stepperTitle | 数量选择组件左侧文案 | String | '购买数量' | 否 |
|
||||
| add-cart | 点击添加购物车回调 | Function(skuData: Object) | - | 否 |
|
||||
| buy-clicked | 点击购买回调 | Function(skuData: Object) | - | 否 |
|
||||
|
||||
### slots
|
||||
sku组件默认划分好了若干区块，这些区块都定义成了slot，可以按需进行替换。区块顺序见下表：
|
||||
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| sku-header | 商品信息展示区，包含商品图片、名称、价格等信息 |
|
||||
| sku-group | 商品sku展示区 |
|
||||
| extra-sku-group | 额外商品sku展示区，一般用不到 |
|
||||
| sku-stepper | 商品数量选择区 |
|
||||
| sku-messages | 商品留言区 |
|
||||
| sku-actions | 操作按钮区 |
|
||||
|
||||
### 数据结构
|
||||
#### sku对象结构
|
||||
```javascript
|
||||
"sku": {
|
||||
// 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
|
||||
// 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
|
||||
"tree": [{
|
||||
"k": "颜色", // skuKeyName：规格类目名称
|
||||
"v": [{
|
||||
"id": "30349", // skuValueId：规格值id
|
||||
"name": "红色", // skuValueName：规格值名称
|
||||
"imgUrl": "https:\/\/img.yzcdn.cn\/upload_files\/2017\/02\/21\/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg" // 规格类目图片，只有第一个规格类目可以定义图片
|
||||
}, {
|
||||
"id": "1215",
|
||||
"name": "蓝色",
|
||||
"imgUrl": "https:\/\/img.yzcdn.cn\/upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg"
|
||||
}],
|
||||
"k_s": "s1" // skuKeyStr：sku组合列表（下方list）中当前类目对应的key值，value值会是从属于当前类目的一个规格值id
|
||||
}, ...],
|
||||
// 所有sku的组合列表，比如红色、M码为一个sku组合，红色、S码为另一个组合
|
||||
"list": [{
|
||||
"id": 2259, // skuId，下单时后端需要
|
||||
"price": 100, // 价格（单位分）
|
||||
"s1": "1215", // 规格类目k_s为s1的对应规格值id
|
||||
"s2": "1193", // 规格类目k_s为s2的对应规格值id
|
||||
"s3": "0", // 最多包含3个规格值，为0表示不存在该规格
|
||||
"stock_num": 110 // 当前sku组合对应的库存
|
||||
}, ...],
|
||||
"price": "1.00", // 默认价格（单位元）后端单位暂时有点不统一
|
||||
"stock_num": 227, // 商品总库存
|
||||
"collection_id": 2261, // 无规格商品skuId取collection_id，否则取所选sku组合对应的id
|
||||
"none_sku": false, // 是否无规格商品
|
||||
"messages": [{ // 商品留言
|
||||
"datetime": "0", // 留言类型为time时，是否含日期。“1”表示包含
|
||||
"multiple": "0", // 留言类型为text时，是否多行文本。“1”表示多行
|
||||
"name": "留言", // 留言名称
|
||||
"type": "text", // 留言类型，可选id_no（身份证）, text, tel, date, time, email
|
||||
"required": "1" // 是否必填 “1”表示必填
|
||||
}, ...],
|
||||
"hide_stock": false // 是否隐藏剩余库存
|
||||
},
|
||||
```
|
||||
|
||||
#### goods对象结构
|
||||
```javascript
|
||||
"goods": {
|
||||
// 商品标题
|
||||
"title": "测试商品",
|
||||
// 默认商品sku缩略图
|
||||
"picture": "https:\/\/img.yzcdn.cn\/upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2\/2\/w\/100\/h\/100\/q\/75\/format\/webp"
|
||||
},
|
||||
```
|
||||
|
||||
#### 添加购物车和点击购买回调函数接收的skuData对象结构
|
||||
```javascript
|
||||
skuData: {
|
||||
// 商品id
|
||||
goodsId:"946755",
|
||||
// 留言信息
|
||||
messages: {
|
||||
message_0:"12",
|
||||
message_1:"",
|
||||
... // 有几个留言就有几条
|
||||
},
|
||||
// 另一种格式的留言，key不同
|
||||
cartMessages: {
|
||||
'留言1': 'xxxx',
|
||||
... // key是message的name
|
||||
},
|
||||
// 选择的商品数量
|
||||
selectedNum:1,
|
||||
// 选择的sku组合
|
||||
selectedSkuComb: {
|
||||
id:2257,
|
||||
price:100,
|
||||
s1:"30349",
|
||||
s2:"1193",
|
||||
s3:"0",
|
||||
stock_num:111
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,80 @@
|
||||
<style>
|
||||
.demo-stepper {
|
||||
.van-stepper {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.curr-stepper {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
stepper1: 1,
|
||||
stepper2: null,
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Stepper 步进器
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Stepper } from 'vant';
|
||||
|
||||
Vue.component(Stepper.name, Stepper);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-stepper v-model="stepper1"></van-stepper>
|
||||
<p class="curr-stepper">当前值：{{ stepper1 }}</p>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 禁用状态
|
||||
通过设置`disabled`属性来禁用 stepper
|
||||
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<van-stepper v-model="stepper1" disabled></van-stepper>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 高级用法
|
||||
|
||||
默认是每次加减为1，可以对组件设置`step`、`min`、`max`、`defaultValue`属性
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<van-stepper v-model="stepper2" min="5" max="40" step="2" default-value="9"></van-stepper>
|
||||
<p class="curr-stepper">当前值：{{ stepper2 || 9 }}</p>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| min | 最小值 | `String | Number` | `1` | - |
|
||||
| max | 最大值 | `String | Number` | - | - |
|
||||
| defaultValue | 默认值 | `String | Number` | `1` | - |
|
||||
| step | 步数 | `String | Number` | `1` | - |
|
||||
| disabled | 是否禁用 | `Boolean` | `false` | - |
|
||||
| disableInput | 是否禁用input框 | `Boolean` | `false` | - |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|
||||
| overlimit | 点击不可用的按钮时触发 | - |
|
||||
@@ -0,0 +1,161 @@
|
||||
<style>
|
||||
.demo-steps {
|
||||
.steps-success,
|
||||
.van-icon-location {
|
||||
color: #06bf04;
|
||||
}
|
||||
|
||||
.van-button {
|
||||
margin: 15px 0 0 15px;
|
||||
}
|
||||
|
||||
.van-steps__message + p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p,
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: inherit;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
nextStep() {
|
||||
this.active = ++this.active % 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## Steps 步骤条
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Step, Steps } from 'vant';
|
||||
|
||||
Vue.component(Step.name, Step);
|
||||
Vue.component(Steps.name, Steps);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-steps :active="active">
|
||||
<van-step>买家下单</van-step>
|
||||
<van-step>商家接单</van-step>
|
||||
<van-step>买家提货</van-step>
|
||||
<van-step>交易完成</van-step>
|
||||
</van-steps>
|
||||
|
||||
<van-button @click="nextStep">下一步</van-button>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
nextStep() {
|
||||
this.active = ++this.active % 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
#### 物流描述
|
||||
|
||||
通过`title`和`description`属性来定义物流描述信息
|
||||
|
||||
:::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>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 竖向步骤条
|
||||
|
||||
可以通过设置`direction`属性来改变步骤条的显示方式
|
||||
|
||||
:::demo 竖向步骤条
|
||||
```html
|
||||
<van-steps direction="vertical" :active="0" active-color="#f60">
|
||||
<van-step>
|
||||
<h3>【城市】物流状态1</h3>
|
||||
<p>2016-07-12 12:40</p>
|
||||
</van-step>
|
||||
<van-step>
|
||||
<h3>【城市】物流状态2</h3>
|
||||
<p>2016-07-11 10:00</p>
|
||||
</van-step>
|
||||
<van-step>
|
||||
<h3>快件已发货</h3>
|
||||
<p>2016-07-10 09:30</p>
|
||||
</van-step>
|
||||
</van-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
### 高级用法
|
||||
使用`slot`增加自定义内容
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<van-steps :active="active" title="等待商家发货">
|
||||
<van-icon slot="icon" name="location"></van-icon>
|
||||
<p slot="message-extra">物流进度</p>
|
||||
<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` | | |
|
||||
| direction | 显示方向 | `String` | `horizontal` | `vertical` |
|
||||
| activeColor | active状态颜色 | `String` | `#06bf04` | |
|
||||
|
||||
### Steps Slot
|
||||
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| icon | 自定义icon区域 |
|
||||
| message-extra | 状态栏添加额外的元素 |
|
||||
@@ -0,0 +1,115 @@
|
||||
## SubmitBar 提交订单栏
|
||||
|
||||
<script>
|
||||
import { Toast } from 'packages';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
onClickButton() {
|
||||
Toast('点击按钮');
|
||||
},
|
||||
onClickEditAddress() {
|
||||
Toast('修改地址');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-submit-bar {
|
||||
.van-submit-bar {
|
||||
position: relative;
|
||||
}
|
||||
.van-edit-address {
|
||||
color: #38F;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { SubmitBar } from 'vant';
|
||||
|
||||
Vue.component(SubmitBar.name, SubmitBar);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-submit-bar
|
||||
:price="3050"
|
||||
button-text="提交订单"
|
||||
@submit="onClickButton"
|
||||
/>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 禁用状态
|
||||
禁用状态下不会触发`submit`事件
|
||||
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<van-submit-bar
|
||||
disabled
|
||||
:price="3050"
|
||||
button-text="提交订单"
|
||||
tip="您的收货地址不支持同城送, 我们已为您推荐快递"
|
||||
@submit="onClickButton"
|
||||
/>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 加载状态
|
||||
加载状态下不会触发`submit`事件
|
||||
:::demo 加载状态
|
||||
```html
|
||||
<van-submit-bar
|
||||
loading
|
||||
:price="3050"
|
||||
button-text="提交订单"
|
||||
@submit="onClickButton"
|
||||
/>
|
||||
```
|
||||
:::
|
||||
|
||||
####
|
||||
提示文案中的额外操作和说明
|
||||
:::demo 提示文案中添加操作
|
||||
```html
|
||||
<van-submit-bar
|
||||
:price="3050"
|
||||
button-text="提交订单"
|
||||
@submit="onClickButton"
|
||||
>
|
||||
<span slot="tip">
|
||||
您的收货地址不支持同城送, <span class="van-edit-address" @click="onClickEditAddress">修改地址 ></span>
|
||||
</span>
|
||||
</van-submit-bar>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| price | 价格（单位分） | `Number` | | 是 |
|
||||
| button-text | 按钮文字 | `String` | | 是 |
|
||||
| button-type | 按钮类型 | `String` | `danger` | 否 |
|
||||
| tip | 提示文案 | `String` | | 否 |
|
||||
| disabled | 是否禁用按钮 | `Boolean` | `false` | 否 |
|
||||
| loading | 是否显示加载中的按钮 | `Boolean` | `false` | 否 |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| submit | 按钮点击事件回调 | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| tip | 提示文案中的额外操作和说明 |
|
||||
@@ -0,0 +1,146 @@
|
||||
<style>
|
||||
.demo-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 轮播
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Swipe, SwipeItem } from 'vant';
|
||||
|
||||
Vue.component(Swipe.name, Swipe);
|
||||
Vue.component(SwipeItem.name, SwipeItem);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-swipe>
|
||||
<van-swipe-item v-for="(img, index) in images" :key="index">
|
||||
<a href="https://youzan.com" target="_blank">
|
||||
<img v-lazy="img" alt="">
|
||||
</a>
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
```
|
||||
|
||||
```javascript
|
||||
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'
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### 隐藏指示器
|
||||
|
||||
需要设置`show-indicators`属性为`false`，即会隐藏指示器。
|
||||
|
||||
:::demo 隐藏指示器
|
||||
```html
|
||||
<van-swipe :show-indicators="false">
|
||||
<van-swipe-item v-for="(img, index) in autoImages" :key="index">
|
||||
<img v-lazy="img" alt="">
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
```
|
||||
|
||||
```javascript
|
||||
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'
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### 自动轮播
|
||||
|
||||
需要设置`auto-play`属性为`true`，即会自动轮播。
|
||||
|
||||
:::demo 自动轮播
|
||||
```html
|
||||
<van-swipe auto-play @pagechange:end="handlePageEnd">
|
||||
<van-swipe-item v-for="(img, index) in autoImages" :key="index">
|
||||
<img v-lazy="img" alt="">
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
```
|
||||
|
||||
```javascript
|
||||
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);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| autoPlay | 是否自动轮播 | `Boolean` | `false` | `true`, `false` |
|
||||
| showIndicators | 是否显示指示器 | `Boolean` | `true` | `true`, `false` |
|
||||
|
||||
### 事件
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| `pagechange:end` | 每一页轮播结束后触发 | `(elem, currIndex)`：`elem`为触发页当前的DOM节点 |
|
||||
@@ -0,0 +1,79 @@
|
||||
## SwitchCell 开关单元格
|
||||
|
||||
`SwitchCell`组件是对`Switch`和`Cell`组件的封装
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { SwitchCell } from 'vant';
|
||||
|
||||
Vue.component(SwitchCell.name, SwitchCell);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-switch-cell v-model="checked" title="标题" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: true
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
#### 禁用状态
|
||||
通过`disabled`属性可以将组件设置为禁用状态
|
||||
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-switch-cell v-model="checked" :disabled="true" title="标题" />
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 加载状态
|
||||
通过`loading`属性可以将组件设置为加载状态
|
||||
|
||||
:::demo 加载状态
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-switch-cell v-model="checked" :loading="true" title="标题" />
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 开关状态 | `Boolean` | | |
|
||||
| title | 左侧标题 | `String` | `''` | |
|
||||
| loading | 是否为加载状态 | `Boolean` | `false` | |
|
||||
| disabled | 是否为禁用状态 | `Boolean` | `false` | |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 开关状态切换回调 | checked: 是否选中开关 |
|
||||
@@ -0,0 +1,162 @@
|
||||
<style>
|
||||
.demo-switch {
|
||||
.van-switch {
|
||||
float: left;
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
&__text {
|
||||
display: inline-block;
|
||||
line-height: 32px;
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Dialog from 'packages/dialog';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switchState1: true,
|
||||
switchState2: false,
|
||||
switchStateTrue: true,
|
||||
switchStateFalse: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
updateState(newState) {
|
||||
const state = newState ? '打开' : '关闭';
|
||||
Dialog.confirm({
|
||||
title: '提醒',
|
||||
message: '是否' + state + '开关？'
|
||||
}).then((action) => {
|
||||
this.switchState2 = newState;
|
||||
}, (error) => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Switch 开关
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Switch } from 'vant';
|
||||
|
||||
Vue.component(Switch.name, Switch);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-row>
|
||||
<van-col span="12">
|
||||
<van-switch class="some-customized-class" v-model="switchState1"></van-switch>
|
||||
<div class="demo-switch__text">{{ switchState1 ? ' 打开' : '关闭' }}</div>
|
||||
</van-col>
|
||||
<van-col span="12">
|
||||
<van-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></van-switch>
|
||||
<div class="demo-switch__text">{{ switchState2 ? ' 打开' : '关闭' }}</div>
|
||||
</van-col>
|
||||
</van-row>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switchState1: true,
|
||||
switchState2: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
updateState(newState) {
|
||||
const state = newState ? '打开' : '关闭';
|
||||
Dialog.confirm({
|
||||
title: '提醒',
|
||||
message: '是否' + state + '开关？'
|
||||
}).then((action) => {
|
||||
this.switchState2 = newState;
|
||||
}, (error) => {
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### 禁用状态
|
||||
|
||||
设置`disabled`属性为`true`，此时开关不可点击。
|
||||
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<van-row>
|
||||
<van-col span="12">
|
||||
<van-switch class="some-customized-class" v-model="switchStateTrue" disabled></van-switch>
|
||||
<div class="demo-switch__text">打开</div>
|
||||
</van-col>
|
||||
<van-col span="12">
|
||||
<van-switch class="some-customized-class" v-model="switchStateFalse" disabled></van-switch>
|
||||
<div class="demo-switch__text">关闭</div>
|
||||
</van-col>
|
||||
</van-row>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switchStateTrue: true,
|
||||
switchStateFalse: false
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### loading状态
|
||||
|
||||
设置`loading`属性为`true`，此时开关为加载状态，一般用于点击开关时正在向后端发送请求，此时正在loading，请求成功后，结束loading。
|
||||
|
||||
:::demo loading状态
|
||||
```html
|
||||
<van-row>
|
||||
<van-col span="12">
|
||||
<van-switch class="some-customized-class" v-model="switchStateTrue" loading></van-switch>
|
||||
<div class="demo-switch__text">打开</div>
|
||||
</van-col>
|
||||
<van-col span="12">
|
||||
<van-switch class="some-customized-class" v-model="switchStateFalse" loading></van-switch>
|
||||
<div class="demo-switch__text">关闭</div>
|
||||
</van-col>
|
||||
</van-row>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switchStateTrue: true,
|
||||
switchStateFalse: false
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 开关状态 | `Boolean` | `false` | `true`, `false` |
|
||||
| loading | loading状态 | `Boolean` | `false` | `true`, `false` |
|
||||
| disabled | 禁用状态 | `Boolean` | `false` | `true`, `false` |
|
||||
| onChange | 开关状态切换回调(默认则改变开关状态) | `Function` | - | - |
|
||||
@@ -0,0 +1,255 @@
|
||||
<style>
|
||||
.demo-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 标签
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Tab, Tabs } from 'vant';
|
||||
|
||||
Vue.component(Tab.name, Tab);
|
||||
Vue.component(Tabs.name, 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-tabs>
|
||||
```
|
||||
:::
|
||||
|
||||
#### active特定tab
|
||||
|
||||
可以在`van-tabs`上设置`active`为对应`tab`的索引（从0开始，即0代表第一个）即可激活对应`tab`，默认为0。
|
||||
|
||||
:::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-tabs>
|
||||
```
|
||||
:::
|
||||
|
||||
### 设置切换tab的动画时间
|
||||
|
||||
通过设置`duration`来指定时间，默认为0.3s，只接受`Number`类型参数。
|
||||
|
||||
:::demo 设置切换tab的动画时间
|
||||
```html
|
||||
<van-tabs :duration="0.6">
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 多于4个tab时
|
||||
|
||||
多于4个tab时，可以横向滚动tab。
|
||||
|
||||
:::demo 多于4个tab时
|
||||
```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-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-tabs>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
popalert() {
|
||||
alert('haha')
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### 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-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-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-tabs>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
handleTabClick(index) {
|
||||
alert(index);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### van-tabs API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| classtype | 两种UI | `String` | `line` | `line`, `card` |
|
||||
| active | 默认激活的tab | `String`, `Number` | `0` | |
|
||||
| navclass | tabs的内部nav上的自定义classname | `String` | | |
|
||||
| duration | 切换tab的动画时间 | `Number` | `0.3` | | |
|
||||
|
||||
|
||||
### van-tab API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | tab的标题 | `String` | | |
|
||||
| disabled | 是否禁用这个tab | `Boolean` | `false` | |
|
||||
|
||||
### van-tabs Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| click | 某个tab点击事件 | index：点击的`tab`的索引 |
|
||||
| disabled | 某个tab禁用时点击事件 | index：点击的`tab`的索引 |
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
<style>
|
||||
.demo-tag {
|
||||
.van-tag + .van-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.van-tag {
|
||||
&:first-of-type {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Tag 标记
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Tag } from 'vant';
|
||||
|
||||
Vue.component(Tag.name, Tag);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
通过 type 属性控制 Tag 颜色，默认为灰色
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-tag>标签</van-tag>
|
||||
<van-tag type="danger">标签</van-tag>
|
||||
<van-tag type="success">标签</van-tag>
|
||||
<van-tag type="primary">标签</van-tag>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 空心样式
|
||||
设置`plain`属性设置为空心样式
|
||||
|
||||
:::demo 空心样式
|
||||
```html
|
||||
<van-tag plain>标签</van-tag>
|
||||
<van-tag plain type="danger">标签</van-tag>
|
||||
<van-tag plain type="primary">标签</van-tag>
|
||||
<van-tag plain type="success">标签</van-tag>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 标记样式
|
||||
通过`mark`设置为标记样式
|
||||
|
||||
:::demo 标记样式
|
||||
```html
|
||||
<van-tag mark>标签</van-tag>
|
||||
<van-tag mark type="danger">标签</van-tag>
|
||||
<van-tag mark type="primary">标签</van-tag>
|
||||
<van-tag mark type="success">标签</van-tag>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 类型 | `String` | `''`| `primary` `success` `danger` |
|
||||
| plain | 是否为空心样式 | `Boolean` | `false` | |
|
||||
| mark | 是否为标记样式 | `Boolean` | `false` | |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| - | 自定义 Tag 显示内容 |
|
||||
@@ -0,0 +1,166 @@
|
||||
<style>
|
||||
.demo-toast {
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { Toast } from 'packages';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
showToast() {
|
||||
Toast('我是提示文案，建议不超过十五字~');
|
||||
},
|
||||
showLoadingToast() {
|
||||
Toast.loading();
|
||||
},
|
||||
showSuccessToast() {
|
||||
Toast.success('成功文案');
|
||||
},
|
||||
showFailToast() {
|
||||
Toast.fail('失败文案');
|
||||
},
|
||||
showCustomizedToast(duration) {
|
||||
const toast = Toast.loading({
|
||||
duration: 0,
|
||||
forbidClick: true,
|
||||
message: '倒计时 3 秒'
|
||||
});
|
||||
|
||||
let second = 3;
|
||||
const timer = setInterval(() => {
|
||||
second--;
|
||||
if (second) {
|
||||
toast.message = `倒计时 ${second} 秒`;
|
||||
} else {
|
||||
clearInterval(timer);
|
||||
Toast.clear();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Toast 轻提示
|
||||
|
||||
### 使用指南
|
||||
|
||||
```javascript
|
||||
import { Toast } from 'vant';
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 文字提示
|
||||
|
||||
:::demo 文字提示
|
||||
```html
|
||||
<van-button @click="showToast">文字提示</van-button>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
showToast() {
|
||||
Toast('我是提示文案，建议不超过十五字~');
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
#### 加载提示
|
||||
|
||||
:::demo 加载提示
|
||||
```html
|
||||
<van-button @click="showLoadingToast">加载提示</van-button>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
showLoadingToast() {
|
||||
Toast.loading();
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
#### 成功/失败提示
|
||||
|
||||
:::demo 成功/失败提示
|
||||
```html
|
||||
<van-button @click="showSuccessToast">成功提示</van-button>
|
||||
<van-button @click="showFailToast">失败提示</van-button>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
showSuccessToast() {
|
||||
Toast.success('成功文案');
|
||||
},
|
||||
showFailToast() {
|
||||
Toast.fail('失败文案');
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
#### 高级用法
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<van-button @click="showCustomizedToast">高级用法</van-button>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
showCustomizedToast() {
|
||||
const toast = Toast.loading({
|
||||
duration: 0, // 持续展示 toast
|
||||
forbidClick: true, // 禁用背景点击
|
||||
message: '倒计时 3 秒'
|
||||
});
|
||||
|
||||
let second = 3;
|
||||
const timer = setInterval(() => {
|
||||
second--;
|
||||
if (second) {
|
||||
toast.message = `倒计时 ${second} 秒`;
|
||||
} else {
|
||||
clearInterval(timer);
|
||||
Toast.clear();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### 方法
|
||||
|
||||
| 方法名 | 参数 | 返回值 | 介绍 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| Toast | `options | message` | toast 实例 | 展示提示 |
|
||||
| Toast.loading | `options | message` | toast 实例 | 展示加载提示 |
|
||||
| Toast.success | `options | message` | toast 实例 | 展示成功提示 |
|
||||
| Toast.fail | `options | message` | toast 实例 | 展示失败提示 |
|
||||
| Toast.clear | - | `void` | 关闭提示 |
|
||||
|
||||
### Options
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 提示类型 | `String` | `text` | `loading` `success` `fail` `html` |
|
||||
| message | 内容 | `String` | `''` | - |
|
||||
| forbidClick | 禁止背景点击 | `Boolean` | `false` | - |
|
||||
| duration | 时长(ms) | `Number` | `3000` | 值为 0 时，toast 不会消失 |
|
||||
@@ -0,0 +1,168 @@
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [{
|
||||
text: '所有城市',
|
||||
children: [{
|
||||
text: '杭州',
|
||||
id: 1001
|
||||
}, {
|
||||
text: '温州',
|
||||
id: 1002
|
||||
}, {
|
||||
text: '海南',
|
||||
id: 1100
|
||||
}, {
|
||||
text: '宁波',
|
||||
id: 1003
|
||||
}, {
|
||||
text: '义乌',
|
||||
id: 1004
|
||||
}, {
|
||||
text: '无锡',
|
||||
id: 1011
|
||||
}, {
|
||||
text: '常州',
|
||||
id: 1012
|
||||
}, {
|
||||
text: '大连',
|
||||
id: 1031
|
||||
}, {
|
||||
text: '诸暨',
|
||||
id: 1005
|
||||
}]
|
||||
}, {
|
||||
text: '浙江',
|
||||
children: [{
|
||||
text: '杭州',
|
||||
id: 1001
|
||||
}, {
|
||||
text: '温州',
|
||||
id: 1002
|
||||
}, {
|
||||
text: '宁波',
|
||||
id: 1003
|
||||
}, {
|
||||
text: '义乌',
|
||||
id: 1004
|
||||
}]
|
||||
}, {
|
||||
text: '江苏',
|
||||
children: [{
|
||||
text: '无锡',
|
||||
id: 1011
|
||||
}, {
|
||||
text: '常州',
|
||||
id: 1012
|
||||
}]
|
||||
}],
|
||||
mainActiveIndex: 0,
|
||||
activeId: 1001
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onNavClick(index) {
|
||||
this.mainActiveIndex = index;
|
||||
},
|
||||
onItemClick(data) {
|
||||
console.log(data);
|
||||
this.activeId = data.id;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## TreeSelect 分类选择
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { TreeSelect } from 'vant';
|
||||
|
||||
Vue.component(TreeSelect.name, TreeSelect);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-tree-select
|
||||
:items="items"
|
||||
:main-active-index="mainActiveIndex"
|
||||
:active-id="activeId"
|
||||
@navclick="onNavClick"
|
||||
@itemclick="onItemClick"
|
||||
></van-tree-select>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: items,
|
||||
// 左侧高亮元素的index
|
||||
mainActiveIndex: 0,
|
||||
// 被选中元素的id
|
||||
activeId: 1001
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onNavClick(index) {
|
||||
this.mainActiveIndex = index;
|
||||
},
|
||||
onItemClick(data) {
|
||||
console.log(data);
|
||||
this.activeId = data.id;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
#### 传入参数
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| items | 分类显示所需的数据，具体数据结构可看 数据结构 | Array | [] | |
|
||||
| mainActiveIndex | 左侧导航高亮的索引 | Number | 0 | |
|
||||
| activeId | 右侧选择项，高亮的数据id | Number | 0 | |
|
||||
|
||||
#### 事件
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| navclick | 左侧导航点击时，触发的事件 | index：被点击的导航的索引 |
|
||||
| itemclick | 右侧选择项被点击时，会触发的事件 | data: 该点击项的数据 |
|
||||
|
||||
### 数据格式
|
||||
#### items 分类显示所需数据的数据结构
|
||||
`items` 整体为一个数组，数组内包含一系列描述分类的 object。
|
||||
|
||||
每个分类里，text表示当前分类的名称。children 表示分类里的可选项，为数组结构，id被用来唯一标识每个选项
|
||||
```javascript
|
||||
[
|
||||
{
|
||||
// 导航名称
|
||||
text: '所有城市',
|
||||
// 该导航下所有的可选项
|
||||
children: [
|
||||
{
|
||||
// 可选项的名称
|
||||
text: '温州',
|
||||
// 可选项的id，高亮的时候是根据id是否和选中的id是否相同进行判断的
|
||||
id: 1002
|
||||
},
|
||||
{
|
||||
// 可选项的名称
|
||||
text: '杭州',
|
||||
// 可选项的id，高亮的时候是根据id是否和选中的id是否相同进行判断的
|
||||
id: 1001
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
@@ -0,0 +1,64 @@
|
||||
<style>
|
||||
.uploader-container {
|
||||
padding: 5px 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
logContent(file) {
|
||||
console.log(file)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Uploader 图片上传
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Uploader } from 'vant';
|
||||
|
||||
Vue.component(Uploader.name, Uploader);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="uploader-container">
|
||||
<van-uploader :after-read="logContent">
|
||||
<van-icon name="photograph"></van-icon>
|
||||
</van-uploader>
|
||||
</div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
logContent(file) {
|
||||
console.log(file)
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 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, 6, 7, 8, 9, 10],
|
||||
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;
|
||||
}, 200);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isWaterfallDisabled() {
|
||||
return this.loading || this.finished;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-waterfall {
|
||||
ul {
|
||||
max-height: 360px;
|
||||
overflow: scroll;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
li {
|
||||
line-height: 50px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.page-desc {
|
||||
padding: 5px 0;
|
||||
line-height: 1.4;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
#### 基础用法
|
||||
使用 `v-waterfall-lower` 监听滚动到达底部，并执行相应函数。若是函数执行中需要异步加载数据，可以将 `waterfall-disabled` 指定的值置为 false，禁止 `v-waterfall-lower` 监听滚动事件
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<p class="page-desc">当即将滚动到元素底部时，会自动加载更多</p>
|
||||
<ul
|
||||
v-waterfall-lower="loadMore"
|
||||
waterfall-disabled="isWaterfallDisabled"
|
||||
waterfall-offset="400">
|
||||
<li v-for="(item, index) in list">{{ item }}</li>
|
||||
</ul>
|
||||
```
|
||||
:::
|
||||
|
||||
### 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