blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-24 15:39:15 +08:00
Code Issues Projects Releases Wiki Activity

feat(Picker): add columns-top、columns-bottom slot (#4607)

Browse Source
This commit is contained in:
neverland 2019-09-27 17:25:23 +08:00 committed by GitHub
parent 9729879593
commit b8daee5551
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 29 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/picker/README.zh-CN.md
View File

@ -223,6 +223,8 @@ Picker 组件的事件会根据 columns 是单列或多列返回不同的参数
|------|------|
| default | 自定义顶部栏内容 |
| title | 自定义标题内容 |
| columns-top | 自定义选项上方内容 |
| columns-bottom | 自定义选项下方内容 |
### Column 数据结构

2
src/picker/index.js
View File

@ -183,6 +183,7 @@ export default createComponent({
<div class={bem()}>
{this.toolbarPosition === 'top' ? Toolbar : h()}
{this.loading ? <Loading class={bem('loading')} color={BLUE} /> : h()}
{this.slots('columns-top')}
<div class={bem('columns')} style={columnsStyle} onTouchmove={preventDefault}>
{columns.map((item, index) => (
<PickerColumn
@ -201,6 +202,7 @@ export default createComponent({
<div class={bem('mask')} style={maskStyle} />
<div class={[BORDER_UNSET_TOP_BOTTOM, bem('frame')]} style={frameStyle} />
</div>
{this.slots('columns-bottom')}
{this.toolbarPosition === 'bottom' ? Toolbar : h()}
</div>
);

11
src/picker/test/__snapshots__/index.spec.js.snap
View File

@ -28,6 +28,17 @@ exports[`column watch default index 2`] = `
</div>
`;
exports[`columns-top、columns-bottom prop 1`] = `
<div class="van-picker">
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
<!---->Custom Columns Top<div class="van-picker__columns" style="height: 220px;">
<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
<!---->
</div>
`;
exports[`not allow html 1`] = `
<div class="van-picker">
<!---->

14
src/picker/test/index.spec.js
View File

@ -206,3 +206,17 @@ test('not allow html', () => {
expect(wrapper).toMatchSnapshot();
});
test('columns-top、columns-bottom prop', () => {
const wrapper = mount(Picker, {
propsData: {
showToolbar: true
},
scopedSlots: {
'columns-top': () => 'Custom Columns Top',
'columns-bottom': () => 'Custom Columns Bottom',
}
});
expect(wrapper).toMatchSnapshot();
});