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(Cascader): add show-header prop (#10202)

Browse Source
This commit is contained in:
neverland 2022-01-17 10:41:43 +08:00 committed by GitHub
parent f50c462978
commit d1465c2a11
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 30 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/vant/src/cascader/Cascader.tsx
View File

@ -33,6 +33,7 @@ const cascaderProps = {
closeable: truthProp, closeable: truthProp,
swipeable: truthProp, swipeable: truthProp,
closeIcon: makeStringProp('cross'), closeIcon: makeStringProp('cross'),
showHeader: truthProp,
modelValue: numericProp, modelValue: numericProp,
fieldNames: Object as PropType<CascaderFieldNames>, fieldNames: Object as PropType<CascaderFieldNames>,
placeholder: String, placeholder: String,
@ -185,20 +186,21 @@ export default defineComponent({
const onClickTab = ({ name, title }: TabsClickTabEventParams) => const onClickTab = ({ name, title }: TabsClickTabEventParams) =>
emit('click-tab', name, title); emit('click-tab', name, title);
const renderHeader = () => ( const renderHeader = () =>
<div class={bem('header')}> props.showHeader ? (
<h2 class={bem('title')}> <div class={bem('header')}>
{slots.title ? slots.title() : props.title} <h2 class={bem('title')}>
</h2> {slots.title ? slots.title() : props.title}
{props.closeable ? ( </h2>
<Icon {props.closeable ? (
name={props.closeIcon} <Icon
class={[bem('close-icon'), HAPTICS_FEEDBACK]} name={props.closeIcon}
onClick={onClose} class={[bem('close-icon'), HAPTICS_FEEDBACK]}
/> onClick={onClose}
) : null} />
</div> ) : null}
); </div>
) : null;
const renderOption = ( const renderOption = (
option: CascaderOption, option: CascaderOption,

1
packages/vant/src/cascader/README.md
View File

@ -253,6 +253,7 @@ export default {
| active-color | Active color | _string_ | `#ee0a24` | | active-color | Active color | _string_ | `#ee0a24` |
| swipeable `v3.0.11` | Whether to enable gestures to slide left and right | _boolean_ | `false` | | swipeable `v3.0.11` | Whether to enable gestures to slide left and right | _boolean_ | `false` |
| closeable | Whether to show close icon | _boolean_ | `true` | | closeable | Whether to show close icon | _boolean_ | `true` |
| show-header `v3.4.2` | Whether to show header | _boolean_ | `true` |
| close-icon `v3.0.10` | Close icon name | _string_ | `cross` | | close-icon `v3.0.10` | Close icon name | _string_ | `cross` |
| field-names `v3.0.4` | Custom the fields of options | _object_ | `{ text: 'text', value: 'value', children: 'children' }` | | field-names `v3.0.4` | Custom the fields of options | _object_ | `{ text: 'text', value: 'value', children: 'children' }` |

1
packages/vant/src/cascader/README.zh-CN.md
View File

@ -263,6 +263,7 @@ export default {
| active-color | 选中状态的高亮颜色 | _string_ | `#ee0a24` | | active-color | 选中状态的高亮颜色 | _string_ | `#ee0a24` |
| swipeable `v3.0.11` | 是否开启手势左右滑动切换 | _boolean_ | `false` | | swipeable `v3.0.11` | 是否开启手势左右滑动切换 | _boolean_ | `false` |
| closeable | 是否显示关闭图标 | _boolean_ | `true` | | closeable | 是否显示关闭图标 | _boolean_ | `true` |
| show-header `v3.4.2` | 是否展示标题栏 | _boolean_ | `true` |
| close-icon `v3.0.10` | 关闭图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `cross` | | close-icon `v3.0.10` | 关闭图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `cross` |
| field-names `v3.0.4` | 自定义 `options` 结构中的字段 | _object_ | `{ text: 'text', value: 'value', children: 'children' }` | | field-names `v3.0.4` | 自定义 `options` 结构中的字段 | _object_ | `{ text: 'text', value: 'value', children: 'children' }` |

12
packages/vant/src/cascader/test/index.spec.ts
View File

@ -261,3 +261,15 @@ test('should render options-top、options-bottom slots correctly', async () => {
expect(wrapper.find('.van-tab__panel').html()).toMatchSnapshot(); expect(wrapper.find('.van-tab__panel').html()).toMatchSnapshot();
}); });
test('should not render header when show-header prop is false', async () => {
const wrapper = mount(Cascader, {
props: {
options,
showHeader: false,
},
});
const header = wrapper.find('.van-cascader__header');
expect(header.exists()).toBeFalsy();
});