热门标签
热门文章
- 1Qt 5.15 在线安装_qt 5.15.13如何安装
- 2LWIP内存管理之动态内存池_memp num localhostlist
- 3Android studio下载与安装（Windows）_window android studio下在
- 4大佬六面蚂蚁金服，唬住了面试官要了35K。事后说：感觉Java面试也没那么难....._一般面试最后一面是谁面
- 5如何更改jupyter notebook默认存储路径_翻译笔的默认存储地点怎么更改
- 6华为OD最新面试手撕代码：前K个高频单词_面试 手撕词频统计
- 7Java泊松分布_common-math3 泊松分布
- 8静态方法与实例方法的区别_实例方法和静态方法区别
- 9Pygame实战！——自制PVZ（植物大战僵尸）_pygame植物大战僵尸
- 10基于SpringBoot+Vue+uniapp的养老院老人健康监护平台的详细设计和实现(源码+lw+部署文档+讲解等)
当前位置: article > 正文
【基于element ui的color选择器】基于element ui的color选择器_element 颜色选择器
作者：一键难忘520 | 2024-08-01 12:44:10
赞
踩
element 颜色选择器
技术版本如下：
vue 2.6.14
less 3.13.1
element-ui 2.15.6
less-loader 5.0.0
- 1
- 2
- 3
- 4
需求：
支持RGB、HEX编码、支持吸管吸取颜色、颜色选择器、颜色模板、透明度、色板、线性渐变颜色
效果图：
1.引入选择器的color-all文件
<template> <div> <div><div class="colorpicker-box" :style="{background:handStyle()}"></div></div> <h3>带编码显示的color选择器</h3> <div> <ColorPicker :data="pickerColor" @update:isLinear="pickerColor.isLinear = $event" @update:direction="pickerColor.direction = $event" @update:leftColor="handUpdateElement($event, 0)" @update:rightColor="handUpdateElement($event, 1)" ></ColorPicker></div> <h3>无编码显示的color选择器</h3> <div> <ColorPicker :data="pickerColor" :isText="false" @update:isLinear="pickerColor.isLinear = $event" @update:direction="pickerColor.direction = $event" @update:leftColor="handUpdateElement($event, 0)" @update:rightColor="handUpdateElement($event, 1)" ></ColorPicker> </div> </div> </template> <script> import ColorPicker from '@/components/color-modal/color-picker.vue' export default { components: { ColorPicker, }, data() { return { pickerColor: { isLinear: false, //是否线性 color: ['#334251'], //选择的颜色 direction: 'right', //方向 }, } }, methods: { handStyle() { return this.pickerColor.isLinear ? `linear-gradient(to ${this.pickerColor.direction},${this.pickerColor.color[0]} ,${this.pickerColor.color.length >= 2 ? this.pickerColor.color[1] : '#AE7DFF'})` : this.pickerColor.color[0] }, handUpdateElement(value, cursor = null) { this.$set(this.pickerColor.color, cursor, value) }, }, } </script> <style lang="less" scoped> .colorpicker{ &-box{ width: 200px; border-radius: 5px; height: 30px; } div{ padding: 10px; } } </style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
2.重点，选择器的封装组件文件color-picker.vue
<template> <el-popover placement="left-start" width="264" trigger="hover"> <div class="colorPickerBody"> <!-- tabs --> <div class="colorPickerBody-headers"> <el-radio-group v-model="activeName" size="mini" @change="handActive"> <el-radio-button :label="0">颜色填充</el-radio-button> <el-radio-button :label="1">线性填充</el-radio-button> </el-radio-group> </div> <!-- top部分 --> <div class="colorPickerBody-top"> <div class="colorPickerBody-top-one"> <!-- 颜色块color --> <div class="color-diamond"> <div :style="'background-color: ' + bgColor + ';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> <!-- select下拉 --> <el-dropdown @command="handleCommand" class="eldropdownColor"> <span class="el-dropdown-link"> {{ colorType }}<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown" :append-to-body="false"> <el-dropdown-item command="HEX">HEX</el-dropdown-item> <el-dropdown-item command="RGB">RGB</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <div v-if="colorType === 'HEX'"> <el-input v-model="bgColor" class="colorValcss" @input="bgColor = $event; handHEXtoRGB($event)"></el-input> </div> <div v-else class="colorRGBBox"> <el-input type="number" v-model="red" min="0" max="255" class="colorRGBValcss" @input="handredChange"></el-input><el-input type="number" v-model="green" min="0" max="255" class="colorRGBValcss" @input="handgreenChange"></el-input><el-input type="number" v-model="blue" min="0" max="255" class="colorRGBValcss" @input="handblueChange"></el-input></div> <div class="strawcss" title="吸管" @click="nativePick"><img src="@/assets/image/strawImg.svg"></div> </div> <!-- 线性特性box --> <div v-if="activeName === 1" class="colorPickerBody-top-two"> <div class="colorPickerBody-top-two-body"> <div class="colorPickerBody-top-two-body-tag" title="首部" @click="handAlphaColor(true)"><img :src="handLineImg(true)"></div> <div class="colorPickerBody-top-two-body-center" :style="'background: linear-gradient(to right, ' + handleftRightColor(true) + ', ' + handleftRightColor(false) + ');' "></div> <div class="colorPickerBody-top-two-body-tagRight" title="尾部" @click="handAlphaColor(false)"><img :src="handLineImg(false)"></div> </div> <div class="strawcss iconright" :title="data.direction === 'right' ? '旋转方向:上下' : '旋转方向:左右'" @click="handDirection"><i class="el-icon-refresh-right"></i> </div> </div> <!-- 透明度块 --> <div class="colorPickerBody-top-three"> <div class="colorPickerBody-top-three-Alpha" ref="saturation_value"> <div class="alpha-slider" ref="alpha_slider" @mousedown="mousedownAlpha"> <div class="slider" :style="alphaSliderStyle + ';background:' + bgColor"></div> <div :style="'background: linear-gradient(to right, rgba(0,0,0,0), ' + bgColor + ');width: 100%;height: 100%;border-radius: 10px;' "></div> </div> </div> <div class="colorPickerBody-top-three-number"> <el-input v-model="alpha" class="alphaValcss" type="number" min="0" max="100" @input="handAlpha"> <i slot="suffix" class="suffixInput">%</i></el-input></div> </div> </div> <!-- 中间线 --> <div class="colorPickerBody-border"></div> <!-- bottom的颜色选择器 --> <div class="colorPickerBody-body"> <div class="colorPickerBody-body-headers"> <div class="colorPickerBody-body-headers-title">颜色选择器</div> <div class="colorPickerBody-body-headers-svg"> <div :class="colorselecotr ? 'boxbuttom checkbuttom' : 'boxbuttom '" @click="colorselecotr = true"><img src="@/assets/image/colordemo.svg"> </div> <div :class="!colorselecotr ? 'boxbuttom checkbuttom' : 'boxbuttom '" @click="colorselecotr = false"><img src="@/assets/image/colorpick.svg"></div> </div> </div class="colorPickerBody-body-box"> <div v-if="colorselecotr"> <MyColorSelect class="MyColorSelect" :color="bgColor" :alphaValue="alpha" @update:color="bgColor = $event; handHEXtoRGB($event)"> </MyColorSelect> </div> <ul v-else class="colorDemoList"> <li v-for="(item, index) in colorAll" :key="index" :style="'background: ' + item" @click="bgColor = item; handHEXtoRGB(item)"></li> </ul> </div> </div> <!-- 仿input框，默认显示第一个color --> <div class="colorInputBody" slot="reference" v-if="isText"> <div class="colorBox" :style="'background:' + data.color[0]"></div> <div class="colorInputBody-title">{{ data.color[0] }}</div> </div> <div class="colorNoTextBody" slot="reference" v-else> <div class="colorNoTextBody-colorBox" :style="'background:' + data.color[0]"></div> </div> </el-popover> </template> <script> import MyColorSelect from "./MyColorSelect.vue" import moveCursorImg from '@/assets/image/moveCursorImg.png' import checkmoveCursorImg from '@/assets/image/checkmoveCursorImg.png' import message from "@/utils/message.js"; import { debounce } from '@/utils/util.js' export default { props: { data: { type: Object, default: () => ({ isLinear: false, //是否线性 color: ["#000"], //选择的颜色 direction: "right", //方向 }), }, //是否显示color编码 isText: { type: Boolean, default: true } }, components: { MyColorSelect }, data() { return { colorAll: ["#FF0000", "#FFA500", "#FFFF00", "#008000", "#0000FF", "#4B0082", "#EE82EE", "#FF1493", "#FF69B4", "#FF4500", "#FF6347", "#FFD700", "#ADFF2F", "#00FFFF", "#87CEEB", "#4169E1", "#800080", "#9932CC", "#8A2BE2", "#FF00FF", "#FFC0CB", "#F08080", "#CD5C5C", "#FA8072", "#FFA07A", "#FF7F50", "#FFDAB9", "#FFE4B5", "#FFDEAD", "#FFE4E1", "#FFF0F5", "#F0FFF0", "#F5FFFA", "#B0E0E6", "#ADD8E6", "#87CEFA", "#87CEEB", "#00BFFF", "#1E90FF", "#6495ED", "#4682B4", "#5F9EA0", "#20B2AA", "#008B8B", "#008080" ], alphaSliderStyle: "left: calc(100% - 6px);", alpha: 100, colorType: "HEX", bgColor: "", colorselecotr: true, activeName: 0, red: 255, green: 0, blue: 0, isLinearStart: true, moveCursorImg, checkmoveCursorImg, hasEyeDrop: 'EyeDropper' in window }; }, mounted() { this.bgColor = this.data.color[0] this.activeName = this.data.isLinear ? 1 : 0 }, methods: { handAlphaColor(item) { this.isLinearStart = item; let alphaNew = 1; if (item) { const { r, g, b, a } = this.parseColor(this.data.color[0]); alphaNew = a; } else { const { r, g, b, a } = this.parseColor(this.data.color[1]); alphaNew = a; } this.alpha = alphaNew.toFixed(2) * 100 this.handAlpha() }, // tag handActive(e) { if (e === 0) { this.bgColor = this.data.color[0] this.handAlphaColor(true) this.$emit('update:isLinear', false) } else { this.$emit('update:isLinear', true) } }, // 方向 handDirection() { if (this.data.direction === 'right') { this.$emit('update:direction', 'top') } else { this.$emit('update:direction', 'right') } }, //取色 async nativePick(e) { const val = e ? e.target.value : null if (val) { console.log('获得颜色: ' + val) } else { const eyeDropper = new window.EyeDropper() // 初始化一个EyeDropper对象 try { const result = await eyeDropper.open() // 开始拾取颜色 this.bgColor = result.sRGBHex; this.handHEXtoRGB(result.sRGBHex) } catch (e) { console.log('用户取消了取色') } } }, //判断线性条 handleftRightColor(val) { let color = '#AE7DFF'; if (val) { color = this.data.color[0] } else { if (this.data.color.length >= 2) color = this.data.color[1] } return color; }, //判断首尾游标 handLineImg(val) { let icon = moveCursorImg; if (val) { if (this.isLinearStart) { this.bgColor = this.data.color[0] icon = checkmoveCursorImg; } } else { if (!this.isLinearStart) { this.bgColor = this.data.color.length >= 2 ? this.data.color[1] : '#AE7DFF' icon = checkmoveCursorImg; } } return icon; }, handredChange(val) { if ((val ?? '') !== '') { this.bgColor = this.rgba2hex(val, this.green, this.blue, this.matchHexA()) this.handHEXtoRGB(this.bgColor) } }, handgreenChange(val) { if ((val ?? '') !== '') { this.bgColor = this.rgba2hex(this.red, val, this.blue, this.matchHexA()) this.handHEXtoRGB(this.bgColor) } }, handblueChange(val) { if ((val ?? '') !== '') { this.bgColor = this.rgba2hex(this.red, this.green, val, this.matchHexA()) this.handHEXtoRGB(this.bgColor) } }, matchHexA() { let percentage = this.alpha * 0.01; return percentage; }, rgba2hex(r, g, b, 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); a = parseFloat(a); let a1 = ""; if (a !== 1) { let temp = Math.floor(256 * a); a1 = temp.toString(16).length !== 2 ? "0" + temp.toString(16) : temp.toString(16); } return `#${r1}${g1}${b1}${a1}`.toUpperCase(); }, handAlpha() { this.alphaSliderStyle = `left: ${this.alpha >= 96 ? "calc(100% - 9px)" : this.alpha + '%' };`; }, // 透明度 handleChangeAlpha(e) { let w = this.$refs.alpha_slider.clientWidth; let x = e.pageX - this.$refs.saturation_value.getBoundingClientRect().left; x = x < w && x > 0 ? x : x > w ? w : 0; // 计算透明度 this.alpha = Math.floor((x / w) * 100 + 0.5); // 移动滑块 this.alphaSliderStyle = `left: ${x >= w - 6 ? w - 9 : x}px;`; if (!this.colorselecotr) { this.bgColor = this.rgba2hex(this.red, this.green, this.blue, this.matchHexA()) this.handHEXtoRGB(this.bgColor) } }, mousedownAlpha(e) { this.handleChangeAlpha(e); window.addEventListener("mousemove", this.handleChangeAlpha); window.addEventListener("mouseup", this.mouseupAlpha); }, mouseupAlpha(e) { window.removeEventListener("mousemove", this.handleChangeAlpha); window.removeEventListener("mouseup", this.mouseupAlpha); }, handleCommand(command) { this.colorType = command; if (command === "RGB") { this.handHEXtoRGB(this.bgColor) } }, isHexColorCode(str) { return /^#?([A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/.test(str); }, handHEXtoRGB: debounce(function (color) { if (!this.isHexColorCode(color)) { message.message("当前非HEX编码，请重新输入！", "error"); return } const { r, g, b, a } = this.parseColor(color); this.red = r; this.green = g; this.blue = b; if (this.isLinearStart) { this.$emit('update:leftColor', color) } else { this.$emit('update:rightColor', color) } }, 500), parseColor(color) { 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 ) ) { return this.hex2rgba(color); } } 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; a = color.a > 1 ? 1 : color.a < 0 ? 0 : color.a; return { r, g, b, a }; } } else { return null; } }, hex2rgba(s) { 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); 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); 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)); 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)); 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)); return { r, g, b, a }; } }, }, }; </script> <style scoped lang="less"> .colorDemoList { width: 100%; list-style-type: none; padding: 13px 0 0 0; margin: 0; li { display: inline-block; width: 16px; cursor: pointer; border-radius: 2px; height: 16px; margin: 0 9px 8px 0; } } /* 颜色方块 */ .color-diamond { position: relative; width: 24px; height: 24px; border-radius: 2px; overflow: hidden; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg=="); background-size: 10px 10px; margin-right: 8px; } .iconright { font-size: 15px; cursor: pointer; } .strawcss { display: flex; align-items: center; justify-content: center; width: 24px; padding-left: 5px; img { cursor: pointer; } } .eldropdownColor { width: 56px; color: #fff; } .colorPickerBody { height: 100%; width: 100%; padding: 5px 11px 13px 11px; &-top { padding: 10px 0 12px 0; width: 100%; height: 100%; &-one { display: flex; align-items: center; } &-two { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; width: 100%; &-body { width: 100%; display: flex; flex-direction: row; align-items: center; position: relative; &-tag { position: absolute; left: -1px; top: -2px; cursor: pointer; z-index: 1; } img { width: 14px; height: 18px; } &-tagRight { position: absolute; right: -1px; top: -2px; cursor: pointer; } &-center { left: 6px; position: absolute; width: calc(100% - 12px); height: 12px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg=="); background-size: 10px 10px; } } } &-three { width: 100%; display: flex; justify-content: space-between; align-items: center; padding-top: 20px; &-Alpha { width: 80% } &-number { width: 15%; ::v-deep.el-input__suffix { right: 2px; top: 1px; } .suffixInput { color: #fff; font-size: 12px; } .alphaValcss { width: 44px; ::v-deep .el-input__inner { text-align: center; height: 24px; font-size: 12px; padding: 0 3px; border-radius: 5px; border: 1px solid #484849; background: #29292cFF; color: #fff; } } } } .colorValcss { width: 119px; ::v-deep .el-input__inner { height: 24px; border-radius: 2px 2px 2px 2px; border: 1px solid #484849; background: #29292cFF; color: #fff; } } .colorRGBBox { display: flex; } .colorRGBValcss { width: 40px; ::v-deep .el-input__inner { height: 24px; padding: 0 3px; text-align: center; border-radius: 2px 2px 2px 2px; border: 1px solid #484849; background: #29292cFF; color: #fff; } } } &-border { height: 1px; background: #484849; margin: 0 0 12px 0; width: 100%; } &-body { width: 100%; height: 100%; &-headers { display: flex; justify-content: space-between; align-items: center; &-title { color: #fff; font-size: 14px; } &-svg { width: 43px; display: flex; justify-content: space-between; .checkbuttom { background: #3C3C3F; border-radius: 2px 2px 2px 2px; } .boxbuttom { width: 22px; height: 22px; display: flex; justify-content: center; align-items: center; } img { width: 16px; height: 16px; cursor: pointer; } } } } &-headers { ::v-deep .el-radio-group { display: flex; } ::v-deep .el-radio-button__inner { background: #29292c; border-radius: 2px 2px 2px 2px; border: 1px solid #484849; color: #99999b; width: 116px; height: 28px; box-shadow: none; } // 修改激活后的样式 ::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner { background: #373739; border-radius: 2px 2px 2px 2px; border: 1px solid #484849; color: #fff; } } } .colorInputBody { display: flex; flex-direction: Row; align-items: center; height: 30px; width: 120px; padding-left: 8px; border: 1px solid #000; border-radius: 5px; &-title { padding-left: 8px; color: #000; } } .colorNoTextBody { width: 30px; height: 30px; border: none; padding: 3px; &-colorBox { width: 24px; height: 24px; border-radius: 4px; } } .colorBox { width: 26px; height: 14px; } /* 透明度滑块条 */ .alpha-slider { border-radius: 10px; position: relative; height: 12px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg=="); background-size: 10px 10px; } /* 滑块 */ .slider { border-radius: 20px; position: absolute; box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); box-sizing: border-box; width: 12px; height: 100%; border: 3px solid #fff; } </style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
- 339
- 340
- 341
- 342
- 343
- 344
- 345
- 346
- 347
- 348
- 349
- 350
- 351
- 352
- 353
- 354
- 355
- 356
- 357
- 358
- 359
- 360
- 361
- 362
- 363
- 364
- 365
- 366
- 367
- 368
- 369
- 370
- 371
- 372
- 373
- 374
- 375
- 376
- 377
- 378
- 379
- 380
- 381
- 382
- 383
- 384
- 385
- 386
- 387
- 388
- 389
- 390
- 391
- 392
- 393
- 394
- 395
- 396
- 397
- 398
- 399
- 400
- 401
- 402
- 403
- 404
- 405
- 406
- 407
- 408
- 409
- 410
- 411
- 412
- 413
- 414
- 415
- 416
- 417
- 418
- 419
- 420
- 421
- 422
- 423
- 424
- 425
- 426
- 427
- 428
- 429
- 430
- 431
- 432
- 433
- 434
- 435
- 436
- 437
- 438
- 439
- 440
- 441
- 442
- 443
- 444
- 445
- 446
- 447
- 448
- 449
- 450
- 451
- 452
- 453
- 454
- 455
- 456
- 457
- 458
- 459
- 460
- 461
- 462
- 463
- 464
- 465
- 466
- 467
- 468
- 469
- 470
- 471
- 472
- 473
- 474
- 475
- 476
- 477
- 478
- 479
- 480
- 481
- 482
- 483
- 484
- 485
- 486
- 487
- 488
- 489
- 490
- 491
- 492
- 493
- 494
- 495
- 496
- 497
- 498
- 499
- 500
- 501
- 502
- 503
- 504
- 505
- 506
- 507
- 508
- 509
- 510
- 511
- 512
- 513
- 514
- 515
- 516
- 517
- 518
- 519
- 520
- 521
- 522
- 523
- 524
- 525
- 526
- 527
- 528
- 529
- 530
- 531
- 532
- 533
- 534
- 535
- 536
- 537
- 538
- 539
- 540
- 541
- 542
- 543
- 544
- 545
- 546
- 547
- 548
- 549
- 550
- 551
- 552
- 553
- 554
- 555
- 556
- 557
- 558
- 559
- 560
- 561
- 562
- 563
- 564
- 565
- 566
- 567
- 568
- 569
- 570
- 571
- 572
- 573
- 574
- 575
- 576
- 577
- 578
- 579
- 580
- 581
- 582
- 583
- 584
- 585
- 586
- 587
- 588
- 589
- 590
- 591
- 592
- 593
- 594
- 595
- 596
- 597
- 598
- 599
- 600
- 601
- 602
- 603
- 604
- 605
- 606
- 607
- 608
- 609
- 610
- 611
- 612
- 613
- 614
- 615
- 616
- 617
- 618
- 619
- 620
- 621
- 622
- 623
- 624
- 625
- 626
- 627
- 628
- 629
- 630
- 631
- 632
- 633
- 634
- 635
- 636
- 637
- 638
- 639
- 640
- 641
- 642
- 643
- 644
- 645
- 646
- 647
- 648
- 649
- 650
- 651
- 652
- 653
- 654
- 655
- 656
- 657
- 658
- 659
- 660
- 661
- 662
- 663
- 664
- 665
- 666
- 667
- 668
- 669
- 670
- 671
- 672
- 673
- 674
- 675
- 676
- 677
- 678
- 679
- 680
- 681
- 682
- 683
- 684
- 685
- 686
- 687
- 688
- 689
- 690
- 691
- 692
- 693
- 694
- 695
- 696
- 697
- 698
- 699
- 700
- 701
- 702
- 703
- 704
- 705
- 706
- 707
- 708
- 709
3.选择器的颜色板，MyColorSelect.vue页面
<template> <div class="color-select"> <div class="saturation-value" ref="saturation_value" @mousedown="mousedownSV"> <div :style="'background-color: hsl(' + hue + ', 100%, 50%);'"> <div class="point" :style="pointStyle"></div> </div> <div class="saturation-value-2"></div> <div class="saturation-value-3"></div> </div> <div class="color-select-middle"> <div style="flex: auto"> <div class="hue-slider" ref="hue_slider" @mousedown="mousedownHue"> <div class="slider" :style="hueSliderStyle"></div> </div> </div> </div> </div> </template> <script> export default { name: "MyColorSelect", props: { color: { type: String, default: "", }, alphaValue: { type: Number, default: 100, }, }, data() { return { pointStyle: "top: 25%; left: 80%;", hueSliderStyle: "left: 0;", hue: 0, saturation: 1, value: 1, red: 255, green: 0, blue: 0, alpha: 1, }; }, watch: { color: { handler(val) { this.handParse(val); }, }, alphaValue: { handler(val) { this.$emit( "update:color", this.rgba2hex(this.red, this.green, this.blue, this.matchHexA()) ); }, }, }, mounted() { this.handParse(this.color); }, methods: { handParse(color) { if ((this.parseColor(color) ?? "") !== "") { const { r, g, b, a } = this.parseColor(color); this.red = r; this.green = g; this.blue = b; this.alpha = a; this.updateColor(); } }, updateColor() { let { h, s, v } = this.rgb2hsv(this.red, this.green, this.blue); this.hue = h; this.saturation = s; this.value = v; // 移动背景板圆圈 this.pointStyle = `top: ${100 - v * 100}%;left: ${s * 100}%;`; // 移动色调滑块 this.hueSliderStyle = `left: ${(this.hue / 360) * 100}%;`; }, rgb2hsv(r, g, b) { 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; let h, s, v; if (d === 0) { h = 0; } else if (cmax === r1) { h = ((60 * (g1 - b1)) / d + 360) % 360; } else if (cmax === g1) { h = 60 * ((b1 - r1) / d + 2); } else if (cmax === b1) { h = 60 * ((r1 - g1) / d + 4); } if (cmax === 0) { s = 0; } else { s = d / cmax; } v = cmax; h = Math.floor(h + 0.5); s = Math.floor(s * 100 + 0.5) / 100; v = Math.floor(v * 100 + 0.5) / 100; return { h, s, v }; }, // 色调 handleChangeHue(e) { let w = this.$refs.hue_slider.clientWidth; let x = e.pageX - this.$refs.saturation_value.getBoundingClientRect().left; x = x < w && x > 0 ? x : x > w ? w : 0; // 计算色调 this.hue = Math.floor((x / w) * 360 + 0.5); // hsv转化为rgb let { r, g, b } = this.hsv2rgb(this.hue, this.saturation, this.value); this.red = r; this.green = g; this.blue = b; // 移动滑块 this.hueSliderStyle = `left: ${x >= w - 6 ? w - 6 : x}px;`; this.$emit("update:color", this.rgba2hex(r, g, b, this.matchHexA())); }, mousedownHue(e) { this.handleChangeHue(e); window.addEventListener("mousemove", this.handleChangeHue); window.addEventListener("mouseup", this.mouseupHue); }, mouseupHue(e) { window.removeEventListener("mousemove", this.handleChangeHue); window.removeEventListener("mouseup", this.mouseupHue); }, // 饱和度和亮度 handleChangeSV(e) { let w = this.$refs.saturation_value.clientWidth; let h = this.$refs.saturation_value.clientHeight; let x = e.pageX - this.$refs.saturation_value.getBoundingClientRect().left; let y = e.pageY - this.$refs.saturation_value.getBoundingClientRect().top; x = x < w && x > 0 ? x : x > w ? w : 0; y = y < h && y > 0 ? y : y > h ? h : 0; // 计算饱和度和亮度 this.saturation = Math.floor((x / w) * 100 + 0.5) / 100; this.value = Math.floor((1 - y / h) * 100 + 0.5) / 100; // hsv转化为rgb let { r, g, b } = this.hsv2rgb(this.hue, this.saturation, this.value); this.red = r; this.green = g; this.blue = b; // 移动背景板圆圈 this.pointStyle = `top: ${y}px;left: ${x}px;`; this.$emit("update:color", this.rgba2hex(r, g, b, this.matchHexA())); }, matchHexA() { let percentage = this.alphaValue * 0.01; return percentage; }, mousedownSV(e) { // 鼠标按下计算饱和度和亮度并添加事件 this.handleChangeSV(e); // 添加整个页面的鼠标事件 window.addEventListener("mousemove", this.handleChangeSV); window.addEventListener("mouseup", this.mouseupSV); }, mouseupSV(e) { // 鼠标松开后移除事件 window.removeEventListener("mousemove", this.handleChangeSV); window.removeEventListener("mouseup", this.mouseupSV); }, parseColor(color) { 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 ) ) { return this.hex2rgba(color); } } 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; a = color.a > 1 ? 1 : color.a < 0 ? 0 : color.a; return { r, g, b, a }; } } else { return null; } }, hsv2rgb(h, s, v) { 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)); let r, g, b; if (i === 0) { r = v; g = t; b = p; } else if (i === 1) { r = q; g = v; b = p; } else if (i === 2) { r = p; g = v; b = t; } else if (i === 3) { r = p; g = q; b = v; } else if (i === 4) { r = t; g = p; b = v; } else if (i === 5) { r = v; g = p; b = q; } r = Math.floor(r * 255 + 0.5); g = Math.floor(g * 255 + 0.5); b = Math.floor(b * 255 + 0.5); return { r, g, b }; }, rgba2hex(r, g, b, 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); a = parseFloat(a); let a1 = ""; if (a !== 1) { let temp = Math.floor(256 * a); a1 = temp.toString(16).length !== 2 ? "0" + temp.toString(16) : temp.toString(16); } return `#${r1}${g1}${b1}${a1}`.toUpperCase(); }, hex2rgba(s) { 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); 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); 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)); 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)); 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)); return { r, g, b, a }; } }, }, }; </script> <style scoped> .color-select { position: relative; user-select: none; width: 100%; padding: 12px 0 0 0; } /* 饱和度和亮度 */ .saturation-value { cursor: pointer; width: 100%; height: 148px; position: relative; margin-bottom: 12px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); } .saturation-value>div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* 圆圈 */ .point { box-sizing: border-box; width: 6px; height: 6px; background-color: transparent; border: 2px solid #ccc; border-radius: 50%; transform: translate(-50%, -50%); position: absolute; z-index: 9; } .saturation-value-2 { background: linear-gradient(to right, white, #ffffff00); } .saturation-value-3 { background: linear-gradient(to top, black, #ffffff00); } /* 色调滑块条 */ .hue-slider { position: relative; height: 10px; background: linear-gradient(90deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); } /* 滑块 */ .slider { position: absolute; box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); box-sizing: border-box; width: 6px; height: 100%; background-color: #fff; } </style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
- 339
- 340
- 341
- 342
- 343
- 344
- 345
- 346
- 347
- 348
- 349
- 350
- 351
- 352
- 353
- 354
- 355
- 356
- 357
- 358
- 359
- 360
- 361
- 362
- 363
- 364
- 365
- 366
- 367
4.其中utils文件夹里的两个文件如下
message.js
import { Message, MessageBox } from 'element-ui'; let message = { message: function(str, type = 'success') { Message[type](str); }, confirm: function(text, title = '提示', confirm = null, cancel = null) { MessageBox.confirm(text, title, { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then((res) => { confirm && confirm(res); }).catch((res) => { cancel && cancel(res); }); } }; export default message;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
util.js
//防抖 export const debounce=(fn, t) =>{ const delay = t || 100; let timer = null; return function() { const args = arguments; const context = this; if (timer) { clearTimeout(timer); } timer = setTimeout(() => { timer = null; fn.apply(context, args); }, delay); }; }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
5.重点：elementStyle.css样式文件，用于更改选择器的覆盖颜色
elementStyle.css文件需要在main.js引入
import '@/assets/css/elementStyle.css'
- 1
6.elementStyle.css代码如下
.el-popover{ background: #303030 ; color: #ffffff; font-size: 12px; border: 1px solid rgba(255, 255, 255, 0.06); padding: 5px 5px; min-width: 40px; } .popper__arrow { display: none !important; } .el-dropdown-menu{ background: #303030; border: 1px solid rgba(255, 255, 255, 0.06); } .el-dropdown-menu__item { color: #fff; width: 70px; } .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover { background: #373739FF; }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
7.引入的图片和svg图片在项目源码包里src/assets/image路径下
8.注意点
如果下载源码的话先
先执行
yarn install
再执行
yarn serve
- 1
- 2
- 3
- 4
运行成功后直接使用
http://127.0.0.1:8000/home访问
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/一键难忘520/article/detail/914179
推荐阅读
Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。
