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

fix(Picker): should not render mask and frame when options is empty (#10135)

Browse Source 
* docs(Search): update action slot demo

* fix(Picker): should not render mask and frame when options is empty
This commit is contained in:
neverland 2021-12-31 10:43:17 +08:00 committed by GitHub
parent e36081d68a
commit be0de2023c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 35 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/vant/src/area/test/__snapshots__/demo.spec.ts.snap
View File

@ -165,14 +165,6 @@ exports[`should render demo and match snapshot 1`] = `
</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>
</div>
@ -331,14 +323,6 @@ exports[`should render demo and match snapshot 1`] = `
</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>
</div>
@ -410,14 +394,6 @@ exports[`should render demo and match snapshot 1`] = `
</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>
</div>
@ -495,14 +471,6 @@ exports[`should render demo and match snapshot 1`] = `
>
</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>
</div>

16
packages/vant/src/area/test/__snapshots__/index.spec.js.snap
View File

@ -36,14 +36,6 @@ exports[`should render columns-top、columns-bottom slot correctly 1`] = `
>
</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>
Bottom
</div>
@ -130,14 +122,6 @@ exports[`should render two columns when columns-num prop is two 1`] = `
</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>
`;

31
packages/vant/src/picker/Picker.tsx
View File

@ -352,14 +352,29 @@ export default defineComponent({
/>
));
const renderMask = (wrapHeight: number) => {
const hasOptions = formattedColumns.value.some(
(item) => item[valuesKey] && item[valuesKey].length !== 0
);
if (hasOptions) {
const frameStyle = { height: `${itemHeight.value}px` };
const maskStyle = {
backgroundSize: `100% ${(wrapHeight - itemHeight.value) / 2}px`,
};
return [
<div class={bem('mask')} style={maskStyle} />,
<div
class={[BORDER_UNSET_TOP_BOTTOM, bem('frame')]}
style={frameStyle}
/>,
];
}
};
const renderColumns = () => {
const wrapHeight = itemHeight.value * +props.visibleItemCount;
const frameStyle = { height: `${itemHeight.value}px` };
const columnsStyle = { height: `${wrapHeight}px` };
const maskStyle = {
backgroundSize: `100% ${(wrapHeight - itemHeight.value) / 2}px`,
};
return (
<div
class={bem('columns')}
@ -367,11 +382,7 @@ export default defineComponent({
onTouchmove={preventDefault}
>
{renderColumnItems()}
<div class={bem('mask')} style={maskStyle} />
<div
class={[BORDER_UNSET_TOP_BOTTOM, bem('frame')]}
style={frameStyle}
/>
{renderMask(wrapHeight)}
</div>
);
};

40
packages/vant/src/picker/test/__snapshots__/index.spec.tsx.snap
View File

@ -168,14 +168,6 @@ exports[`columns-top、columns-bottom prop 1`] = `
>
</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>
Custom Columns Bottom
</div>
@ -403,14 +395,6 @@ exports[`should render confirm/cancel slot correctly 1`] = `
>
</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>
`;
@ -439,14 +423,6 @@ exports[`should render title slot correctly 1`] = `
>
</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>
`;
@ -465,14 +441,6 @@ exports[`should render toolbar slot correctly 1`] = `
>
</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>
`;
@ -488,14 +456,6 @@ exports[`toolbar-position prop 1`] = `
>
</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 class="van-picker__toolbar">
<button type="button"

14
packages/vant/src/picker/test/index.spec.tsx
View File

@ -345,3 +345,17 @@ test('readonly prop', () => {
expect(wrapper.emitted('change')).toBeFalsy();
});
test('should not render mask and frame when options is empty', async () => {
const wrapper = mount(Picker, {
props: {
columns: [{ values: [] }],
},
});
expect(wrapper.find('.van-picker__mask').exists()).toBeFalsy();
expect(wrapper.find('.van-picker__frame').exists()).toBeFalsy();
await wrapper.setProps({ columns: [{ values: ['foo'] }] });
expect(wrapper.find('.van-picker__mask').exists()).toBeTruthy();
expect(wrapper.find('.van-picker__frame').exists()).toBeTruthy();
});