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

feat(Area): add columns-top、columns-bottom prop (#5719)

Browse Source
This commit is contained in:
chenjiahan 2020-02-25 19:25:20 +08:00
parent 7344389535
commit 064cff6fe0
6 changed files with 43 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/area/README.md
View File

@ -84,6 +84,8 @@ Set `columns-num` with 2, you'll have a 2 level picker.
| Name | Description |
|------|------|
| title `v2.5.3` | Custom title |
| columns-top `v2.5.3` | Custom content above columns |
| columns-bottom `v2.5.3` | Custom content below columns |
### Methods

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

@ -83,6 +83,8 @@ Vue.use(Area);
| 名称 | 说明 |
|------|------|
| title `v2.5.3` | 自定义标题内容 |
| columns-top `v2.5.3` | 自定义选项上方内容 |
| columns-bottom `v2.5.3` | 自定义选项下方内容 |
### 方法

6
src/area/index.js
View File

@ -305,7 +305,11 @@ export default createComponent({
visibleItemCount={this.visibleItemCount}
cancelButtonText={this.cancelButtonText}
confirmButtonText={this.confirmButtonText}
scopedSlots={pickSlots(this, ['title'])}
scopedSlots={pickSlots(this, [
'title',
'columns-top',
'columns-bottom',
])}
{...{ on }}
/>
);

20
src/area/test/__snapshots__/index.spec.js.snap
View File

@ -114,6 +114,26 @@ exports[`columns-num prop 1`] = `
</div>
`;
exports[`columns-top、columns-bottom slot 1`] = `
<div class="van-picker van-area">
<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>
<!---->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-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-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>Bottom
<!---->
</div>
`;
exports[`reset method 1`] = `
<div class="van-picker van-area">
<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>

12
src/area/test/index.spec.js
View File

@ -139,3 +139,15 @@ test('title slot', async () => {
await later();
expect(wrapper).toMatchSnapshot();
});
test('columns-top、columns-bottom slot', async () => {
const wrapper = mount(Area, {
slots: {
'columns-top': 'Top',
'columns-bottom': 'Bottom',
},
});
await later();
expect(wrapper).toMatchSnapshot();
});

2
src/picker/README.md
View File

@ -288,6 +288,8 @@ Picker events will pass different parameters according to the columns are single
|------|------|
| default | Custom toolbar content |
| title | Custom title |
| columns-top | Custom content above columns |
| columns-bottom | Custom content below columns |
### Data Structure of Column