From ff154d4d7bd7efd1294f6b4ebed4edbbbedd05d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=90=BD=E5=B0=8F=E6=A2=85?= <425605679@qq.com>
Date: Thu, 21 Oct 2021 18:17:05 +0800
Subject: [PATCH] =?UTF-8?q?feat(iconPicker):=20=E7=BC=93=E5=AD=98=E5=B7=A5?=
 =?UTF-8?q?=E4=BD=9C=E7=A9=BA=E9=97=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/module/colorPicker/ColorBox.vue    | 27 ++++++++++----------------
 src/module/colorPicker/ColorPicker.vue |  6 +++---
 2 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/src/module/colorPicker/ColorBox.vue b/src/module/colorPicker/ColorBox.vue
index acdcd2a0..5798ee91 100644
--- a/src/module/colorPicker/ColorBox.vue
+++ b/src/module/colorPicker/ColorBox.vue
@@ -5,10 +5,10 @@ export default {
 </script>
 <script setup lang="ts">
 import { Nullable } from '/@src/module/type'
-import { computed, onMounted, ref } from "vue";
+import { computed, onMounted, ref } from 'vue'
 import { HSBToHEX, RGBSTo, RGBToHSB } from '/@src/module/colorPicker/colorUtil'
 import ColorPicker from './ColorPicker.vue'
-import { usePosition } from "/@src/use/usePosition";
+import { usePosition } from '/@src/use/usePosition'
 
 interface BoxProps {
   color?: string
@@ -16,7 +16,7 @@ interface BoxProps {
   alpha?: boolean
   format?: 'hex' | 'rgb'
   predefine?: boolean
-  colors?: string[],
+  colors?: string[]
 }
 
 const colorBoxProps = withDefaults(defineProps<BoxProps>(), {
@@ -71,9 +71,7 @@ const triggerSpanStyle = computed(() => {
 })
 
 const colorPickerWrapper = computed(() => {
-  return colorBoxProps.size
-    ? `layui-colorpicker-${colorBoxProps.size}`
-    : ''
+  return colorBoxProps.size ? `layui-colorpicker-${colorBoxProps.size}` : ''
 })
 
 const colorBoxRefEl = ref<HTMLElement | null>(null)
@@ -83,24 +81,19 @@ onMounted(() => {
   console.log('colorPickerRefEl =>>>', colorPickerRefEl.value.teleportRefEl)
   usePosition(colorBoxRefEl.value, colorPickerRefEl.value.teleportRefEl)
 })
-
 </script>
 <template>
-  <div class="layui-unselect layui-colorpicker" ref="colorBoxRefEl">
+  <div ref="colorBoxRefEl" class="layui-unselect layui-colorpicker">
     <span
       :class="[
         {
-          'layui-colorpicker-trigger-bgcolor':
-            format == 'rgb' && alpha,
+          'layui-colorpicker-trigger-bgcolor': format == 'rgb' && alpha,
         },
-        size ? colorPickerWrapper : ''
+        size ? colorPickerWrapper : '',
       ]"
     >
-      <span
-        class="layui-colorpicker-trigger-span"
-        :style="triggerSpanStyle"
-      >
-<!-- ICON_PICKER_DOWN = 'layui-icon-down', ICON_PICKER_CLOSE = 'layui-icon-close' -->
+      <span class="layui-colorpicker-trigger-span" :style="triggerSpanStyle">
+        <!-- ICON_PICKER_DOWN = 'layui-icon-down', ICON_PICKER_CLOSE = 'layui-icon-close' -->
         <i
           :class="[
             'layui-icon layui-colorpicker-trigger-i',
@@ -110,10 +103,10 @@ onMounted(() => {
       </span>
     </span>
     <ColorPicker
+      ref="colorPickerRefEl"
       :visible="true"
       :alpha="alpha"
       :predefine="predefine"
-      ref="colorPickerRefEl"
     ></ColorPicker>
   </div>
 </template>
diff --git a/src/module/colorPicker/ColorPicker.vue b/src/module/colorPicker/ColorPicker.vue
index 05c6655c..0180ca4c 100644
--- a/src/module/colorPicker/ColorPicker.vue
+++ b/src/module/colorPicker/ColorPicker.vue
@@ -4,7 +4,7 @@ export default {
 }
 </script>
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref } from 'vue'
 
 interface CProps {
   visible: boolean
@@ -16,15 +16,15 @@ const props = defineProps<CProps>()
 
 const domRefEl = ref<HTMLElement | null>(null)
 defineExpose({
-  teleportRefEl: domRefEl
+  teleportRefEl: domRefEl,
 })
 </script>
 <template>
   <teleport to="body">
     <div
       v-if="visible"
-      class="layui-anim layui-anim-downbit layui-colorpicker-main"
       ref="domRefEl"
+      class="layui-anim layui-anim-downbit layui-colorpicker-main"
     >
       <!--    //颜色面板-->
       <div class="layui-colorpicker-main-wrapper">