diff --git a/packages/renderless/src/cascader/index.ts b/packages/renderless/src/cascader/index.ts index 34341c2a17..16f35ccf7f 100644 --- a/packages/renderless/src/cascader/index.ts +++ b/packages/renderless/src/cascader/index.ts @@ -81,10 +81,12 @@ export const computePresentContent = } } +/** 用户在修改值,不必触发change */ export const watchValue = ({ api, state }: { api: ICascaderApi; state: ICascaderState }) => (value) => { if (!isEqual(value, state.checkedValue as any)) { + state.userChangeValue = true state.checkedValue = value setTimeout(api.computePresentContent) } @@ -97,7 +99,8 @@ export const watchCheckedValue = dispatch, api, emit, - state + state, + props }: { api: ICascaderApi emit: ICascadeRenderlessParamUtils['emit'] @@ -122,8 +125,18 @@ export const watchCheckedValue = ]) }) - emit('update:modelValue', value) - emit('change', value) + // 用户触发的modelValue变化时: props.changeCompat=true, 则emit, 否则忽略 + if (state.userChangeValue) { + if (props.changeCompat) { + emit('update:modelValue', value) + emit('change', value) + state.userChangeValue = false + } + } else { + // 非用户触发modelValue, 表明是用户操作click, delete时的动作。 + emit('update:modelValue', value) + emit('change', value) + } setTimeout(api.updateStyle) } diff --git a/packages/renderless/src/cascader/vue.ts b/packages/renderless/src/cascader/vue.ts index 84026eaf1c..4c81fdfe78 100644 --- a/packages/renderless/src/cascader/vue.ts +++ b/packages/renderless/src/cascader/vue.ts @@ -133,7 +133,8 @@ const initState = ({ isHidden: false, tooltipVisible: false, tooltipContent: '', - tagTypeWhenMultiple: designConfig?.tagTypeWhenMultiple || '' + tagTypeWhenMultiple: designConfig?.tagTypeWhenMultiple || '', + userChangeValue: false }) return state as ICascaderState @@ -188,7 +189,7 @@ const initApi = ({ watchValue: watchValue({ api, state }), computePresentTags: computePresentTags({ api, props, state }), computePresentContent: computePresentContent({ api, state }), - watchCheckedValue: watchCheckedValue({ constants, dispatch, api, nextTick, emit, state }), + watchCheckedValue: watchCheckedValue({ constants, dispatch, api, nextTick, emit, state, props }), toggleDropDownVisible: toggleDropDownVisible({ emit, vm, state, updatePopper }), selfMounted: selfMounted({ api, parent, props, vm, state }), handleBeforeUpdate: handleBeforeUpdate({ props, api, state }), @@ -217,7 +218,7 @@ const initWatch = ({ }) => { watch(() => state.disabled, api.computePresentContent) - watch(() => props.modelValue, api.watchValue) + watch(() => props.modelValue, api.watchValue) // 用户在修改值,不必触发change watch(() => state.checkedValue, api.watchCheckedValue) diff --git a/packages/vue/src/cascader/src/index.ts b/packages/vue/src/cascader/src/index.ts index d2ed74fa2f..335bb6fc3d 100644 --- a/packages/vue/src/cascader/src/index.ts +++ b/packages/vue/src/cascader/src/index.ts @@ -100,6 +100,10 @@ export const cascaderProps = { blank: { type: Boolean, default: false + }, + changeCompat: { + type: Boolean, + default: false } } diff --git a/packages/vue/src/cascader/src/mobile-first.vue b/packages/vue/src/cascader/src/mobile-first.vue index aabbde9175..5ea31bc551 100644 --- a/packages/vue/src/cascader/src/mobile-first.vue +++ b/packages/vue/src/cascader/src/mobile-first.vue @@ -40,6 +40,7 @@ import { IconChevronRight } from '@opentiny/vue-icon' import CascaderMobile from '@opentiny/vue-cascader-mobile' import PcFirst from './pc-first.vue' + export default defineComponent({ props: [ ...props, @@ -91,7 +92,8 @@ export default defineComponent({ 'expand-change', 'active-item-change', 'remove-tag', - 'created' + 'created', + 'changeCompat' ], setup(props, ctx) { const bp = useBreakpoint().current diff --git a/packages/vue/src/cascader/src/pc.vue b/packages/vue/src/cascader/src/pc.vue index 3393511fae..ebedef5873 100644 --- a/packages/vue/src/cascader/src/pc.vue +++ b/packages/vue/src/cascader/src/pc.vue @@ -234,7 +234,8 @@ export default defineComponent({ 'label', 'tip', 'hoverExpand', - 'blank' + 'blank', + 'changeCompat' ], emits: [ 'update:modelValue', diff --git a/packages/vue/src/option/src/pc.vue b/packages/vue/src/option/src/pc.vue index a1e2c3f028..dca6c333e2 100644 --- a/packages/vue/src/option/src/pc.vue +++ b/packages/vue/src/option/src/pc.vue @@ -17,6 +17,7 @@ }, highlightClass ]" + :title="state.currentLabel || ''" >