blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[Improvement] Area: add reset method (#1427)

Browse Source
This commit is contained in:
neverland 2018-07-06 20:04:38 +08:00 committed by GitHub
parent e34c940063
commit 0718339c81
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 105 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/area/demo/index.vue
View File

@ -1,7 +1,7 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-area :area-list="$t('areaList')" />
<van-area ref="area" :area-list="$t('areaList')" />
</demo-block>
<demo-block :title="$t('title2')">
@ -33,6 +33,9 @@ export default {
},
data() {
setTimeout(() => {
this.$refs.area.reset();
}, 3000);
return {
value: '330302'
};

8
packages/area/en-US.md
View File

@ -57,6 +57,14 @@ Set `columns-num` with 2, you'll have a 2 level picker.
| cancel | triggers when clicking the cancel button | - |
| change | Triggered when current option changed | Picker instance, current values，column index |
### Methods
Use ref to get area instance and call instance methods
| Name | Attribute | Return value | Description |
|-----------|-----------|-----------|-------------|
| reset | - | - | Reset all options |
### Data Structure
#### areaList

5
packages/area/index.vue
View File

@ -154,6 +154,11 @@ export default create({
getValues() {
return this.$refs.picker ? this.$refs.picker.getValues() : [];
},
reset() {
this.code = '';
this.setValues();
}
}
});

63
packages/area/test/__snapshots__/index.spec.js.snap
View File

@ -87,6 +87,69 @@ exports[`change option 3`] = `
</div>
`;
exports[`reset method 1`] = `
<div class="van-picker van-area">
<div class="van-hairline--top-bottom van-picker__toolbar">
<div class="van-picker__cancel">取消</div>
<!---->
<div class="van-picker__confirm">确认</div>
</div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column" style="height: 220px;">
<ul style="line-height: 44px;">
<li class="van-ellipsis van-picker-column__item">北京市</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">天津市</li>
</ul>
</div>
<div class="van-picker-column" style="height: 220px;">
<ul style="line-height: 44px;">
<li class="van-ellipsis van-picker-column__item">天津市</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">县</li>
</ul>
</div>
<div class="van-picker-column" style="height: 220px;">
<ul style="line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">蓟县</li>
</ul>
</div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
</div>
`;
exports[`reset method 2`] = `
<div class="van-picker van-area">
<div class="van-hairline--top-bottom van-picker__toolbar">
<div class="van-picker__cancel">取消</div>
<!---->
<div class="van-picker__confirm">确认</div>
</div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column" style="height: 220px;">
<ul style="line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
<li class="van-ellipsis van-picker-column__item">天津市</li>
</ul>
</div>
<div class="van-picker-column" style="height: 220px;">
<ul style="line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
<li class="van-ellipsis van-picker-column__item">县</li>
</ul>
</div>
<div class="van-picker-column" style="height: 220px;">
<ul style="line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">东城区</li>
<li class="van-ellipsis van-picker-column__item">西城区</li>
</ul>
</div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
</div>
`;
exports[`watch areaList & code 1`] = `
<div class="van-picker van-area">
<div class="van-hairline--top-bottom van-picker__toolbar">

17
packages/area/test/index.spec.js
View File

@ -64,8 +64,25 @@ test('getValues method', () => {
const wrapper = mount(Area, {
propsData: {
areaList
},
created() {
expect(this.getValues()).toEqual([]);
}
});
expect(wrapper.vm.getValues()).toEqual(firstOption);
});
test('reset method', async() => {
const wrapper = mount(Area, {
propsData: {
areaList,
value: '120225'
}
});
await later();
expect(wrapper).toMatchSnapshot();
wrapper.vm.reset();
expect(wrapper).toMatchSnapshot();
});

8
packages/area/zh-CN.md
View File

@ -55,6 +55,14 @@ Vue.use(Area);
| cancel | 点击取消按钮时 | - |
| change | 选项改变时触发 | Picker 实例，所有列选中值，当前列对应的索引 |
### 方法
通过 ref 可以获取到 area 实例并调用实例方法
| 方法名 | 参数 | 返回值 | 介绍 |
|-----------|-----------|-----------|-------------|
| reset | - | - | 重置所有选项到第一项 |
### 数据格式
#### 省市县列表数据格式