Demo:颜色选择器支持选择透明颜色

web/src/assets/icon-font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2479351 */
-  src: url('iconfont.woff2?t=1690537337895') format('woff2'),
+  src: url('iconfont.woff2?t=1691822758372') format('woff2'),
-       url('iconfont.woff?t=1690537337895') format('woff'),
+       url('iconfont.woff?t=1691822758372') format('woff'),
-       url('iconfont.ttf?t=1690537337895') format('truetype');
+       url('iconfont.ttf?t=1691822758372') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icontouming:before {
+  content: "\e60c";
+}
+
 .iconlieri:before {
   content: "\e60b";
 }

web/src/config/zh.js

@@ -97,7 +97,8 @@ export const colorList = [
   '#0C797D',
   '#0062B1',
   '#653294',
-  '#AB149E'
+  '#AB149E',
+  'transparent'
 ]
 
 // 边框宽度

web/src/pages/Edit/components/Color.vue

@@ -2,9 +2,10 @@
   <div class="colorContainer" :class="{ isDark: isDark }">
     <div class="colorList">
       <span
-        class="colorItem"
+        class="colorItem iconfont"
         v-for="item in colorList"
         :style="{ backgroundColor: item }"
+        :class="{ icontouming: item === 'transparent' }"
         :key="item"
         @click="clickColorItem(item)"
       ></span>
@@ -87,9 +88,13 @@ export default {
 
 .colorList {
   width: 240px;
+  display: flex;
+  flex-wrap: wrap;
 
   .colorItem {
-    display: inline-block;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     width: 15px;
     height: 15px;
     margin-right: 5px;