diff --git a/docs/src/document/zh-CN/components/colorPicker.md b/docs/src/document/zh-CN/components/colorPicker.md
index 028c90f52f2b2298427da15356961a1d5da96de0..17f42b3d4d28a231eea479df3cd47d2b78c36707 100644
--- a/docs/src/document/zh-CN/components/colorPicker.md
+++ b/docs/src/document/zh-CN/components/colorPicker.md
@@ -29,7 +29,7 @@ export default {
 ::: title 禁止选择
 :::
 
-::: demo 使用 `lay-color-picker` 标签, 创建颜色选择器。
+::: demo 通过 `disabled` 属性, 禁用颜色选择。
 
 <template>
   <lay-color-picker v-model="color" :disabled="true"></lay-color-picker>
@@ -51,6 +51,31 @@ export default {
 
 :::
 
+::: title 禁用透明度
+:::
+
+::: demo 通过 `allow-opacity` 属性, 禁用透明度。
+
+<template>
+  <lay-color-picker v-model="color" :allow-opacity="false"></lay-color-picker>
+</template>
+
+<script>
+import { ref } from "vue";
+
+export default {
+  setup() {
+    const color = ref("#009688");
+
+    return {
+      color
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 预设颜色
 :::
 
@@ -67,7 +92,7 @@ export default {
   setup() {
     const color1 = ref("#FFB800");
 
-    const preset1 = ref(["#009688", "#1e9fff", "#ffb800", "#ff5722", "#5fb878"])
+    const preset1 = ref(["#009688", "#1e9fff", "#ffb800", "#ff5722", "#5fb878"]);
 
     return {
       color1,
@@ -99,7 +124,7 @@ export default {
 
     const changeColor = () => {
       color.value = "#393D49"
-    }
+    };
 
     return {
       color,
@@ -133,18 +158,30 @@ const color5 = ref("");
 
 ::: table
 
-|   属性         |    说明      |  类型   | 默认值  | 版本  | 
-| ---------- | -------- | --- |--- |--- |
-| v-model    | 选中色   | --  |--  |--  |
-| preset | 预设颜色 | --  |--  |--  |
-| size      | 尺寸大小  | `string`    | `lg` `md` `sm` `xs`   |`md`     |  |
-| eye-dropper | 取色器 | `boolean`  | `false`  |--  |
-| disabled | 禁用 | `boolean`  |`false` |  |
-| allow-clear | 是否允许清空 | `boolean`  |`false`  |  |
-| simple | 是否即时改变`modelValue` | `boolean`  |`true`  |  |
-| content-style             | 内容自定义样式     | `StyleValue` | -- | -- |
-| content-class             | 内容自定义Class    | `string` `Array<string \| object>` `object` | -- | -- |
-| teleport-props        | 继承至 dropdown 组件，下拉面板 `传递` 属性         | `object`         | `{to: 'body', disabled: false}` | `2.19.0` |
+| 属性             | 说明                           | 类型                                          | 默认值                             | 版本       | 
+|----------------|------------------------------|---------------------------------------------|---------------------------------|----------|
+| v-model        | 选中色                          | --                                          | --                              | --       |
+| preset         | 预设颜色                         | --                                          | --                              | --       |
+| size           | 尺寸大小                         | `string`                                    | `lg` `md` `sm` `xs`             | `md`     |  |
+| eye-dropper    | 取色器                          | `boolean`                                   | `false`                         | --       |
+| disabled       | 禁用                           | `boolean`                                   | `false`                         |          |
+| allow-clear    | 是否允许清空                       | `boolean`                                   | `false`                         |          |
+| allow-opacity  | 是否启用透明度                      | `boolean`                                   | `true`                          |          |
+| simple         | 是否即时改变`modelValue`           | `boolean`                                   | `true`                          |          |
+| content-style  | 内容自定义样式                      | `StyleValue`                                | --                              | --       |
+| content-class  | 内容自定义Class                   | `string` `Array<string \| object>` `object` | --                              | --       |
+| teleport-props | 继承至 dropdown 组件，下拉面板 `传递` 属性 | `object`                                    | `{to: 'body', disabled: false}` | `2.19.0` |
+
+:::
+
+::: title Color Picker 插槽
+:::
+
+::: table
+
+| 名称     | 描述     |
+|--------|--------|
+| preset | 预设颜色插槽 | 
 
 :::
 
diff --git a/packages/component/component/colorPicker/index.less b/packages/component/component/colorPicker/index.less
index a3ef2076f55e7792f0a428bf474e4aa732830a83..d0a1483150c4031656fe163bd7919c5dfb0e607f 100644
--- a/packages/component/component/colorPicker/index.less
+++ b/packages/component/component/colorPicker/index.less
@@ -76,9 +76,8 @@
 }
 
 .hue-slider {
+  flex: 1;
   position: relative;
-  margin-bottom: 6px;
-  height: 10px;
   background: linear-gradient(
     90deg,
     red 0,
@@ -93,8 +92,9 @@
 }
 
 .alpha-slider {
+  flex: 1;
   position: relative;
-  height: 10px;
+  margin-top: 6px;
   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
   background: #fff
     url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==");
@@ -110,6 +110,12 @@
   background-color: #fff;
 }
 
+.slider-wrap {
+  flex: auto;
+  display: flex;
+  flex-direction: column;
+}
+
 .color-diamond {
   position: relative;
   margin-left: 5px;
@@ -141,6 +147,10 @@
   text-align: center;
 }
 
+.color-value div:last-child {
+  padding-right: 0;
+}
+
 .color-value input {
   font-size: 12px;
   box-sizing: border-box;
@@ -159,10 +169,6 @@
   margin: 3px 0 0;
 }
 
-.color-value .rgba-a {
-  padding-right: 0;
-}
-
 .color-value .hex {
   flex: 1;
   padding-left: 0;
@@ -176,7 +182,6 @@
 .preset {
   width: 100%;
   padding: 0;
-  margin: 10px 0 0;
   list-style: none;
   display: flex;
   flex-wrap: wrap;
@@ -186,11 +191,12 @@
 .preset li {
   width: 20px;
   height: 20px;
-  padding: 0px;
+  padding: 0;
   margin-right: 6px;
   margin-bottom: 6px;
   border: 1px solid #eee;
   border-radius: 2px;
+  cursor: pointer;
 }
 
 .layui-colorpicker {
@@ -414,7 +420,16 @@
   cursor: not-allowed !important;
 }
 
-.layui-color-picker__footer{
+.layui-color-picker-footer {
   display: flex;
-  justify-content: flex-end;
+  align-items: flex-end;
+}
+
+.layui-color-picker-footer__left {
+  flex: 1;
+}
+
+.layui-color-picker-footer__left,
+.layui-color-picker-footer__right {
+  margin-top: 10px;
 }
diff --git a/packages/component/component/colorPicker/index.vue b/packages/component/component/colorPicker/index.vue
index 270d8ad01f9196f4da751a29a4a40f80312d310b..c26f015ac6edc04777a184090ab78157c22f7a0d 100644
--- a/packages/component/component/colorPicker/index.vue
+++ b/packages/component/component/colorPicker/index.vue
@@ -1,25 +1,27 @@
 <script lang="ts" setup>
-import "./index.less";
+import type { StyleValue } from "vue";
 import type { DropdownTeleportProps } from "../dropdown/interface";
 
-import LayDropdown from "../dropdown/index.vue";
-import { ref, computed, watch, onMounted, StyleValue, nextTick } from "vue";
-import { useEyeDropper, useDebounceFn } from "@vueuse/core";
 import { LayIcon } from "@layui/icons-vue";
+import { useDebounceFn, useEyeDropper } from "@vueuse/core";
+import { computed, nextTick, onMounted, ref, watch } from "vue";
+import LayButton from "../button/index.vue";
+import LayDropdown from "../dropdown/index.vue";
 import useProps from "./index.hooks";
 
-import LayButton from "../button/index.vue";
+import "./index.less";
 import "../button/index.less";
 
 export interface ColorPicker {
   modelValue?: any;
-  preset?: any;
+  preset?: Array<string> | boolean;
   disabled?: boolean;
   eyeDropper?: boolean;
   contentClass?: string | Array<string | object> | object;
   contentStyle?: StyleValue;
   size?: string;
   allowClear?: boolean;
+  allowOpacity?: boolean;
   simple?: boolean;
   teleportProps?: DropdownTeleportProps;
 }
@@ -28,16 +30,17 @@ defineOptions({
   name: "LayColorPicker",
 });
 
-const emit = defineEmits(["update:modelValue"]);
-
 const props = withDefaults(defineProps<ColorPicker>(), {
-  modelValue: { r: 255, g: 255, b: 255, a: 1 },
-  preset: ["#16BAAA", "#1e9fff", "#ffb800", "#ff5722", "#16B777"],
+  modelValue: () => ({ r: 255, g: 255, b: 255, a: 1 }),
+  preset: true,
   disabled: false,
   allowClear: false,
+  allowOpacity: true,
   simple: true,
 });
 
+const emit = defineEmits(["update:modelValue"]);
+
 const { size } = useProps(props);
 
 const saturationValue = ref<null | HTMLElement>(null);
@@ -45,32 +48,45 @@ const hueSlider = ref<null | HTMLElement>(null);
 const alphaSlider = ref<null | HTMLElement>(null);
 const { isSupported, open, sRGBHex } = useEyeDropper();
 
-let pointStyle = ref("top: 25%;left: 80%;");
-let hueSliderStyle = ref("left: 0;");
-let alphaSliderStyle = ref("left: calc(100% - 6px);");
+const pointStyle = ref("top: 25%;left: 80%;");
+const hueSliderStyle = ref("left: 0;");
+const alphaSliderStyle = ref("left: calc(100% - 6px);");
 
-let hue = ref(0);
-let saturation = ref(1);
-let value = ref(1);
+const hue = ref(0);
+const saturation = ref(1);
+const value = ref(1);
 
-let red = ref(255);
-let green = ref(0);
-let blue = ref(0);
-let alpha = ref(1);
+const red = ref(255);
+const green = ref(0);
+const blue = ref(0);
+const alpha = ref(1);
 
 const dropdownRef = ref();
-let currentColor = ref("");
-let openState = ref(false);
+const currentColor = ref("");
+const openState = ref(false);
 
-const openEyeDropper = function () {
+const presetList = computed(() => {
+  if (Array.isArray(props.preset)) {
+    return props.preset;
+  }
+  else if (props.preset) {
+    return ["#16BAAA", "#1e9fff", "#ffb800", "#ff5722", "#16B777"];
+  }
+  else {
+    return [];
+  }
+});
+
+function openEyeDropper() {
   if (isSupported) {
     open();
-  } else {
+  }
+  else {
     console.warn("LayColorPicker: Eye dropper not supported by your browser!");
   }
-};
+}
 
-const setColorValue = (value: any) => {
+function setColorValue(value: any) {
   const color = parseColor(value);
   if (color) {
     const { r, g, b, a } = color;
@@ -79,7 +95,7 @@ const setColorValue = (value: any) => {
     blue.value = b;
     alpha.value = a;
   }
-};
+}
 
 onMounted(() => {
   currentColor.value = props.modelValue;
@@ -91,30 +107,33 @@ watch(
   () => {
     currentColor.value = props.modelValue;
     setColorValue(currentColor.value);
-  }
+  },
 );
 
 watch(sRGBHex, (sRGBHex) => {
-  let { r, g, b, a } = hex2rgba(sRGBHex);
-  red.value = r;
-  green.value = g;
-  blue.value = b;
-  alpha.value = a;
+  const color = hex2rgba(sRGBHex);
+  if (color) {
+    const { r, g, b, a } = color;
+    red.value = r;
+    green.value = g;
+    blue.value = b;
+    alpha.value = a;
+  }
 });
 
-watch([red, green, blue], (newValue) => {
+watch([red, green, blue], () => {
   currentColor.value = rgba2hex(
     red.value,
     green.value,
     blue.value,
-    alpha.value
+    alpha.value,
   );
 
   if (props.simple) {
     emit("update:modelValue", currentColor.value);
   }
 
-  let { h, s, v } = rgb2hsv(red.value, green.value, blue.value);
+  const { h, s, v } = rgb2hsv(red.value, green.value, blue.value);
   hue.value = h;
   saturation.value = s;
   value.value = v;
@@ -127,7 +146,7 @@ watch(alpha, () => {
     red.value,
     green.value,
     blue.value,
-    alpha.value
+    alpha.value,
   );
 
   if (props.simple) {
@@ -135,7 +154,7 @@ watch(alpha, () => {
   }
 
   alphaSliderStyle.value = `left: ${
-    alpha.value >= 1 ? "calc(100% - 6px)" : alpha.value * 100 + "%"
+    alpha.value >= 1 ? "calc(100% - 6px)" : `${alpha.value * 100}%`
   };`;
 });
 
@@ -151,14 +170,14 @@ watch(openState, (state) => {
   }
 });
 
-let colorObj = computed(() => {
-  let r = red.value;
-  let g = green.value;
-  let b = blue.value;
-  let a = alpha.value;
-  let h = hue.value;
-  let s = saturation.value;
-  let v = value.value;
+const colorObj = computed(() => {
+  const r = red.value;
+  const g = green.value;
+  const b = blue.value;
+  const a = alpha.value;
+  const h = hue.value;
+  const s = saturation.value;
+  const v = value.value;
   return {
     rgb: `rgba(${r},${g},${b})`,
     rgba: `rgba(${r},${g},${b},${a})`,
@@ -170,7 +189,7 @@ let colorObj = computed(() => {
 });
 
 const defaultColor = computed(() =>
-  props.modelValue || currentColor.value ? colorObj.value.rgba : "transparent"
+  props.modelValue || currentColor.value ? colorObj.value.rgba : "transparent",
 );
 
 const iconType = computed(() => {
@@ -181,61 +200,64 @@ const handleInput = useDebounceFn((e: Event) => {
   const inputElement = e.target as HTMLInputElement;
   const v = inputElement.value;
 
-  if (/^#?([0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(v)) {
-    let { r, g, b, a } = hex2rgba(v);
-    red.value = r;
-    green.value = g;
-    blue.value = b;
-    alpha.value = a;
+  if (/^#?(?:[0-9a-f]{6}|[0-9a-f]{8})$/i.test(v)) {
+    const color = hex2rgba(v);
+    if (color) {
+      const { r, g, b, a } = color;
+      red.value = r;
+      green.value = g;
+      blue.value = b;
+      alpha.value = a;
+    }
   }
 }, 500);
 
 // 清除
-const handleClearColor = () => {
+function handleClearColor() {
   emit("update:modelValue", "");
   dropdownRef.value.hide();
-};
+}
 
 // 确认
-const handleConfirmColor = () => {
+function handleConfirmColor() {
   emit(
     "update:modelValue",
-    rgba2hex(red.value, green.value, blue.value, alpha.value)
+    rgba2hex(red.value, green.value, blue.value, alpha.value),
   );
   dropdownRef.value.hide();
-};
+}
 
 function redChange(e: any) {
-  let v = e.target.value;
+  const v = e.target.value;
   if (v !== "") {
     v > 255 && (red.value = 255);
     v < 0 && (red.value = 0);
-    v >= 0 && v <= 255 && (red.value = parseInt(v));
+    v >= 0 && v <= 255 && (red.value = Number.parseInt(v));
   }
 }
 
 function greenChange(e: any) {
-  let v = e.target.value;
+  const v = e.target.value;
   if (v !== "") {
     v > 255 && (green.value = 255);
     v < 0 && (green.value = 0);
-    v >= 0 && v <= 255 && (green.value = parseInt(v));
+    v >= 0 && v <= 255 && (green.value = Number.parseInt(v));
   }
 }
 
 function blueChange(e: any) {
-  let v = e.target.value;
+  const v = e.target.value;
   if (v !== "") {
     v > 255 && (blue.value = 255);
     v < 0 && (blue.value = 0);
-    v >= 0 && v <= 255 && (blue.value = parseInt(v));
+    v >= 0 && v <= 255 && (blue.value = Number.parseInt(v));
   }
 }
 
 function alphaChange(e: any) {
   let v = e.target.value;
   if (v !== "") {
-    v = parseFloat(v);
+    v = Number.parseFloat(v);
     alpha.value = v;
     v > 1 && (alpha.value = 1);
     v < 0 && (alpha.value = 0);
@@ -244,23 +266,25 @@ function alphaChange(e: any) {
 }
 
 function presetChange(item: any) {
-  if (/^#?([0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(item)) {
-    let { r, g, b, a } = hex2rgba(item);
-    red.value = r;
-    green.value = g;
-    blue.value = b;
-    alpha.value = a;
+  if (/^#?(?:[0-9a-f]{6}|[0-9a-f]{8})$/i.test(item)) {
+    const color = hex2rgba(item);
+    if (color) {
+      const { r, g, b, a } = color;
+      red.value = r;
+      green.value = g;
+      blue.value = b;
+      alpha.value = a;
+    }
   }
 }
 
 function handleChangeSV(e: any) {
-  // @ts-ignore
-  let w = saturationValue.value.clientWidth;
-  // @ts-ignore
-  let h = saturationValue.value.clientHeight;
-  // @ts-ignore
+  if (!saturationValue.value) {
+    return;
+  }
+  const w = saturationValue.value.clientWidth;
+  const h = saturationValue.value.clientHeight;
   let x = e.pageX - saturationValue.value.getBoundingClientRect().left;
-  // @ts-ignore
   let y = e.pageY - saturationValue.value.getBoundingClientRect().top;
   x = x < w && x > 0 ? x : x > w ? w : 0;
   y = y < h && y > 0 ? y : y > h ? h : 0;
@@ -268,7 +292,7 @@ function handleChangeSV(e: any) {
   saturation.value = Math.floor((x / w) * 100 + 0.5) / 100;
   value.value = Math.floor((1 - y / h) * 100 + 0.5) / 100;
   // hsv转化为rgb
-  let { r, g, b } = hsv2rgb(hue.value, saturation.value, value.value);
+  const { r, g, b } = hsv2rgb(hue.value, saturation.value, value.value);
   red.value = r;
   green.value = g;
   blue.value = b;
@@ -284,7 +308,7 @@ function mousedownSV(e: any) {
   window.addEventListener("mouseup", mouseupSV);
 }
 
-function mouseupSV(e: any) {
+function mouseupSV() {
   // 鼠标松开后移除事件
   window.removeEventListener("mousemove", handleChangeSV);
   window.removeEventListener("mouseup", mouseupSV);
@@ -292,15 +316,16 @@ function mouseupSV(e: any) {
 
 // 色调
 function handleChangeHue(e: any) {
-  // @ts-ignore
-  let w = hueSlider.value.clientWidth;
-  // @ts-ignore
+  if (!hueSlider.value || !saturationValue.value) {
+    return;
+  }
+  const w = hueSlider.value.clientWidth;
   let x = e.pageX - saturationValue.value.getBoundingClientRect().left;
   x = x < w && x > 0 ? x : x > w ? w : 0;
   // 计算色调
   hue.value = Math.floor((x / w) * 360 + 0.5);
   // hsv转化为rgb
-  let { r, g, b } = hsv2rgb(hue.value, saturation.value, value.value);
+  const { r, g, b } = hsv2rgb(hue.value, saturation.value, value.value);
   red.value = r;
   green.value = g;
   blue.value = b;
@@ -314,16 +339,17 @@ function mousedownHue(e: any) {
   window.addEventListener("mouseup", mouseupHue);
 }
 
-function mouseupHue(e: any) {
+function mouseupHue() {
   window.removeEventListener("mousemove", handleChangeHue);
   window.removeEventListener("mouseup", mouseupHue);
 }
 
 // 透明度
 function handleChangeAlpha(e: any) {
-  // @ts-ignore
-  let w = alphaSlider.value.clientWidth;
-  // @ts-ignore
+  if (!alphaSlider.value || !saturationValue.value) {
+    return;
+  }
+  const w = alphaSlider.value.clientWidth;
   let x = e.pageX - saturationValue.value.getBoundingClientRect().left;
   x = x < w && x > 0 ? x : x > w ? w : 0;
   // 计算透明度
@@ -338,7 +364,7 @@ function mousedownAlpha(e: any) {
   window.addEventListener("mouseup", mouseupAlpha);
 }
 
-function mouseupAlpha(e: any) {
+function mouseupAlpha() {
   window.removeEventListener("mousemove", handleChangeAlpha);
   window.removeEventListener("mouseup", mouseupAlpha);
 }
@@ -347,14 +373,11 @@ function parseColor(color: any) {
   if (color) {
     let r, g, b, a;
     if (typeof color === "string") {
-      if (
-        /^#?([0-9a-fA-F]{6}|[0-9a-fA-F]{8}|[0-9a-fA-F]{3}|[0-9a-fA-F]{4})$/.test(
-          color
-        )
-      ) {
+      if (/^#?(?:[0-9a-f]{6}|[0-9a-f]{8}|[0-9a-f]{3}|[0-9a-f]{4})$/i.test(color)) {
         return hex2rgba(color);
       }
-    } else {
+    }
+    else {
       r = color.r > 255 ? 255 : color.r < 0 ? 0 : color.r;
       g = color.g > 255 ? 255 : color.g < 0 ? 0 : color.g;
       b = color.b > 255 ? 255 : color.b < 0 ? 0 : color.b;
@@ -367,33 +390,38 @@ function parseColor(color: any) {
 
 function hsv2rgb(h: any, s: any, v: any) {
   h === 360 && (h = 0);
-  let i = Math.floor(h / 60) % 6;
-  let f = h / 60 - i;
-  let p = v * (1 - s);
-  let q = v * (1 - s * f);
-  let t = v * (1 - s * (1 - f));
+  const i = Math.floor(h / 60) % 6;
+  const f = h / 60 - i;
+  const p = v * (1 - s);
+  const q = v * (1 - s * f);
+  const t = v * (1 - s * (1 - f));
   let r, g, b;
   if (i === 0) {
     r = v;
     g = t;
     b = p;
-  } else if (i === 1) {
+  }
+  else if (i === 1) {
     r = q;
     g = v;
     b = p;
-  } else if (i === 2) {
+  }
+  else if (i === 2) {
     r = p;
     g = v;
     b = t;
-  } else if (i === 3) {
+  }
+  else if (i === 3) {
     r = p;
     g = q;
     b = v;
-  } else if (i === 4) {
+  }
+  else if (i === 4) {
     r = t;
     g = p;
     b = v;
-  } else if (i === 5) {
+  }
+  else if (i === 5) {
     r = v;
     g = p;
     b = q;
@@ -405,29 +433,35 @@ function hsv2rgb(h: any, s: any, v: any) {
 }
 
 function rgb2hsv(r: any, g: any, b: any) {
-  let r1 = r / 255;
-  let g1 = g / 255;
-  let b1 = b / 255;
-  let cmax = Math.max(r1, g1, b1);
-  let cmin = Math.min(r1, g1, b1);
-  let d = cmax - cmin;
+  const r1 = r / 255;
+  const g1 = g / 255;
+  const b1 = b / 255;
+  const cmax = Math.max(r1, g1, b1);
+  const cmin = Math.min(r1, g1, b1);
+  const d = cmax - cmin;
   let h, s, v;
   if (d === 0) {
     h = 0;
-  } else if (cmax === r1) {
+  }
+  else if (cmax === r1) {
     h = ((60 * (g1 - b1)) / d + 360) % 360;
-  } else if (cmax === g1) {
+  }
+  else if (cmax === g1) {
     h = 60 * ((b1 - r1) / d + 2);
-  } else if (cmax === b1) {
+  }
+  else if (cmax === b1) {
     h = 60 * ((r1 - g1) / d + 4);
   }
+  else {
+    h = 0;
+  }
   if (cmax === 0) {
     s = 0;
-  } else {
+  }
+  else {
     s = d / cmax;
   }
   v = cmax;
-  // @ts-ignore
   h = Math.floor(h + 0.5);
   s = Math.floor(s * 100 + 0.5) / 100;
   v = Math.floor(v * 100 + 0.5) / 100;
@@ -435,64 +469,68 @@ function rgb2hsv(r: any, g: any, b: any) {
 }
 
 function rgba2hex(r: any, g: any, b: any, a = 1) {
-  r = parseInt(r);
-  let r1 = r.toString(16).length !== 2 ? "0" + r.toString(16) : r.toString(16);
-  g = parseInt(g);
-  let g1 = g.toString(16).length !== 2 ? "0" + g.toString(16) : g.toString(16);
-  b = parseInt(b);
-  let b1 = b.toString(16).length !== 2 ? "0" + b.toString(16) : b.toString(16);
-  // @ts-ignore
-  a = parseFloat(a);
+  r = Number.parseInt(r);
+  const r1 = r.toString(16).length !== 2 ? `0${r.toString(16)}` : r.toString(16);
+  g = Number.parseInt(g);
+  const g1 = g.toString(16).length !== 2 ? `0${g.toString(16)}` : g.toString(16);
+  b = Number.parseInt(b);
+  const b1 = b.toString(16).length !== 2 ? `0${b.toString(16)}` : b.toString(16);
+  if (props.allowOpacity) {
+    a = Number.parseFloat(String(a));
+  }
+  else {
+    a = 1;
+  }
   let a1 = "";
   if (a !== 1) {
-    let temp = Math.floor(256 * a);
-    a1 =
-      temp.toString(16).length !== 2
-        ? "0" + temp.toString(16)
+    const temp = Math.floor(256 * a);
+    a1
+      = temp.toString(16).length !== 2
+        ? `0${temp.toString(16)}`
         : temp.toString(16);
   }
   return `#${r1}${g1}${b1}${a1}`.toUpperCase();
 }
 
-// @ts-ignore
-function hex2rgba(s: any) {
-  if (/^#?[0-9a-fA-F]{3}$/.test(s)) {
-    let b = s.substring(s.length - 1, s.length);
-    let g = s.substring(s.length - 2, s.length - 1);
-    let r = s.substring(s.length - 3, s.length - 2);
+function hex2rgba(s: any): { r: number; g: number; b: number; a: number } | null {
+  if (/^#?[0-9a-f]{3}$/i.test(s)) {
+    const b = s.substring(s.length - 1, s.length);
+    const g = s.substring(s.length - 2, s.length - 1);
+    const r = s.substring(s.length - 3, s.length - 2);
     return hex2rgba(`${r + r}${g + g}${b + b}`);
   }
-  if (/^#?[0-9a-fA-F]{4}$/.test(s)) {
-    let a = s.substring(s.length - 1, s.length);
-    let b = s.substring(s.length - 2, s.length - 1);
-    let g = s.substring(s.length - 3, s.length - 2);
-    let r = s.substring(s.length - 4, s.length - 3);
+  if (/^#?[0-9a-f]{4}$/i.test(s)) {
+    const a = s.substring(s.length - 1, s.length);
+    const b = s.substring(s.length - 2, s.length - 1);
+    const g = s.substring(s.length - 3, s.length - 2);
+    const r = s.substring(s.length - 4, s.length - 3);
     return hex2rgba(`${r + r}${g + g}${b + b}${a + a}`);
   }
-  if (/^#?[0-9a-fA-F]{6}$/.test(s)) {
-    let b = parseInt("0x" + s.substring(s.length - 2, s.length));
-    let g = parseInt("0x" + s.substring(s.length - 4, s.length - 2));
-    let r = parseInt("0x" + s.substring(s.length - 6, s.length - 4));
+  if (/^#?[0-9a-f]{6}$/i.test(s)) {
+    const b = Number.parseInt(`0x${s.substring(s.length - 2, s.length)}`);
+    const g = Number.parseInt(`0x${s.substring(s.length - 4, s.length - 2)}`);
+    const r = Number.parseInt(`0x${s.substring(s.length - 6, s.length - 4)}`);
     return { r, g, b, a: 1 };
   }
-  if (/^#?[0-9a-fA-F]{8}$/.test(s)) {
-    let a = parseInt("0x" + s.substring(s.length - 2, s.length));
+  if (/^#?[0-9a-f]{8}$/i.test(s)) {
+    let a = Number.parseInt(`0x${s.substring(s.length - 2, s.length)}`);
     a = a / 255;
-    let b = parseInt("0x" + s.substring(s.length - 4, s.length - 2));
-    let g = parseInt("0x" + s.substring(s.length - 6, s.length - 4));
-    let r = parseInt("0x" + s.substring(s.length - 8, s.length - 6));
+    const b = Number.parseInt(`0x${s.substring(s.length - 4, s.length - 2)}`);
+    const g = Number.parseInt(`0x${s.substring(s.length - 6, s.length - 4)}`);
+    const r = Number.parseInt(`0x${s.substring(s.length - 8, s.length - 6)}`);
     return { r, g, b, a };
   }
+  return null;
 }
 </script>
 
 <template>
-  <lay-dropdown
+  <LayDropdown
     ref="dropdownRef"
     :disabled="disabled"
-    :contentClass="contentClass"
-    :contentStyle="contentStyle"
-    :teleportProps="teleportProps"
+    :content-class="contentClass"
+    :content-style="contentStyle"
+    :teleport-props="teleportProps"
     @hide="openState = false"
     @show="openState = true"
   >
@@ -510,50 +548,51 @@ function hex2rgba(s: any) {
           <i
             class="layui-icon layui-colorpicker-trigger-i"
             :class="iconType"
-          ></i>
+          />
         </span>
       </span>
     </div>
     <template #content>
       <div class="layui-color-picker">
         <div
-          class="saturation-value"
           ref="saturationValue"
+          class="saturation-value"
           @mousedown="mousedownSV"
         >
           <div :style="`background-color: hsl(${hue}, 100%, 50%);`">
-            <div class="point" :style="pointStyle"></div>
+            <div class="point" :style="pointStyle" />
           </div>
-          <div class="saturation-value-2"></div>
-          <div class="saturation-value-3"></div>
+          <div class="saturation-value-2" />
+          <div class="saturation-value-3" />
         </div>
         <div class="layui-color-picker-middle">
-          <div style="flex: auto">
-            <div class="hue-slider" ref="hueSlider" @mousedown="mousedownHue">
-              <div class="slider" :style="hueSliderStyle"></div>
+          <div class="slider-wrap">
+            <div ref="hueSlider" class="hue-slider" @mousedown="mousedownHue">
+              <div class="slider" :style="hueSliderStyle" />
             </div>
             <div
-              class="alpha-slider"
+              v-if="allowOpacity"
               ref="alphaSlider"
+              class="alpha-slider"
               @mousedown="mousedownAlpha"
             >
-              <div class="slider" :style="alphaSliderStyle"></div>
+              <div class="slider" :style="alphaSliderStyle" />
               <div
                 :style="`background: linear-gradient(to right, rgba(0,0,0,0), ${colorObj.rgb});width: 100%;height: 100%`"
-              ></div>
+              />
             </div>
           </div>
           <div
             v-if="eyeDropper"
-            @click="openEyeDropper"
             style="margin-left: 5px"
+            @click="openEyeDropper"
           >
-            <lay-icon type="layui-icon-edit" size="22px"></lay-icon>
+            <LayIcon type="layui-icon-edit" size="22px" />
           </div>
           <div class="color-diamond">
             <div
               :style="`background-color: ${defaultColor};width: 100%;height: 100%;box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), inset 0 0 4px rgba(0, 0, 0, .25);`"
-            ></div>
+            />
           </div>
         </div>
         <div class="color-value">
@@ -561,53 +600,60 @@ function hex2rgba(s: any) {
             <label>
               <input
                 :value="colorObj.hex8"
-                @input="handleInput"
                 spellcheck="false"
-              />
+                @input="handleInput"
+              >
             </label>
           </div>
           <div class="rgba-r">
             <label>
-              <input :value="red" @input="redChange" />
+              <input :value="red" @input="redChange">
             </label>
           </div>
           <div class="rgba-g">
             <label>
-              <input :value="green" @input="greenChange" />
+              <input :value="green" @input="greenChange">
             </label>
           </div>
           <div class="rgba-b">
             <label>
-              <input :value="blue" @input="blueChange" />
+              <input :value="blue" @input="blueChange">
             </label>
           </div>
-          <div class="rgba-a">
+          <div v-if="allowOpacity" class="rgba-a">
             <label>
-              <input :value="alpha" @input="alphaChange" />
+              <input :value="alpha" @input="alphaChange">
             </label>
           </div>
         </div>
-        <ul class="preset">
-          <li
-            v-for="item in preset"
-            :key="item"
-            :style="`background-color: ${item}`"
-            @click="presetChange(item)"
-          ></li>
-        </ul>
-        <div class="layui-color-picker__footer" v-if="allowClear || !simple">
-          <LayButton v-if="allowClear" size="xs" @click="handleClearColor"
-            >清除</LayButton
-          >
-          <LayButton
-            v-if="!simple"
-            type="primary"
-            size="xs"
-            @click="handleConfirmColor"
-            >确定</LayButton
-          >
+        <div class="layui-color-picker-footer">
+          <div v-if="preset || $slots.preset" class="layui-color-picker-footer__left">
+            <slot name="preset">
+              <ul class="preset">
+                <li
+                  v-for="item in presetList"
+                  :key="item"
+                  :style="`background-color: ${item}`"
+                  @click="presetChange(item)"
+                />
+              </ul>
+            </slot>
+          </div>
+          <div v-if="allowClear || !simple" class="layui-color-picker-footer__right">
+            <LayButton v-if="allowClear" size="xs" @click="handleClearColor">
+              清除
+            </LayButton>
+            <LayButton
+              v-if="!simple"
+              type="primary"
+              size="xs"
+              @click="handleConfirmColor"
+            >
+              确定
+            </LayButton>
+          </div>
         </div>
       </div>
     </template>
-  </lay-dropdown>
+  </LayDropdown>
 </template>