feat: convert color select component to composition API

src/components/modules/settings/colorSelect.vue

@@ -6,51 +6,58 @@
     <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: '',
+  width: '100%',
+  modes: () => (['纯色'])
+})
+
+const emit = defineEmits<TEmits>()
+
 const store = useStore()
-    const state: any = reactive({
+const state = reactive<TState>({
   innerColor: '',
   // colorLength: 0,
   // hasEyeDrop: 'EyeDropper' in window,
 })
 let first = true
+
     // const dColorHistory = computed(() => {
     //   return store.getters.dColorHistory
     // })
@@ -62,8 +69,9 @@ export default defineComponent({
     state.innerColor = fixColor.toLocaleUpperCase()
   }
 })
-    const dropColor = async (e: any) => {
+
-      console.log('取色: ', e)
+const dropColor = async (color: string) => {
+  console.log('取色: ', color)
 }
 
 watch(
@@ -77,6 +85,7 @@ export default defineComponent({
     // addHistory(value)
   },
 )
+
 watch(
   () => props.modelValue,
   (val) => {
@@ -87,12 +96,15 @@ export default defineComponent({
 const updateValue = (value: any) => {
   emit('update:modelValue', value)
 }
+
 const activeChange = (value: any) => {
   updateValue(value)
 }
+
 const onChange = () => {
   emit('finish', state.innerColor)
 }
+
 // const addHistory = debounce(300, false, async (value) => {
 //   store.dispatch('pushColorToHistory', value)
 // })
@@ -112,12 +124,11 @@ export default defineComponent({
   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>