feat: convert color select component to composition API

src/components/modules/settings/colorSelect.vue

@@ -6,128 +6,137 @@
     <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: () => (['纯色'])
-      innerColor: '',
+})
-      // colorLength: 0,
+
-      // hasEyeDrop: 'EyeDropper' in window,
+const emit = defineEmits<TEmits>()
-    })
+
-    let first = true
+const store = useStore()
+const state = reactive<TState>({
+  innerColor: '',
+  // colorLength: 0,
+  // hasEyeDrop: 'EyeDropper' in window,
+})
+let first = true
+
     // const dColorHistory = computed(() => {
     //   return store.getters.dColorHistory
     // })
 
-    onMounted(() => {
+onMounted(() => {
-      if (props.modelValue) {
+  if (props.modelValue) {
-        let fixColor = props.modelValue + (props.modelValue.length === 7 ? 'ff' : '')
+    let fixColor = props.modelValue + (props.modelValue.length === 7 ? 'ff' : '')
-        // 当前@palxp/color-picker对部分小写16进制颜色处理有异常，统一转为大写
+    // 当前@palxp/color-picker对部分小写16进制颜色处理有异常，统一转为大写
-        state.innerColor = fixColor.toLocaleUpperCase()
+    state.innerColor = fixColor.toLocaleUpperCase()
-      }
+  }
-    })
+})
-    const dropColor = async (e: any) => {
-      console.log('取色: ', e)
-    }
 
-    watch(
+const dropColor = async (color: string) => {
-      () => state.innerColor,
+  console.log('取色: ', color)
-      (value) => {
+}
-        activeChange(value)
-        if (first) {
-          first = false
-          return
-        }
-        // addHistory(value)
-      },
-    )
-    watch(
-      () => props.modelValue,
-      (val) => {
-        val !== state.innerColor && (state.innerColor = val)
-      },
-    )
 
-    const updateValue = (value: any) => {
+watch(
-      emit('update:modelValue', value)
+  () => state.innerColor,
-    }
+  (value) => {
-    const activeChange = (value: any) => {
+    activeChange(value)
-      updateValue(value)
+    if (first) {
-    }
+      first = false
-    const onChange = () => {
+      return
-      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) => {
-      state.innerColor = color
-    }
-
-    const enter = () => {
-      store.commit('setShowMoveable', false) // 清理掉上一次的选择框
-    }
-
-    const hide = () => {
-      store.commit('setShowMoveable', true) // 恢复上一次的选择框
-    }
-
-    const colorChange = (e) => {
-      emit('change', e)
-    }
-
-    return {
-      ...toRefs(state),
-      // dColorHistory,
-      activeChange,
-      onChange,
-      dropColor,
-      inputBlur,
-      enter,
-      hide,
-      colorChange,
     }
+    // addHistory(value)
   },
+)
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    val !== state.innerColor && (state.innerColor = val)
+  },
+)
+
+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)
+// })
+// const colorChange = debounce(150, false, async (e) => {
+//   state.innerColor = e + (e.length === 7 ? 'ff' : '')
+// })
+
+const inputBlur = (color: string) => {
+  state.innerColor = color
+}
+
+const enter = () => {
+  store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+}
+
+const hide = () => {
+  store.commit('setShowMoveable', true) // 恢复上一次的选择框
+}
+
+const colorChange = (color: string) => {
+  emit('change', color)
+}
+
+defineExpose({
+  // dColorHistory,
+  activeChange,
+  onChange,
+  dropColor,
+  inputBlur,
+  enter,
+  hide,
+  colorChange,
 })
 </script>