diff --git a/src/cascader/README.md b/src/cascader/README.md index 74171cf3e..7b2ffbd62 100644 --- a/src/cascader/README.md +++ b/src/cascader/README.md @@ -162,17 +162,17 @@ export default { How to use: [Custom Theme](#/en-US/theme). -| Name | Default Value | Description | -| ------------------------------------ | --------------- | ----------- | -| @cascader-header-height | `48px` | - | -| @cascader-title-font-size | `@font-size-lg` | - | -| @cascader-title-line-height | `20px` | - | -| @cascader-close-icon-size | `22px` | - | -| @cascader-close-icon-color | `@gray-5` | - | -| @cascader-close-icon-active-color | `@gray-6` | - | -| @cascader-selected-icon-size | `18px` | - | -| @cascader-tabs-height | `48px` | - | -| @cascader-active-color | `@red` | - | -| @cascader-options-height | `384px` | - | -| @cascader-tab-title-color | `@text-color` | - | -| @cascader-unselected-tab-title-color | `@gray-6` | - | +| Name | Default Value | Description | +| --------------------------------- | --------------- | ----------- | +| @cascader-header-height | `48px` | - | +| @cascader-title-font-size | `@font-size-lg` | - | +| @cascader-title-line-height | `20px` | - | +| @cascader-close-icon-size | `22px` | - | +| @cascader-close-icon-color | `@gray-5` | - | +| @cascader-close-icon-active-color | `@gray-6` | - | +| @cascader-selected-icon-size | `18px` | - | +| @cascader-tabs-height | `48px` | - | +| @cascader-active-color | `@red` | - | +| @cascader-options-height | `384px` | - | +| @cascader-tab-color | `@text-color` | - | +| @cascader-unselected-tab-color | `@gray-6` | - | diff --git a/src/cascader/README.zh-CN.md b/src/cascader/README.zh-CN.md index a39fad0f5..7627cce01 100644 --- a/src/cascader/README.zh-CN.md +++ b/src/cascader/README.zh-CN.md @@ -174,17 +174,17 @@ export default { 组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 -| 名称 | 默认值 | 描述 | -| ------------------------------------ | --------------- | ---- | -| @cascader-header-height | `48px` | - | -| @cascader-title-font-size | `@font-size-lg` | - | -| @cascader-title-line-height | `20px` | - | -| @cascader-close-icon-size | `22px` | - | -| @cascader-close-icon-color | `@gray-5` | - | -| @cascader-close-icon-active-color | `@gray-6` | - | -| @cascader-selected-icon-size | `18px` | - | -| @cascader-tabs-height | `48px` | - | -| @cascader-active-color | `@red` | - | -| @cascader-options-height | `384px` | - | -| @cascader-tab-title-color | `@text-color` | - | -| @cascader-unselected-tab-title-color | `@gray-6` | - | +| 名称 | 默认值 | 描述 | +| --------------------------------- | --------------- | ---- | +| @cascader-header-height | `48px` | - | +| @cascader-title-font-size | `@font-size-lg` | - | +| @cascader-title-line-height | `20px` | - | +| @cascader-close-icon-size | `22px` | - | +| @cascader-close-icon-color | `@gray-5` | - | +| @cascader-close-icon-active-color | `@gray-6` | - | +| @cascader-selected-icon-size | `18px` | - | +| @cascader-tabs-height | `48px` | - | +| @cascader-active-color | `@red` | - | +| @cascader-options-height | `384px` | - | +| @cascader-tab-color | `@text-color` | - | +| @cascader-unselected-tab-color | `@gray-6` | - | diff --git a/src/cascader/index.js b/src/cascader/index.js index b48858653..1acc95ea9 100644 --- a/src/cascader/index.js +++ b/src/cascader/index.js @@ -35,7 +35,7 @@ export default createComponent({ }, value(value) { - if (value) { + if (value || value === 0) { const values = this.tabs.map((tab) => tab.selectedOption?.value); if (values.indexOf(value) !== -1) { return; @@ -71,7 +71,7 @@ export default createComponent({ }, updateTabs() { - if (this.value) { + if (this.value || this.value === 0) { const selectedOptions = this.getSelectedOptionsByValue( this.options, this.value @@ -212,7 +212,7 @@ export default createComponent({ return ( diff --git a/src/cascader/index.less b/src/cascader/index.less index f896d942b..cc43b2750 100644 --- a/src/cascader/index.less +++ b/src/cascader/index.less @@ -36,12 +36,12 @@ } } - &__tab-title { - color: @cascader-tab-title-color; + &__tab { + color: @cascader-tab-color; font-weight: @font-weight-bold; &--unselected { - color: @cascader-unselected-tab-title-color; + color: @cascader-unselected-tab-color; } } diff --git a/src/cascader/test/__snapshots__/index.spec.js.snap b/src/cascader/test/__snapshots__/index.spec.js.snap index 882d6490b..c3f5d8547 100644 --- a/src/cascader/test/__snapshots__/index.spec.js.snap +++ b/src/cascader/test/__snapshots__/index.spec.js.snap @@ -6,3 +6,43 @@ exports[`should select correct option when value changed 1`] = `
  • Ouhai
    • `; + +exports[`should update tabs when previous tab is clicked 1`] = ` +
    +
    +

    + +
    +
    +
    +
    + + +
    +
    +
    +
    +
    + +
    +
    +
      +
    • Nanjing
      • +
    • Wuxi
      • +
    • Xuzhou
      • +
    +
    +
    +
    +
    +
    +
    +`; diff --git a/src/cascader/test/index.spec.js b/src/cascader/test/index.spec.js index 96b52e39a..25b87094e 100644 --- a/src/cascader/test/index.spec.js +++ b/src/cascader/test/index.spec.js @@ -94,3 +94,31 @@ test('should select correct option when value changed', async () => { const lastSelectedOption = selectedOptions.at(selectedOptions.length - 1); expect(lastSelectedOption).toMatchSnapshot(); }); + +test('should reset selected options when value is set to emtpy', async () => { + const wrapper = mount(Cascader, { + propsData: { + value: '330304', + options, + }, + }); + + await later(); + wrapper.setProps({ value: '' }); + await later(); + expect(wrapper.contains('.van-cascader__option--selected')).toBeFalsy(); +}); + +test('should update tabs when previous tab is clicked', async () => { + const wrapper = mount(Cascader, { + propsData: { + value: '330304', + options, + }, + }); + + await later(); + wrapper.findAll('.van-cascader__option').at(1).trigger('click'); + await later(); + expect(wrapper.html()).toMatchSnapshot(); +}); diff --git a/src/style/var.less b/src/style/var.less index 9fd4da462..f5fc223ed 100644 --- a/src/style/var.less +++ b/src/style/var.less @@ -212,8 +212,8 @@ @cascader-tabs-height: 48px; @cascader-active-color: @red; @cascader-options-height: 384px; -@cascader-tab-title-color: @text-color; -@cascader-unselected-tab-title-color: @gray-6; +@cascader-tab-color: @text-color; +@cascader-unselected-tab-color: @gray-6; // Cell @cell-font-size: @font-size-md;