vue自定义颜色选择器
效果图：

step0: 默认写法 调用系统自带的颜色选择器

1.        <input type="color">

复制代码

step1:C:\Users\wangrusheng\PycharmProjects\untitled18\src\views\Home.vue

1. <template>  <div class="container">    <!-- 颜色选择器组件 -->    <ColorPicker v-model="selectedColor" />    <!-- 新增的动态背景按钮 -->    <div>    <button      class="dynamic-button"      :style="{ backgroundColor: selectedColor }"    >      我的背景色会变化！    </button>       <input type="color">    <p>当前选中颜色: {{ selectedColor }}</p>    </div>     </div></template><script>import ColorPicker from './ColorPicker.vue'export default {  components: { ColorPicker },  data() {    return {      selectedColor: '#ff0000' // 默认颜色    }  }}</script>

复制代码

step2:C:\Users\wangrusheng\PycharmProjects\untitled18\src\views\ColorPicker.vue

1. <template>
   
2.   <div class="color-picker">
   
3.     <!-- 饱和度/明度选择区域 -->
   
4.     <div
   
5.       class="saturation"
   
6.       :style="{ backgroundColor: `hsl(${hsv.h}, 100%, 50%)` }"
   
7.       @mousedown="startDrag"
   
8.     >
   
9.       <div
   
10.         class="selector"
    
11.         :style="{
    
12.           left: `${hsv.s * 100}%`,
    
13.           top: `${(1 - hsv.v) * 100}%`,
    
14.           backgroundColor: currentColor
    
15.         }"
    
16.       ></div>
    
17.     </div>
    
18. 
    
19.     <!-- 色相滑块 -->
    
20.     <div class="hue-slider" @mousedown="startHueDrag">
    
21.       <div
    
22.         class="hue-pointer"
    
23.         :style="{ left: `${(hsv.h / 360) * 100}%` }"
    
24.       ></div>
    
25.     </div>
    
26. 
    
27.     <!-- 颜色显示和输入 -->
    
28.     <div class="color-preview" :style="{ backgroundColor: currentColor }"></div>
    
29.     <input
    
30.       v-model="hexColor"
    
31.       class="hex-input"
    
32.       placeholder="#FFFFFF"
    
33.       @input="handleHexInput"
    
34.     >
    
35.   </div>
    
36. </template>
    
37. 
    
38. <script>
    
39. export default {
    
40.   props: {
    
41.     modelValue: String
    
42.   },
    
43.   emits: ['update:modelValue'],
    
44.   data() {
    
45.     return {
    
46.       hsv: { h: 0, s: 1, v: 1 },
    
47.       hexColor: '#ff0000',
    
48.       isDragging: false,
    
49.       isHueDragging: false
    
50.     }
    
51.   },
    
52.   computed: {
    
53.     currentColor() {
    
54.       return this.hsvToHex(this.hsv)
    
55.     }
    
56.   },
    
57.   methods: {
    
58.     startDrag(e) {
    
59.       this.isDragging = true
    
60.       this.handleDrag(e)
    
61.       window.addEventListener('mousemove', this.handleDrag)
    
62.       window.addEventListener('mouseup', this.stopDrag)
    
63.     },
    
64.     startHueDrag(e) {
    
65.       this.isHueDragging = true
    
66.       this.handleHueDrag(e)
    
67.       window.addEventListener('mousemove', this.handleHueDrag)
    
68.       window.addEventListener('mouseup', this.stopHueDrag)
    
69.     },
    
70.     handleDrag(e) {
    
71.       if (!this.isDragging) return
    
72.       const rect = e.target.getBoundingClientRect()
    
73.       const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
    
74.       const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height))
    
75. 
    
76.       this.hsv.s = x
    
77.       this.hsv.v = 1 - y
    
78.       this.updateHex()
    
79.     },
    
80.     handleHueDrag(e) {
    
81.       if (!this.isHueDragging) return
    
82.       const rect = e.target.getBoundingClientRect()
    
83.       const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
    
84.       this.hsv.h = x * 360
    
85.       this.updateHex()
    
86.     },
    
87.     stopDrag() {
    
88.       this.isDragging = false
    
89.       window.removeEventListener('mousemove', this.handleDrag)
    
90.       window.removeEventListener('mouseup', this.stopDrag)
    
91.     },
    
92.     stopHueDrag() {
    
93.       this.isHueDragging = false
    
94.       window.removeEventListener('mousemove', this.handleHueDrag)
    
95.       window.removeEventListener('mouseup', this.stopHueDrag)
    
96.     },
    
97.     updateHex() {
    
98.       this.hexColor = this.hsvToHex(this.hsv)
    
99.       this.$emit('update:modelValue', this.hexColor)
    
100.     },
     
101.     handleHexInput() {
     
102.       if (/^#([0-9A-F]{3}){1,2}$/i.test(this.hexColor)) {
     
103.         this.hsv = this.hexToHsv(this.hexColor)
     
104.       }
     
105.     },
     
106.     // 颜色转换函数
     
107.     hsvToHex(hsv) {
     
108.       const h = hsv.h / 360
     
109.       let r, g, b
     
110. 
     
111.       const i = Math.floor(h * 6)
     
112.       const f = h * 6 - i
     
113.       const p = hsv.v * (1 - hsv.s)
     
114.       const q = hsv.v * (1 - f * hsv.s)
     
115.       const t = hsv.v * (1 - (1 - f) * hsv.s)
     
116. 
     
117.       switch (i % 6) {
     
118.         case 0: r = hsv.v, g = t, b = p; break
     
119.         case 1: r = q, g = hsv.v, b = p; break
     
120.         case 2: r = p, g = hsv.v, b = t; break
     
121.         case 3: r = p, g = q, b = hsv.v; break
     
122.         case 4: r = t, g = p, b = hsv.v; break
     
123.         case 5: r = hsv.v, g = p, b = q; break
     
124.       }
     
125. 
     
126.       return `#${[r, g, b]
     
127.         .map(x => Math.round(x * 255)
     
128.         .toString(16)
     
129.         .padStart(2, '0'))
     
130.         .join('')}`
     
131.     },
     
132.     hexToHsv(hex) {
     
133.       // 转换逻辑（此处省略具体实现）
     
134.       // 返回类似 {h: 0, s: 1, v: 1} 的HSV对象
     
135.     }
     
136.   }
     
137. }
     
