mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(Picker): add toolbar slot (#8968)
This commit is contained in:
neverland
GitHub
parent
750c413917
commit
32f7be0ec2
@ -94,11 +94,7 @@ export default defineComponent({
|
||||
setup(props, { emit, slots }) {
|
||||
const formattedColumns = ref<PickerObjectColumn[]>([]);
|
||||
|
||||
const {
|
||||
text: textKey,
|
||||
values: valuesKey,
|
||||
children: childrenKey,
|
||||
} = extend(
|
||||
const { text: textKey, values: valuesKey, children: childrenKey } = extend(
|
||||
{
|
||||
// compatible with valueKey prop
|
||||
text: props.valueKey,
|
||||
@ -108,8 +104,9 @@ export default defineComponent({
|
||||
props.columnsFieldNames
|
||||
);
|
||||
|
||||
const { children, linkChildren } =
|
||||
useChildren<ComponentInstance>(PICKER_KEY);
|
||||
const { children, linkChildren } = useChildren<ComponentInstance>(
|
||||
PICKER_KEY
|
||||
);
|
||||
|
||||
linkChildren();
|
||||
|
||||
@ -322,11 +319,12 @@ export default defineComponent({
|
||||
|
||||
const renderToolbar = () => {
|
||||
if (props.showToolbar) {
|
||||
// default slot is deprecated
|
||||
// should be removed in next major version
|
||||
const slot = slots.toolbar || slots.default;
|
||||
return (
|
||||
<div class={bem('toolbar')}>
|
||||
{slots.default
|
||||
? slots.default()
|
||||
: [renderCancel(), renderTitle(), renderConfirm()]}
|
||||
{slot ? slot() : [renderCancel(), renderTitle(), renderConfirm()]}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -346,15 +346,15 @@ Picker events will pass different parameters according to the columns are single
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description | SlotProps |
|
||||
| -------------- | ---------------------------- | -------------------------- |
|
||||
| default | Custom toolbar content | - |
|
||||
| title | Custom title | - |
|
||||
| confirm | Custom confirm button text | - |
|
||||
| cancel | Custom cancel button text | - |
|
||||
| option | Custom option content | _option: string \| object_ |
|
||||
| columns-top | Custom content above columns | - |
|
||||
| columns-bottom | Custom content below columns | - |
|
||||
| Name | Description | SlotProps |
|
||||
| --------------- | ---------------------------- | -------------------------- |
|
||||
| toolbar `3.1.2` | Custom toolbar content | - |
|
||||
| title | Custom title | - |
|
||||
| confirm | Custom confirm button text | - |
|
||||
| cancel | Custom cancel button text | - |
|
||||
| option | Custom option content | _option: string \| object_ |
|
||||
| columns-top | Custom content above columns | - |
|
||||
| columns-bottom | Custom content below columns | - |
|
||||
|
||||
### Data Structure of Column
|
||||
|
||||
|
||||
@ -369,15 +369,15 @@ export default {
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 | 参数 |
|
||||
| -------------- | ---------------------- | -------------------------- |
|
||||
| default | 自定义整个顶部栏的内容 | - |
|
||||
| title | 自定义标题内容 | - |
|
||||
| confirm | 自定义确认按钮内容 | - |
|
||||
| cancel | 自定义取消按钮内容 | - |
|
||||
| option | 自定义选项内容 | _option: string \| object_ |
|
||||
| columns-top | 自定义选项上方内容 | - |
|
||||
| columns-bottom | 自定义选项下方内容 | - |
|
||||
| 名称 | 说明 | 参数 |
|
||||
| ---------------- | ---------------------- | -------------------------- |
|
||||
| toolbar `v3.1.2` | 自定义整个顶部栏的内容 | - |
|
||||
| title | 自定义标题内容 | - |
|
||||
| confirm | 自定义确认按钮内容 | - |
|
||||
| cancel | 自定义取消按钮内容 | - |
|
||||
| option | 自定义选项内容 | _option: string \| object_ |
|
||||
| columns-top | 自定义选项上方内容 | - |
|
||||
| columns-bottom | 自定义选项下方内容 | - |
|
||||
|
||||
### Column 数据结构
|
||||
|
||||
|
||||
@ -225,41 +225,6 @@ exports[`not allow html 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`render confirm/cancel slot 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-picker__toolbar">
|
||||
<button type="button"
|
||||
class="van-picker__cancel"
|
||||
>
|
||||
Custom Cancel
|
||||
</button>
|
||||
<button type="button"
|
||||
class="van-picker__confirm"
|
||||
>
|
||||
Custom Confirm
|
||||
</button>
|
||||
</div>
|
||||
<div class="van-picker__columns"
|
||||
style="height: 264px;"
|
||||
>
|
||||
<div class="van-picker-column">
|
||||
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||
class="van-picker-column__wrapper"
|
||||
>
|
||||
</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 object columns 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-picker__toolbar">
|
||||
@ -362,42 +327,6 @@ exports[`render option slot with simple columns 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`render title slot 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-picker__toolbar">
|
||||
<button type="button"
|
||||
class="van-picker__cancel"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
Custom title
|
||||
<button type="button"
|
||||
class="van-picker__confirm"
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
</div>
|
||||
<div class="van-picker__columns"
|
||||
style="height: 264px;"
|
||||
>
|
||||
<div class="van-picker-column">
|
||||
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||
class="van-picker-column__wrapper"
|
||||
>
|
||||
</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[`set rem item-height 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-picker__toolbar">
|
||||
@ -451,6 +380,103 @@ exports[`set rem item-height 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`should render confirm/cancel slot correctly 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-picker__toolbar">
|
||||
<button type="button"
|
||||
class="van-picker__cancel"
|
||||
>
|
||||
Custom Cancel
|
||||
</button>
|
||||
<button type="button"
|
||||
class="van-picker__confirm"
|
||||
>
|
||||
Custom Confirm
|
||||
</button>
|
||||
</div>
|
||||
<div class="van-picker__columns"
|
||||
style="height: 264px;"
|
||||
>
|
||||
<div class="van-picker-column">
|
||||
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||
class="van-picker-column__wrapper"
|
||||
>
|
||||
</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[`should render title slot correctly 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-picker__toolbar">
|
||||
<button type="button"
|
||||
class="van-picker__cancel"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
Custom title
|
||||
<button type="button"
|
||||
class="van-picker__confirm"
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
</div>
|
||||
<div class="van-picker__columns"
|
||||
style="height: 264px;"
|
||||
>
|
||||
<div class="van-picker-column">
|
||||
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||
class="van-picker-column__wrapper"
|
||||
>
|
||||
</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[`should render toolbar slot correctly 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-picker__toolbar">
|
||||
Custom toolbar
|
||||
</div>
|
||||
<div class="van-picker__columns"
|
||||
style="height: 264px;"
|
||||
>
|
||||
<div class="van-picker-column">
|
||||
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||
class="van-picker-column__wrapper"
|
||||
>
|
||||
</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[`toolbar-position prop 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-picker__columns"
|
||||
|
||||
@ -141,7 +141,7 @@ test('column watch default index', async () => {
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('render title slot', () => {
|
||||
test('should render title slot correctly', () => {
|
||||
const wrapper = mount(Picker, {
|
||||
slots: {
|
||||
title: () => 'Custom title',
|
||||
@ -151,7 +151,16 @@ test('render title slot', () => {
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('render confirm/cancel slot', () => {
|
||||
test('should render toolbar slot correctly', () => {
|
||||
const wrapper = mount(Picker, {
|
||||
slots: {
|
||||
toolbar: () => 'Custom toolbar',
|
||||
},
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should render confirm/cancel slot correctly', () => {
|
||||
const wrapper = mount(Picker, {
|
||||
slots: {
|
||||
confirm: () => 'Custom Confirm',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user