feat: convert number slider to composition API

src/components/modules/settings/numberSlider.vue

@@ -8,68 +8,72 @@
 <template>
   <div id="number-slider">
     <span :style="{ width: labelWidth }" class="label">{{ label }}</span>
-    <el-slider v-model="innerValue" :min="minValue" :max="maxValue" :step="step" input-size="small" :show-input="showInput" :show-tooltip="false" :show-input-controls="false" @change="changeValue"> </el-slider>
+    <el-slider
+      v-model="innerValue"
+      :min="minValue" :max="maxValue" :step="step"
+      input-size="small" 
+      :show-input="showInput" :show-tooltip="false" :show-input-controls="false"
+      @change="changeValue"
+    /> 
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
-const NAME = 'number-slider'
+// const NAME = 'number-slider'
-import { mapGetters, mapActions } from 'vuex'
+import { Arrayable } from 'element-plus/es/utils';
+import { watch, ref, onMounted } from 'vue';
+import { mapActions } from 'vuex'
 
-export default {
+type TProps = {
-  name: NAME,
+  label?: string
-  props: {
+  labelWidth?: string
-    label: {
+  modelValue?: number
-      default: '',
+  minValue?: number
-    },
+  maxValue?: number
-    labelWidth: {
+  step?: number
-      default: '71px',
+  showInput?: boolean
-    },
-    modelValue: {
-      default: 0,
-    },
-    minValue: {
-      default: 0,
-    },
-    maxValue: {
-      default: 500,
-    },
-    step: {
-      default: 1,
-    },
-    showInput: {
-      default: true,
-    },
-  },
-  emits: ['update:modelValue', 'finish'],
-  data() {
-    return {
-      innerValue: 0,
-      // first: true,
 }
-  },
+
-  computed: {
+type TEmits = {
-    ...mapGetters([]),
+  (event: 'update:modelValue', data: number): void
-  },
+  (event: 'finish', data: Arrayable<number>): void
-  watch: {
-    innerValue(value) {
-      if (this.modelValue !== value) {
-        this.$emit('update:modelValue', value)
 }
-    },
+
-    modelValue(val) {
+const props = withDefaults(defineProps<TProps>(), {
-      this.innerValue = this.modelValue
+  label: '',
-    },
+  labelWidth: '71px',
-  },
+  modelValue: 0,
-  created() {
+  minValue: 0,
-    this.innerValue = this.modelValue
+  maxValue: 500,
-  },
+  step: 1,
-  methods: {
+  showInput: true
-    ...mapActions([]),
+})
-    changeValue(value) {
+const emit = defineEmits<TEmits>()
-      this.$emit('finish', value)
+
-    },
+const innerValue = ref<number>(0)
-  },
+
+watch(
+  () => innerValue.value,
+  (value) => {
+    if (props.modelValue !== value) {
+      emit('update:modelValue', value)
+    }
+  }
+)
+
+watch(
+  () => props.modelValue,
+  () => {
+    innerValue.value = props.modelValue
+  }
+)
+
+onMounted(() => {
+  innerValue.value = props.modelValue
+})
+
+function changeValue(value: Arrayable<number>) {
+  emit('finish', value)
 }
 </script>