element-ui制作多颜色选择器

将颜色存储到一个数组中去。

1. <template>
2.   <div class="color-picker-container" style="margin-top: 10px;">
3.     <!-- 显示已选颜色 -->
4.     <div class="color-selection">
5.       <div
6.         v-for="(color, index) in selectedColors"
7.         :key="index"
8.         class="color-chip"
9.         :style="{ backgroundColor: color }"
10.       >
11.         <button @click="removeColor(index)" class="remove-btn">X</button>
12.       </div>
13.       <!-- 颜色选择器 -->
14.       <el-color-picker
15.         v-if="showColorPicker"
16.         v-model="currentColor"
17.         @change="addColor"
18.         show-alpha
19.         size="small"
20.         class="color-picker"
21.       />
22.       <div v-if="selectedColors.length < maxColors" class="add-color-btn" @click="showColorPicker = !showColorPicker">
23.         +
24.       </div>
25.     </div>
28.   </div>
29. </template>
31. <script>
32. export default {
33.   data() {
34.     return {
35.       selectedColors: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#7265E6', '#EBEEF5'], // 默认6个颜色
36.       currentColor: null,
37.       showColorPicker: false,
38.       maxColors: 10 // 最大可选颜色数量
39.     };
40.   },
41.   methods: {
42.     addColor(color) {
43.       if (color && this.selectedColors.length < this.maxColors && !this.selectedColors.includes(color)) {
44.         this.selectedColors.push(color);
45.       }
46.       this.showColorPicker = false;
47.     },
48.     removeColor(index) {
49.       this.selectedColors.splice(index, 1);
50.     },
51.   },
52. };
53. </script>
54. <style scoped>
55. .color-picker-container {
56.   position: relative;
57. }
59. .color-selection {
60.   display: flex;
61.   flex-wrap: wrap;
62.   gap: 8px;
63.   margin-bottom: 16px;
64. }
66. .color-chip {
67.   width: 40px;
68.   height: 40px;
69.   border-radius: 8px; /* 圆角 */
70.   position: relative;
71.   cursor: pointer;
72.   transition: transform 0.1s ease-in-out;
73. }
75. .color-chip:hover {
76.   transform: scale(1.1); /* 悬停时放大 */
77. }
79. .remove-btn {
80.   position: absolute;
81.   top: -6px;
82.   right: -6px;
83.   background-color: white;
84.   border: 1px solid #ccc;
85.   border-radius: 50%;
86.   width: 16px;
87.   height: 16px;
88.   line-height: 14px;
89.   text-align: center;
90.   font-size: 10px;
91.   cursor: pointer;
92.   display: none;
93. }
95. .color-chip:hover .remove-btn {
96.   display: block;
97. }
99. .add-color-btn {
100.   width: 40px;
101.   height: 40px;
102.   border-radius: 8px; /* 圆角 */
103.   background-color: #f0f0f0;
104.   border: 1px dashed #dcdcdc;
105.   display: flex;
106.   align-items: center;
107.   justify-content: center;
108.   font-size: 20px;
109.   color: #8c8c8c;
110.   cursor: pointer;
111.   transition: background-color 0.3s ease;
112. }
114. .add-color-btn:hover {
115.   background-color: #e0e0e0;
116. }
118. .color-picker {
119.   /*position: absolute;*/
120.   bottom: -5px;
121.   left: 0;
122. }
123. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。