mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(Picker): add option slot (#7380)
This commit is contained in:
neverland
GitHub
parent
7ec560fc82
commit
ea210bb013
@ -305,7 +305,7 @@ export default createComponent({
|
||||
|
||||
return (
|
||||
<li {...data}>
|
||||
<div {...childData} />
|
||||
{this.slots('option', option) || <div {...childData} />}
|
||||
</li>
|
||||
);
|
||||
});
|
||||
|
||||
@ -269,14 +269,15 @@ Picker events will pass different parameters according to the columns are single
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description |
|
||||
| ------------------ | ---------------------------- |
|
||||
| default | Custom toolbar content |
|
||||
| title | Custom title |
|
||||
| confirm `v2.10.11` | Custom confirm button text |
|
||||
| cancel `v2.10.11` | Custom cancel button text |
|
||||
| columns-top | Custom content above columns |
|
||||
| columns-bottom | Custom content below columns |
|
||||
| Name | Description | SlotProps |
|
||||
| --- | --- | --- |
|
||||
| default | Custom toolbar content | - |
|
||||
| title | Custom title | - |
|
||||
| confirm `v2.10.11` | Custom confirm button text | - |
|
||||
| cancel `v2.10.11` | Custom cancel button text | - |
|
||||
| option `v2.10.11` | Custom option content | _option: string \| object_ |
|
||||
| columns-top | Custom content above columns | - |
|
||||
| columns-bottom | Custom content below columns | - |
|
||||
|
||||
### Data Structure of Column
|
||||
|
||||
|
||||
@ -292,18 +292,19 @@ export default {
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
| ------------------ | ---------------------- |
|
||||
| default | 自定义整个顶部栏的内容 |
|
||||
| title | 自定义标题内容 |
|
||||
| confirm `v2.10.11` | 自定义确认按钮内容 |
|
||||
| cancel `v2.10.11` | 自定义取消按钮内容 |
|
||||
| columns-top | 自定义选项上方内容 |
|
||||
| columns-bottom | 自定义选项下方内容 |
|
||||
| 名称 | 说明 | 参数 |
|
||||
| ------------------ | ---------------------- | -------------------------- |
|
||||
| default | 自定义整个顶部栏的内容 | - |
|
||||
| title | 自定义标题内容 | - |
|
||||
| confirm `v2.10.11` | 自定义确认按钮内容 | - |
|
||||
| cancel `v2.10.11` | 自定义取消按钮内容 | - |
|
||||
| option `v2.10.11` | 自定义选项内容 | _option: string \| object_ |
|
||||
| columns-top | 自定义选项上方内容 | - |
|
||||
| columns-bottom | 自定义选项下方内容 | - |
|
||||
|
||||
### Column 数据结构
|
||||
|
||||
当传入多列数据时，`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`
|
||||
当传入多列数据时，`columns` 为一个对象数组，数组中的每一个对象配置每一列，每一列有以下 `key`:
|
||||
|
||||
| 键名 | 说明 | 类型 |
|
||||
| ----------------- | -------------------------- | ---------- |
|
||||
|
||||
@ -338,6 +338,9 @@ export default createComponent({
|
||||
swipeDuration={this.swipeDuration}
|
||||
visibleItemCount={this.visibleItemCount}
|
||||
initialOptions={item.values}
|
||||
scopedSlots={{
|
||||
option: this.$scopedSlots.option,
|
||||
}}
|
||||
onChange={() => {
|
||||
this.onChange(columnIndex);
|
||||
}}
|
||||
|
||||
@ -103,6 +103,42 @@ exports[`render confirm/cancel slot 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`render option slot with object columns 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">foo</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">bar</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`render option slot with simple columns 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">foo</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">bar</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`render title slot 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>Custom title<button type="button" class="van-picker__confirm">确认</button></div>
|
||||
|
||||
@ -160,6 +160,38 @@ test('render confirm/cancel slot', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('render option slot with simple columns', () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-picker :columns="columns" show-toolbar>
|
||||
<template #option="item">{{ item }}</template>
|
||||
</van-picker>
|
||||
`,
|
||||
data() {
|
||||
return { columns: ['foo', 'bar'] };
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('render option slot with object columns', () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-picker :columns="columns" show-toolbar>
|
||||
<template #option="item">{{ item.text }}</template>
|
||||
</van-picker>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
columns: [{ text: 'foo' }, { text: 'bar' }],
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('simulation finger swipe again before transitionend', () => {
|
||||
// mock getComputedStyle
|
||||
// see: https://github.com/jsdom/jsdom/issues/2588
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user