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(Cascader): failed to update tabs when value is zero (#7778)

Browse Source
This commit is contained in:
neverland 2020-12-21 10:46:30 +08:00 committed by GitHub
parent a9134162f6
commit 659ea9cf07
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 104 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/cascader/README.md
View File

@ -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` | - |

28
src/cascader/README.zh-CN.md
View File

@ -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` | - |

6
src/cascader/index.js
View File

@ -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 (
<Tab
title={title}
titleClass={bem('tab-title', {
titleClass={bem('tab', {
unselected: !selectedOption,
})}
>

6
src/cascader/index.less
View File

@ -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;
}
}

40
src/cascader/test/__snapshots__/index.spec.js.snap
View File

@ -6,3 +6,43 @@ exports[`should select correct option when value changed 1`] = `
<li class="van-cascader__option van-cascader__option--selected"><span>Ouhai</span><i class="van-icon van-icon-success van-cascader__selected-icon">
<!----></i></li>
`;
exports[`should update tabs when previous tab is clicked 1`] = `
<div class="van-cascader">
<div class="van-cascader__header">
<h2 class="van-cascader__title"></h2><i class="van-icon van-icon-cross van-cascader__close-icon">
<!----></i>
</div>
<div class="van-tabs van-tabs--line van-cascader__tabs">
<div class="van-tabs__wrap van-tabs__wrap--scrollable">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete">
<div role="tab" class="van-tab van-cascader__tab"><span class="van-tab__text">Jiangsu</span></div>
<div role="tab" class="van-tab van-tab--active van-cascader__tab van-cascader__tab--unselected" aria-selected="true"><span class="van-tab__text">请选择</span></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%); transition-duration: 0.3s;"></div>
</div>
</div>
<div class="van-tabs__content van-tabs__content--animated">
<div class="van-tabs__track" style="transform: translate3d(-100%, 0, 0); transition-duration: 0.3s;">
<div role="tabpanel" class="van-tab__pane-wrapper van-tab__pane-wrapper--inactive" aria-hidden="true">
<div class="van-tab__pane">
<ul class="van-cascader__options">
<li class="van-cascader__option"><span>Zhejiang</span></li>
<li class="van-cascader__option van-cascader__option--selected"><span>Jiangsu</span><i class="van-icon van-icon-success van-cascader__selected-icon">
<!----></i></li>
</ul>
</div>
</div>
<div role="tabpanel" class="van-tab__pane-wrapper">
<div class="van-tab__pane">
<ul class="van-cascader__options">
<li class="van-cascader__option"><span>Nanjing</span></li>
<li class="van-cascader__option"><span>Wuxi</span></li>
<li class="van-cascader__option"><span>Xuzhou</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
`;

28
src/cascader/test/index.spec.js
View File

@ -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();
});

4
src/style/var.less
View File

@ -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;