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

feat(Picker): support cascade columns (#4247)

Browse Source
This commit is contained in:
陈嘉涵
2020-01-26 15:35:53 +08:00
parent a49d239d69
commit c04697cc42
8 changed files with 355 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/picker/test/__snapshots__/demo.spec.js.snap
+36 -5
View File
@@ -63,13 +63,35 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<div class="van-cell__title van-field__label"><span>城市</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择城市" class="van-field__control"></div>
<div class="van-picker">
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
<div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
</div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">浙江</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">福建</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">杭州</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">西湖区</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">余杭区</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>
<!---->
</div>
<div>
<div class="van-picker">
@@ -138,5 +160,14 @@ exports[`renders demo correctly 1`] = `
<!---->
</div>
</div>
<div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<div class="van-cell__title van-field__label"><span>城市</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择城市" class="van-field__control"></div>
</div>
</div>
<!---->
</div>
</div>
`;
src/picker/test/__snapshots__/index.spec.js.snap
+9
View File
@@ -32,6 +32,9 @@ exports[`columns-top、columns-bottom prop 1`] = `
<div class="van-picker">
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
<!---->Custom Columns Top<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>Custom Columns Bottom
@@ -60,6 +63,9 @@ exports[`render title slot 1`] = `
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>Custom title<button type="button" class="van-picker__confirm">确认</button></div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
@@ -72,6 +78,9 @@ exports[`toolbar-position prop 1`] = `
<!---->
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
src/picker/test/index.spec.js
+9 -2
View File
@@ -33,13 +33,20 @@ test('multiple columns confirm & cancel event', () => {
const wrapper = mount(Picker, {
propsData: {
showToolbar: true,
columns,
},
});
wrapper.find('.van-picker__confirm').trigger('click');
wrapper.find('.van-picker__cancel').trigger('click');
expect(wrapper.emitted('confirm')[0]).toEqual([[], []]);
expect(wrapper.emitted('cancel')[0]).toEqual([[], []]);
const params = [
['vip', '1990'],
[0, 0],
];
expect(wrapper.emitted('confirm')[0]).toEqual(params);
expect(wrapper.emitted('cancel')[0]).toEqual(params);
});
test('set picker values', () => {