fix(components): trigger update:modelValue by itself (#3660)

trigger update:modelValue by component itself

fix #2282

packages/components/slider/src/index.vue

@@ -12,7 +12,7 @@
     <el-input-number
       v-if="showInput && !range"
       ref="input"
-      v-model="firstValue"
+      :model-value="firstValue"
       class="el-slider__input"
       :step="step"
       :disabled="sliderDisabled"
@@ -21,6 +21,7 @@
       :max="max"
       :debounce="debounce"
       :size="inputSize"
+      @update:modelValue="setFirstValue"
       @change="emitChange"
     />
     <div
@@ -33,16 +34,18 @@
       <div class="el-slider__bar" :style="barStyle"></div>
       <slider-button
         ref="firstButton"
-        v-model="firstValue"
+        :model-value="firstValue"
         :vertical="vertical"
         :tooltip-class="tooltipClass"
+        @update:modelValue="setFirstValue"
       />
       <slider-button
         v-if="range"
         ref="secondButton"
-        v-model="secondValue"
+        :model-value="secondValue"
         :vertical="vertical"
         :tooltip-class="tooltipClass"
+        @update:modelValue="setSecondValue"
       />
       <div v-if="showStops">
         <div
@@ -209,6 +212,8 @@ export default defineComponent({
       resetSize,
       emitChange,
       onSliderClick,
+      setFirstValue,
+      setSecondValue,
     } = useSlide(props, initData, emit)
 
     const { stops, getStopStyle } = useStops(
@@ -265,6 +270,8 @@ export default defineComponent({
       emitChange,
       onSliderClick,
       getStopStyle,
+      setFirstValue,
+      setSecondValue,
 
       stops,
       markList,
@@ -339,26 +346,6 @@ const useWatch = (props, initData, minValue, maxValue, emit, elFormItem) => {
     }
   )
 
-  watch(
-    () => initData.firstValue,
-    (val) => {
-      if (props.range) {
-        _emit([minValue.value, maxValue.value])
-      } else {
-        _emit(val)
-      }
-    }
-  )
-
-  watch(
-    () => initData.secondValue,
-    () => {
-      if (props.range) {
-        _emit([minValue.value, maxValue.value])
-      }
-    }
-  )
-
   watch(
     () => props.modelValue,
     (val, oldVal) => {

packages/components/slider/src/useSlide.ts

@@ -1,5 +1,9 @@
 import { computed, inject, nextTick, ref, shallowRef } from 'vue'
-import { CHANGE_EVENT } from '@element-plus/utils/constants'
+import {
+  CHANGE_EVENT,
+  UPDATE_MODEL_EVENT,
+  INPUT_EVENT,
+} from '@element-plus/utils/constants'
 import { elFormKey, elFormItemKey } from '@element-plus/tokens'
 import type { CSSProperties } from 'vue'
 import type { ButtonRefs, ISliderInitData, ISliderProps } from './slider.type'
@@ -101,6 +105,24 @@ export const useSlide = (
     buttonRefs[buttonRefName].value.setPosition(percent)
   }
 
+  const setFirstValue = (firstValue: number) => {
+    initData.firstValue = firstValue
+    _emit(props.range ? [minValue.value, maxValue.value] : firstValue)
+  }
+
+  const setSecondValue = (secondValue: number) => {
+    initData.secondValue = secondValue
+
+    if (props.range) {
+      _emit([minValue.value, maxValue.value])
+    }
+  }
+
+  const _emit = (val: number | number[]) => {
+    emit(UPDATE_MODEL_EVENT, val)
+    emit(INPUT_EVENT, val)
+  }
+
   const emitChange = async () => {
     await nextTick()
     emit(
@@ -140,5 +162,7 @@ export const useSlide = (
     setPosition,
     emitChange,
     onSliderClick,
+    setFirstValue,
+    setSecondValue,
   }
 }