138. </script>
     
139. 
     
140. <style>
     
141. .color-picker {
     
142.   width: 300px;
     
143.   padding: 20px;
     
144.   background: #fff;
     
145.   border-radius: 8px;
     
146.   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
     
147. }
     
148. 
     
149. .saturation {
     
150.   position: relative;
     
151.   width: 100%;
     
152.   height: 200px;
     
153.   border-radius: 4px;
     
154.   background: linear-gradient(to top, #000, transparent),
     
155.               linear-gradient(to right, #fff, transparent);
     
156. }
     
157. 
     
158. .selector {
     
159.   position: absolute;
     
160.   width: 16px;
     
161.   height: 16px;
     
162.   border: 2px solid white;
     
163.   border-radius: 50%;
     
164.   transform: translate(-8px, -8px);
     
165.   box-shadow: 0 1px 3px rgba(0,0,0,0.3);
     
166. }
     
167. 
     
168. .hue-slider {
     
169.   position: relative;
     
170.   height: 12px;
     
171.   margin: 15px 0;
     
172.   background: linear-gradient(to right,
     
173.     #ff0000 0%,
     
174.     #ffff00 17%,
     
175.     #00ff00 33%,
     
176.     #00ffff 50%,
     
177.     #0000ff 67%,
     
178.     #ff00ff 83%,
     
179.     #ff0000 100%);
     
180.   border-radius: 6px;
     
181. }
     
182. 
     
183. .hue-pointer {
     
184.   position: absolute;
     
185.   width: 16px;
     
186.   height: 16px;
     
187.   background: white;
     
188.   border-radius: 50%;
     
189.   transform: translate(-8px, -2px);
     
190.   box-shadow: 0 1px 3px rgba(0,0,0,0.3);
     
191. }
     
192. 
     
193. .color-preview {
     
194.   width: 40px;
     
195.   height: 40px;
     
196.   border-radius: 4px;
     
197.   border: 1px solid #ddd;
     
198. }
     
199. 
     
200. .hex-input {
     
201.   margin-left: 10px;
     
202.   padding: 8px;
     
203.   width: 100px;
     
204.   border: 1px solid #ddd;
     
205.   border-radius: 4px;
     
206. }
     
207. </style>

复制代码

到此这篇关于vue实现自定义颜色选择器的文章就介绍到这了,更多相关vue颜色选择器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/javascript/339700qru.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！