fix: maxTagmaxTagPlaceholder not work

refactor-cascader
tangjinzhou 2022-01-21 21:28:42 +08:00
parent c304ebb54f
commit 3e39a9ff79
6 changed files with 11 additions and 4 deletions

View File

@ -26,7 +26,7 @@ exports[`renders ./components/cascader/demo/custom-render.vue correctly 1`] = `
<div style="width: 100%;" class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow">
<!---->
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" style="opacity: 0;" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" readonly="" unselectable="on" type="search"></span><span class="ant-select-selection-item"><span><span>Zhejiang ( <a></a> ) </span></span></span>
<div class="ant-select-selector"><span class="ant-select-selection-search"><input id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" style="opacity: 0;" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" readonly="" unselectable="on" type="search"></span><span class="ant-select-selection-item"><span><span>Zhejiang /</span></span><span><span>Hangzhou /</span></span><span><span>West Lake ( <a>752100</a> ) </span></span></span>
<!---->
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span><span class="ant-select-clear" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span>
</div>

View File

@ -325,7 +325,7 @@ exports[`renders ./components/select/demo/responsive.vue correctly 1`] = `
<div class="ant-select-selection-overflow">
<div class="ant-select-selection-overflow-item" style="opacity: 1;"><span class="ant-select-selection-item" title="Long Label: a10"><span class="ant-select-selection-item-content">Long Label: a10</span><span class="ant-select-selection-item-remove" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span></span></div>
<div class="ant-select-selection-overflow-item" style="opacity: 1;"><span class="ant-select-selection-item" title="Long Label: c12"><span class="ant-select-selection-item-content">Long Label: c12</span><span class="ant-select-selection-item-remove" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span></span></div>
<div class="ant-select-selection-overflow-item ant-select-selection-overflow-item-rest" style="opacity: 1;"><span class="ant-select-selection-item" title="+ 3 ..."><span class="ant-select-selection-item-content">+ 3 ...</span>
<div class="ant-select-selection-overflow-item ant-select-selection-overflow-item-rest" style="opacity: 1;"><span class="ant-select-selection-item"><span class="ant-select-selection-item-content"><span style="color: red;">+ 3 ...</span></span>
<!----></span>
</div>
<div class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix" style="opacity: 1;">

View File

@ -34,7 +34,11 @@ Set a number and automatically fold after exceeding.
placeholder="Select Item..."
:max-tag-count="maxTagCount"
:options="options"
></a-select>
>
<template #maxTagPlaceholder="omittedValues">
<span style="color: red">+ {{ omittedValues.length }} ...</span>
</template>
</a-select>
<h2>maxTagCount: responsive</h2>
<a-select
v-model:value="value"

View File

@ -69,6 +69,7 @@ const Select = defineComponent({
'option',
'placeholder',
'tagRender',
'maxTagPlaceholder',
],
setup(props, { attrs, emit, slots, expose }) {
const selectRef = ref<BaseSelectRef>();
@ -205,6 +206,7 @@ const Select = defineComponent({
transitionName={transitionName.value}
children={slots.default?.()}
tagRender={props.tagRender || slots.tagRender}
maxTagPlaceholder={props.maxTagPlaceholder || slots.maxTagPlaceholder}
></RcSelect>
);
};

View File

@ -266,6 +266,7 @@ const TreeSelect = defineComponent({
...slots,
treeCheckable: () => <span class={`${prefixCls.value}-tree-checkbox-inner`} />,
}}
maxTagPlaceholder={props.maxTagPlaceholder || slots.maxTagPlaceholder}
/>
);
};

View File

@ -268,6 +268,7 @@ export default defineComponent({
[],
missingValues,
];
return;
}
const keyPathValues = toPathKeys(existValues);
@ -286,7 +287,6 @@ export default defineComponent({
const deDuplicatedValues = computed(() => {
const checkedKeys = toPathKeys(checkedValues.value);
const deduplicateKeys = formatStrategyValues(checkedKeys, pathKeyEntities.value);
return [...missingCheckedValues.value, ...getValueByKeyPath(deduplicateKeys)];
});