feat: convert color select component to composition API

src/components/modules/settings/colorSelect.vue

@@ -6,67 +6,75 @@
     <div class="content">
       <el-popover placement="left-end" trigger="click" width="auto" @after-enter="enter" @before-leave="hide">
         <!-- eslint-disable-next-line vue/no-v-model-argument -->
-        <color-picker v-model:value="innerColor" :modes="modes" @change="colorChange" @nativePick="dropColor" />
+        <color-picker v-model:value="state.innerColor" :modes="modes" @change="colorChange" @nativePick="dropColor" />
         <template #reference>
-          <div class="color__bar" :style="{ background: innerColor }"></div>
+          <div class="color__bar" :style="{ background: state.innerColor }"></div>
         </template>
       </el-popover>
     </div>
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-const NAME = 'color-select'
+// const NAME = 'color-select'
-import { defineComponent, toRefs, reactive, computed, onMounted, watch } from 'vue'
+import {reactive, onMounted, watch } from 'vue'
 import { useStore } from 'vuex'
 // import { debounce } from 'throttle-debounce'
 // import { toolTip } from '@/common/methods/helper'
 // import colorPicker from '@/utils/plugins/color-picker/index.vue'
 import colorPicker from '@palxp/color-picker'
 
-export default defineComponent({
+type TProps = {
-  name: NAME,
+  label?: string
-  components: { colorPicker },
+  modelValue?: string
-  inheritAttrs: false,
+  width?: string
-  props: {
+  modes?: string[]
-    label: {
+}
-      default: '',
+
-    },
+type TEmits = {
-    modelValue: {
+  (event: 'finish', data: string): void
-      default: '',
+  (event: 'update:modelValue', data: string): void
-    },
+  (event: 'change', data: string): void
-    width: {
+}
-      default: '100%',
+
-    },
+type TState = {
-    modes: {
+  innerColor: string
-      default: () => ['纯色'],
+}
-    },
+
-  },
+const props = withDefaults(defineProps<TProps>(), {
-  emits: ['finish', 'update:modelValue', 'change'],
+  label: '',
-  setup(props, { emit }) {
+  modelValue: '',
-    const store = useStore()
+  width: '100%',
-    const state: any = reactive({
+  modes: () => (['纯色'])
+})
+
+const emit = defineEmits<TEmits>()
+
+const store = useStore()
+const state = reactive<TState>({
   innerColor: '',
   // colorLength: 0,
   // hasEyeDrop: 'EyeDropper' in window,
-    })
+})
-    let first = true
+let first = true
+
     // const dColorHistory = computed(() => {
     //   return store.getters.dColorHistory
     // })
 
-    onMounted(() => {
+onMounted(() => {
   if (props.modelValue) {
     let fixColor = props.modelValue + (props.modelValue.length === 7 ? 'ff' : '')
     // 当前@palxp/color-picker对部分小写16进制颜色处理有异常，统一转为大写
     state.innerColor = fixColor.toLocaleUpperCase()
   }
-    })
+})
-    const dropColor = async (e: any) => {
-      console.log('取色: ', e)
-    }
 
-    watch(
+const dropColor = async (color: string) => {
+  console.log('取色: ', color)
+}
+
+watch(
   () => state.innerColor,
   (value) => {
     activeChange(value)
@@ -76,48 +84,51 @@ export default defineComponent({
     }
     // addHistory(value)
   },
-    )
+)
-    watch(
+
+watch(
   () => props.modelValue,
   (val) => {
     val !== state.innerColor && (state.innerColor = val)
   },
-    )
+)
 
-    const updateValue = (value: any) => {
+const updateValue = (value: any) => {
   emit('update:modelValue', value)
-    }
+}
-    const activeChange = (value: any) => {
+
+const activeChange = (value: any) => {
   updateValue(value)
-    }
+}
-    const onChange = () => {
+
+const onChange = () => {
   emit('finish', state.innerColor)
-    }
+}
-    // const addHistory = debounce(300, false, async (value) => {
-    //   store.dispatch('pushColorToHistory', value)
-    // })
-    // const colorChange = debounce(150, false, async (e) => {
-    //   state.innerColor = e + (e.length === 7 ? 'ff' : '')
-    // })
 
-    const inputBlur = (color: string) => {
+// const addHistory = debounce(300, false, async (value) => {
+//   store.dispatch('pushColorToHistory', value)
+// })
+// const colorChange = debounce(150, false, async (e) => {
+//   state.innerColor = e + (e.length === 7 ? 'ff' : '')
+// })
+
+const inputBlur = (color: string) => {
   state.innerColor = color
-    }
+}
 
-    const enter = () => {
+const enter = () => {
   store.commit('setShowMoveable', false) // 清理掉上一次的选择框
-    }
+}
 
-    const hide = () => {
+const hide = () => {
   store.commit('setShowMoveable', true) // 恢复上一次的选择框
-    }
+}
 
-    const colorChange = (e) => {
+const colorChange = (color: string) => {
-      emit('change', e)
+  emit('change', color)
-    }
+}
 
-    return {
+defineExpose({
-      ...toRefs(state),
   // dColorHistory,
   activeChange,
   onChange,
@@ -126,8 +137,6 @@ export default defineComponent({
   enter,
   hide,
   colorChange,
-    }
-  },
 })
 </script>