fix(cascader): [cascader,select] add the changeCompat attribute to the component (#2934)

* fix(option): add title prop for options

* fix(cascader): add changeCompat属性

Author: shenjunjian

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)
   }

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)
 

packages/vue/src/cascader/src/index.ts

@@ -100,6 +100,10 @@ export const cascaderProps = {
   blank: {
     type: Boolean,
     default: false
+  },
+  changeCompat: {
+    type: Boolean,
+    default: false
   }
 }
 

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

packages/vue/src/cascader/src/pc.vue

@@ -234,7 +234,8 @@ export default defineComponent({
     'label',
     'tip',
     'hoverExpand',
-    'blank'
+    'blank',
+    'changeCompat'
   ],
   emits: [
     'update:modelValue',

packages/vue/src/option/src/pc.vue

@@ -17,6 +17,7 @@
       },
       highlightClass
     ]"
+    :title="state.currentLabel || ''"
   >
     <span v-if="state.selectMultiple" class="tiny-option__checkbox-wrap tiny-select-dropdown__item-checkbox">
       <component :is="`icon-${state.selectCls}`" :class="`tiny-svg-size ${state.selectCls}`" />