基于vue3 实现页面自动配色、颜色选择器组件
2024-04-05 12:17:01
在网上找的各种颜色的相互转换函数，参考了elementUI的 color-picker组件
function FindRGB(q1, q2, hue) {if (hue > 360) hue = hue - 360;if (hue < 0) hue = hue + 360;if (hue < 60) return (q1 + (q2 - q1) * hue / 60);else if (hue < 180) return (q2);else if (hue < 240) return (q1 + (q2 - q1) * (240 - hue) / 60);else return (q1);
}function HSLtoRGB(H, S, L) {var p1, p2;var tempRGB = { R: 0, G: 0, B: 0 }L /= 100;S /= 100;if (L <= 0.5) p2 = L * (1 + S);else p2 = L + S - (L * S);p1 = 2 * L - p2;if (S == 0) {tempRGB.R = L;tempRGB.G = L;tempRGB.B = L;}else {tempRGB.R = FindRGB(p1, p2, H + 120);tempRGB.G = FindRGB(p1, p2, H);tempRGB.B = FindRGB(p1, p2, H - 120);}tempRGB.R *= 255;tempRGB.G *= 255;tempRGB.B *= 255;tempRGB.R = Math.round(tempRGB.R);tempRGB.G = Math.round(tempRGB.G);tempRGB.B = Math.round(tempRGB.B);return tempRGB
}function RGBtoHSL(r, g, b) {var Min = 0;var Max = 0;const HSL = { H: 0, S: 0, L: 0 }r = (eval(r) / 51) * .2;g = (eval(g) / 51) * .2;b = (eval(b) / 51) * .2;if (eval(r) >= eval(g))Max = eval(r);elseMax = eval(g);if (eval(b) > eval(Max))Max = eval(b);if (eval(r) <= eval(g))Min = eval(r);elseMin = eval(g);if (eval(b) < eval(Min))Min = eval(b);HSL.L = (eval(Max) + eval(Min)) / 2;if (eval(Max) == eval(Min)) {HSL.S = 0;HSL.H = 0;}else {if (HSL.L < .5)HSL.S = (eval(Max) - eval(Min)) / (eval(Max) + eval(Min));if (HSL.L >= .5)HSL.S = (eval(Max) - eval(Min)) / (2 - eval(Max) - eval(Min));if (r == Max)HSL.H = (eval(g) - eval(b)) / (eval(Max) - eval(Min));if (g == Max)HSL.H = 2 + ((eval(b) - eval(r)) / (eval(Max) - eval(Min)));if (b == Max)HSL.H = 4 + ((eval(r) - eval(g)) / (eval(Max) - eval(Min)));}HSL.H = Math.round(HSL.H * 60);if (HSL.H < 0) HSL.H += 360;if (HSL.H >= 360) HSL.H -= 360;HSL.S = Math.round(HSL.S * 100);HSL.L = Math.round(HSL.L * 100);return HSL
}
//计算辅助色
function getSecColor(r, g, b) {const { H, S, L } = RGBtoHSL(r, g, g)if (H > 120 && H < 290) {//coldif (Math.abs(210 - (H + 30)) < Math.abs(210 - (H - 30))) {return HSLtoRGB(H + 30, S, L)} else {return HSLtoRGB(H + 30, S, L)}} else {if (Math.abs(30 - (H + 30)) < Math.abs(30 - (H - 30))) {return HSLtoRGB(H + 30, S, L)} else {return HSLtoRGB(H + 30, S, L)}}
}function getContrastColor(r, g, b) {const hsl = RGBtoHSL(r, g, b)hsl.H = (hsl.H + 180) % 360return HSLtoRGB(hsl.H, hsl.S, hsl.L)
}function getLightenColor(r, g, b) {const { H, S, L } = RGBtoHSL(r, g, b)return HSLtoRGB(H, S, Math.min(100, L + 5))
}function getDarkcolor(r, g, b) {const { H, S, L } = RGBtoHSL(r, g, b)return HSLtoRGB(H, S, Math.max(0, L - 5))
}
function setvar(key, value) {document.body.style.setProperty(key, value)
}
function rgb2hex(rgb) {rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);function hex(x) {return ("0" + parseInt(x).toString(16)).slice(-2).toUpperCase();}return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
function rgba2hex(r, g, b, a) {function hex(x) {return ("0" + parseInt(x).toString(16)).slice(-2).toUpperCase();}return "#" + hex(r) + hex(g) + hex(b)+hex(256*a-1);
}function hsv2hsl(hue, sat, val) {return [hue,(sat * val / ((hue = (2 - sat) * val) < 1 ? hue : 2 - hue)) || 0,hue / 2];
};// Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
// <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
const isOnePointZero = function (n) {return typeof n === 'string' && n.indexOf('.') !== -1 && parseFloat(n) === 1;
};const isPercentage = function (n) {return typeof n === 'string' && n.indexOf('%') !== -1;
};// Take input from [0, n] and return it as [0, 1]
const bound01 = function (value, max) {if (isOnePointZero(value)) value = '100%';const processPercent = isPercentage(value);value = Math.min(max, Math.max(0, parseFloat(value)));// Automatically convert percentage into numberif (processPercent) {value = parseInt(value * max, 10) / 100;}// Handle floating point rounding errorsif ((Math.abs(value - max) < 0.000001)) {return 1;}// Convert into [0, 1] range if it isn't alreadyreturn (value % max) / parseFloat(max);
};const INT_HEX_MAP = { 10: 'A', 11: 'B', 12: 'C', 13: 'D', 14: 'E', 15: 'F' };const toHex = function ({ r, g, b }) {const hexOne = function (value) {value = Math.min(Math.round(value), 255);const high = Math.floor(value / 16);const low = value % 16;return '' + (INT_HEX_MAP[high] || high) + (INT_HEX_MAP[low] || low);};if (isNaN(r) || isNaN(g) || isNaN(b)) return '';return '#' + hexOne(r) + hexOne(g) + hexOne(b);
};const HEX_INT_MAP = { A: 10, B: 11, C: 12, D: 13, E: 14, F: 15 };const parseHexChannel = function (hex) {if (hex.length === 2) {return (HEX_INT_MAP[hex[0].toUpperCase()] || +hex[0]) * 16 + (HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1]);}return HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1];
};const hsl2hsv = function (hue, sat, light) {sat = sat / 100;light = light / 100;let smin = sat;const lmin = Math.max(light, 0.01);let sv;let v;light *= 2;sat *= (light <= 1) ? light : 2 - light;smin *= lmin <= 1 ? lmin : 2 - lmin;v = (light + sat) / 2;sv = light === 0 ? (2 * smin) / (lmin + smin) : (2 * sat) / (light + sat);return {h: hue,s: sv * 100,v: v * 100};
};// `rgbToHsv`
// Converts an RGB color value to HSV
// *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
// *Returns:* { h, s, v } in [0,1]
const rgb2hsv = function (r, g, b) {r = bound01(r, 255);g = bound01(g, 255);b = bound01(b, 255);const max = Math.max(r, g, b);const min = Math.min(r, g, b);let h, s;let v = max;const d = max - min;s = max === 0 ? 0 : d / max;if (max === min) {h = 0; // achromatic} else {switch (max) {case r:h = (g - b) / d + (g < b ? 6 : 0);break;case g:h = (b - r) / d + 2;break;case b:h = (r - g) / d + 4;break;}h /= 6;}return { h: h * 360, s: s * 100, v: v * 100 };
};// `hsvToRgb`
// Converts an HSV color value to RGB.
// *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
// *Returns:* { r, g, b } in the set [0, 255]
const hsv2rgb = function (h, s, v) {h = bound01(h, 360) * 6;s = bound01(s, 100);v = bound01(v, 100);const i = Math.floor(h);const f = h - i;const p = v * (1 - s);const q = v * (1 - f * s);const t = v * (1 - (1 - f) * s);const mod = i % 6;const r = [v, q, p, p, t, v][mod];const g = [t, v, v, q, p, p][mod];const b = [p, p, t, v, v, q][mod];return {r: Math.round(r * 255),g: Math.round(g * 255),b: Math.round(b * 255)};
};export default {FindRGB,HSLtoRGB,RGBtoHSL,getSecColor,getContrastColor,getLightenColor,getDarkcolor,setvar,rgb2hex,hsv2hsl,toHex,parseHexChannel,hsl2hsv,rgb2hsv,hsv2rgb,rgba2hex
}组件的实现 w-theme.vue
<script setup>
import { computed, onMounted, reactive, ref, toRefs, useAttrs, watch } from 'vue';
import color from './color';
import Clipboard from 'clipboard'
const showBox = ref(false)
const HSV = reactive({ H: 0, S: 100, V: 50 })
const RGBA = reactive({ R: 0, G: 0, B: 0, A: 1 })function fn_button_click() {showBox.value = !showBox.value
}const hubBall = ref(null)
const opacityBall = ref(null)
const plateBall = ref(null)
function asyncBallPosition(r, g, b) {const hsv = color.rgb2hsv(r, g, b)setBallPosition(hubBall.value, hsv.h * 100 / 360 + "%")setBallPosition(opacityBall.value, "100%")setBallPosition(plateBall.value, hsv.s + "%", (100 - hsv.v) + "%")
}
function setHSV(r, g, b) {const hsv = color.rgb2hsv(r, g, b)HSV.H = hsv.hHSV.S = hsv.sHSV.V = hsv.v
}
function setBallPosition(ball, x, y) {const ballRect = ball.getBoundingClientRect()ball.style.left = `calc( ${x} - ${ballRect.width / 2}px )`if (y) {ball.style.top = `calc( ${y} - ${ballRect.height / 2}px )`}
}
function fn_handler(e, type) {// type plate || hubBar || opacityBarconst boxReact = e.target.getBoundingClientRect()const ball = e.target.children.item(0)const offsetX = e.clientX - boxReact.x, offsetY = e.clientY - boxReact.ylet percentageX = offsetX / boxReact.widthif (percentageX > 1) { percentageX = 1 }if (percentageX < 0) { percentageX = 0 }if (type == 'opacityBar') {//设置ARGBA.A = +percentageX.toFixed(2)setBallPosition(ball, percentageX * 100 + "%")return}if (type == 'hubBar') {//设置HHSV.H = +(percentageX * 360).toFixed(2)setBallPosition(ball, percentageX * 100 + "%")}if (type == "plate") {//设置 S、VHSV.S = +(percentageX * 100).toFixed(2)let percentageY = offsetY / boxReact.heightif (percentageY > 1) { percentageY = 1 }if (percentageY < 0) { percentageY = 0 }HSV.V = +(100 - percentageY * 100).toFixed(2)setBallPosition(ball, percentageX * 100 + "%", percentageY * 100 + "%")}const rgbColor = color.hsv2rgb(HSV.H, HSV.S, HSV.V)RGBA.R = rgbColor.rRGBA.G = rgbColor.gRGBA.B = rgbColor.b
}const hex = computed(() => {const opacity = parseInt(RGBA.A * 255).toString(16).toUpperCase().padStart(2, '0')return color.toHex({ r: RGBA.R, g: RGBA.G, b: RGBA.B }) + opacity
})
const hsla = computed(() => {const hsl = color.RGBtoHSL(RGBA.R, RGBA.G, RGBA.B)const alpha = +(RGBA.A * 100).toFixed(2)return `hsla(${hsl.H},${hsl.S}%,${hsl.L}%,${alpha}%)`
})
const exampleColors = computed(() =>["#F44336", "#E91E63", "#9C27B0", "#673AB7", "#3F51B5", "#2196F3", "#03A9F4", "#00BCD4", "#00BCD4", "#4CAF50", "#8BC34A", "#CDDC39", "#FFEB3B", "#FFC107", "#FF9800", "#FF5722", "#795548", "#9E9E9E", "#607D8B", "#B0BEC5"]
)
watch(RGBA, () => {localStorage.setItem("sampleColor", hex.value)color.setvar('--main', hex.value)const dmain = color.getDarkcolor(RGBA.R, RGBA.G, RGBA.B)color.setvar('--dmain', color.rgba2hex(dmain.R, dmain.G, dmain.B, RGBA.A))const lmain = color.getLightenColor(RGBA.R, RGBA.G, RGBA.B)color.setvar('--lmain', color.rgba2hex(lmain.R, lmain.G, lmain.B, RGBA.A))const sec = color.getSecColor(dmain.R, dmain.G, dmain.B, RGBA.A)color.setvar('--sec', color.rgba2hex(sec.R, sec.G, sec.B, RGBA.A))const contrast = color.getContrastColor(RGBA.R, RGBA.G, RGBA.B)color.setvar('--contrast', color.rgba2hex(contrast.R, contrast.G, contrast.B, RGBA.A))
})function fn_example_item_click(sample) {RGBA.B = ("0x" + sample.substr(-2)) / 1RGBA.G = ("0x" + sample.substr(-4, 2)) / 1RGBA.R = ("0x" + sample.substr(-6, 2)) / 1RGBA.A = 1asyncBallPosition(RGBA.R, RGBA.G, RGBA.B)setHSV(RGBA.R, RGBA.G, RGBA.B)}const button = ref(null)
const bx = ref(0), by = ref(0)
const box = ref(null)
const trangleDom = ref(null)
function setBoxPostion() {if (!showBox.value) {return}const buttonRect = button.value.getBoundingClientRect()const bodyRect = document.body.getBoundingClientRect()// width: 270px;// height: 370px;box.value.style.height = "370px"box.value.style.width = "270px"if (bodyRect.height - buttonRect.bottom > 375) {//按钮下方的空间可以容纳弹窗。by.value = buttonRect.bottom + 5;trangleDom.value.className = "trangle trangle-up"} else if (buttonRect.top > 375) {by.value = buttonRect.top - 375;trangleDom.value.className = "trangle trangle-down"} else {trangleDom.value.className = "trangle trangle-up"by.value = buttonRect.bottom + 5;box.value.style.height = bodyRect.height - buttonRect.bottom - 5 + "px"box.value.style.overflow = 'auto'}let left = buttonRect.left + buttonRect.width / 2 - 270 / 2if ((left + 270) > bodyRect.width) {left = bodyRect.width - 270 - 10} else if (left < 5) {left = 5}bx.value = leftlet trangleDomLeft = buttonRect.left - left + buttonRect.width / 2if (trangleDomLeft < 5) {trangleDomLeft = 5} else if (trangleDomLeft > 258) {trangleDomLeft = 258}trangleDom.value.style.left = trangleDomLeft + 'px'
}
watch(showBox, setBoxPostion)
function setClipboard() {new Clipboard('.res-item').on('success', e => {e.trigger.querySelector('.tips').innerHTML = "Copied"setTimeout(() => {e.trigger.querySelector('.tips').innerHTML = "COPY"}, 2000)})
}const props = defineProps({color: {type: String,default: ''}
})
onMounted(() => {if (props.color) {fn_example_item_click(props.color.substring(0, 7))} else {const sampleColor = localStorage.getItem("sampleColor") || "#448aff"fn_example_item_click(sampleColor.substring(0, 7))}setClipboard()setBoxPostion()window.addEventListener('resize', setBoxPostion)
})</script>
<template><div class="w-theme-button" ref="button" @click="fn_button_click" v-bind="useAttrs()"></div><divclass="w-theme-box--mask"v-show="showBox"@scroll="showBox = false"@click="showBox = false"></div><transition name="fade"><div class="box" v-show="showBox" ref="box" :style="{ top: by + 'px', left: bx + 'px' }"><divclass="plate":style="`background-color:hsl(${HSV.H}deg,100%,50%)`"@mousedown="fn_handler($event, 'plate')"><div class="ball" ref="plateBall"></div><div class="bg bg1"></div><div class="bg bg2"></div></div><div class="bar"><div class="target"><div class="target-inner"></div></div><div class="bar-inner-right"><div class="color-bar control-bar" @mousedown="fn_handler($event, 'hubBar')"><div class="ball" ref="hubBall"></div></div><divclass="opacity-bar control-bar"@mousedown="fn_handler($event, 'opacityBar')"><div class="ball" ref="opacityBall"></div><divclass="opacity-inner-bar":style="`background-image:linear-gradient(to right,transparent,rgb(${RGBA.R},${RGBA.G},${RGBA.B}))`"></div></div></div></div><div class="res"><div class="res-item" :data-clipboard-text="hex">{{ hex }}<div class="tips">COPY</div></div><div class="res-item" :data-clipboard-text="hsla">{{ hsla }}<div class="tips">COPY</div></div></div><div class="example"><divclass="example-item"v-for="color in exampleColors":key="color":style="{ background: color }"@click="fn_example_item_click(color)":data-color="color"></div></div><div class="example-panel"><div class="example-panel-item"></div><div class="example-panel-item"></div><div class="example-panel-item"></div><div class="example-panel-item"></div><div class="example-panel-item"></div></div><div class="trangle" ref="trangleDom"></div></div></transition>
</template>
<style lang="less">
@transpartBG: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==";
.border-radius {border-radius: 3px;
}
.fade-enter-active,
.fade-leave-active {transition: opacity 500ms ease;
}.fade-enter-from,
.fade-leave-to {opacity: 0;
}
.w-theme-button {background-color: var(--main);width: 16px;height: 16px;border: 1px solid rgb(125, 26, 148);border-radius: 4px;display: inline-block;cursor: pointer;
}
.w-theme-box--mask {position: fixed;z-index: 9998;width: 100vw;height: 100vh;background-color: #62634f1f;
}
.box {position: fixed;// top: 20px;// left: 180px;width: 270px;height: 370px;background-color: #fff;box-shadow: 0px 0px 10px 4px #181b1e33;transition: opacity 200ms;user-select: none;z-index: 9999;.border-radius;.trangle {position: absolute;width: 0;height: 0;transform: translateX(-50%);&.trangle-up {bottom: 100%;border-bottom: 5px solid #fff;border-left: 5px solid transparent;border-right: 5px solid transparent;}&.trangle-down {top: 100%;border-top: 5px solid #fff;border-left: 5px solid transparent;border-right: 5px solid transparent;}}.example-panel {display: flex;height: 50px;justify-content: space-evenly;align-items: center;.example-panel-item {width: 15%;height: 60%;background-image: url(@transpartBG);border-radius: 4px;position: relative;&:after {content: "";position: absolute;display: inline-block;width: 100%;height: 100%;border-radius: 4px;}&:nth-child(1):after {background-color: var(--main);}&:nth-child(2):after {background-color: var(--lmain);}&:nth-child(3):after {background-color: var(--dmain);}&:nth-child(4):after {background-color: var(--sec);}&:nth-child(5):after {background-color: var(--contrast);}}}.example {display: flex;flex-wrap: wrap;padding-bottom: 10px;.border-radius;.example-item {width: 16px;height: 16px;border-radius: 4px;margin-top: 10px;margin-left: 10px;cursor: pointer;position: relative;&:hover {&:after {content: attr(data-color);position: absolute;left: 10px;background: #9e9e9ebf;padding: 4px;border-radius: 6px;z-index: 1;transform: translate(-50%, -50%);bottom: calc(100% - 5px);font-size: 12px;color: white;}&::before {content: "";width: 0;height: 0;border-style: solid;border-color: transparent;border-left-width: 5px;border-right-width: 5px;border-top-color: #9e9e9ebf;border-top-width: 5px;border-bottom-width: 0;display: inline-block;position: absolute;top: -5px;z-index: -1;transform: translateX(-50%);left: 50%;}}}}.res {display: flex;height: 40px;border-bottom: 1px solid #eee;justify-content: space-evenly;.res-item {// flex: 1;line-height: 40px;text-align: center;font-size: 10px;padding-left: 10px;padding-right: 10px;position: relative;cursor: pointer;.tips {cursor: pointer;opacity: 0;position: absolute;top: 0;right: 0;// width: 40px;padding: 0 4px;height: 20px;background: #5e6cb9;transition: opacity 400ms;pointer-events: none;line-height: 20px;font-weight: bold;color: #b9ac5f;}&:hover {.tips {opacity: 1;}}}}.plate {position: relative;height: 145px;.border-radius;.bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;box-sizing: border-box;pointer-events: none;&.bg1 {background-image: linear-gradient(to right, #fff, #ffffff00);}&.bg2 {background-image: linear-gradient(to bottom, transparent, #000);}}.ball {position: absolute;width: 12px;height: 12px;border-radius: 50%;border: 1px solid #eee;pointer-events: none;box-shadow: inset 0 0 1px 1px #1a2a3a73;z-index: 1;}.img {width: 100%;height: 100%;// background-color: var(--mainColor);pointer-events: none;}}.bar {height: 70px;background: #efefef;display: flex;justify-content: space-evenly;align-items: center;.target {width: 40px;height: 40px;// border: 1px solid #eeeeee33;box-shadow: 0 0 6px 1px #2e262657;border-radius: 50%;background-image: url(@transpartBG);overflow: hidden;.target-inner {background-color: var(--main);width: 100%;height: 100%;}}.bar-inner-right {width: 170px;justify-self: flex-end;align-self: stretch;display: flex;flex-direction: column;justify-content: space-evenly;.control-bar {position: relative;height: 15px;width: 100%;border-radius: 4px;&.color-bar {background-image: linear-gradient(to right,#ff0000,#ff3300,#ff6600,#ff9900,#ffcc00,#ffff00,#ccff00,#99ff00,#66ff00,#33ff00,#00ff00,#00ff33,#00ff66,#00ff99,#00ffcc,#00ffff,#00ccff,#0099ff,#0066ff,#0033ff,#0000ff,#3300ff,#6600ff,#9900ff,#cc00ff,#ff00ff,#ff00cc,#ff0099,#ff0066,#ff0033);}&.opacity-bar {background: url(@transpartBG);.opacity-inner-bar {pointer-events: none;width: 100%;height: 100%;border-radius: 4px;}.ball {right: -8px;}}.ball {position: absolute;top: -1px;width: 17px;height: 17px;background-color: #f8f8f8;border-radius: 50%;opacity: 0.9;pointer-events: none;cursor: pointer;box-shadow: inset 0 0 1px 1px #1a2a3a73;}}}}
}
.sample {display: inline-flex;background: #fff;.block {width: 90px;height: 50px;border: 1px solid;margin: 6px;}
}
.hex-codes {display: flex;width: 14px * 18;flex-wrap: wrap;.inner {width: 14px;height: 14px;border-right: 1px solid;border-bottom: 1px solid;box-sizing: border-box;cursor: pointer;position: relative;transition: 200ms transform;&:hover {box-shadow: inset 0px 0px 2px 1px #000000b0;transform: scale(1.3);z-index: 1;&:after {content: attr(color);display: inline-block;position: absolute;background-color: #1a2a3a;padding: 6px;border-radius: 8px;z-index: 1;color: #fff;font-size: 12px;transform: translate(-50%);bottom: calc(100% + 5px);left: 50%;}}}
}
</style>使用方法。
import wTheme from './components/w-theme.vue';<w-theme class="theme" color="#3F51B5FF" />基于vue3 实现页面自动配色、颜色选择器组件相关推荐
- Vue - 高效稳定的颜色选择器组件（支持鼠标拖动选择与手动输入16进制、rgb颜色值）
前言 在 Vue.js 项目中,很可能需要用到颜色选择器. 本文带您从 0-1 完成颜色选择器组件的引入及使用, 代码干净整洁,提供多个示例,复制改造一下就能用:
- 基于opencv做一个HSV的颜色选择器
From sztu 自动化专业的小菜鸡. 本篇将介绍计算机视觉的HSV颜色选择器,基于python的opencv. 众所周知,每个物体的HSV值都是不同的,并且每个色系所在的HSV的颜色范围也都不同, ...
- Vue 颜色选择器组件
颜色选择器插件:http://xiaokaike.github.io/vue-color/
- 基于vue3 + ts 开发的数字翻牌器组件
写了两个组件,一个是DigitalFlop.vue,一个是DigitalItem.vue DigitalFlop.vue 的代码如下: <template><div class=&q ...
- 11个JavaScript颜色选择器插件
1. ExColor ExColor是一个类似Photoshop样式的jQuery颜色拾取插件,其定制性非常高,通过参数设置可生成各种样式和效果的颜色拾取器.它可以附加到任意的input输入框,通过简 ...
- 使用颜色选择器Flexi .colorPicker教程/简介
之前做的项目中使用了颜色标签,现在将其使用流程简单的做个整理. 1.搜索颜色选择器插件 2. 下载插件 3. 引入到webRoot下的插件包 4.新增页面引入flexi颜色选择器(引入js文件) 5. ...
- iOS 颜色选择器（比较两种）
一种:iOS 颜色选择器:HRColorPicker https://github.com/hayashi311/Color-Picker-for-iOS/ 封装后对外属性: colorInfoVi ...
- gui-gio：颜色选择器的demo4
使用go-gio库示例颜色选择器的详解 包含的组件和功能 1.颜色选择器组件的显示和功能 2.颜色单选框组件的显示和功能 3.填充形状.矩形的填充可以伸缩的 package mainimport (& ...
- Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本（登录注册页面，验证码）
基于 Vue3.x + Vant UI 的多功能记账本(四) 文章目录 基于 Vue3.x + Vant UI 的多功能记账本(四) 项目演示 1.登录注册页面 2.图片验证码 3.修改 axios ...
- 【PC工具】大神开源项目-配色调色工具Colorpicker颜色选择器
微信关注 "DLGG创客DIY" 设为"星标",重磅干货,第一时间送达. 今天看到一个不错的开源的大神的作品,Colorpicker颜色选择器,和大家分享一下. ...
最新文章
- C语言 一维数组 练习
- Python强大的格式化format
- 【数据结构与算法】之深入解析“打家劫舍II”的求解思路与算法示例
- UDT源码剖析（五）：UDT::cleanup()过程代码注释
- 备战双 11！蚂蚁金服万级规模 K8s 集群管理系统如何设计？
- 源代码加密-防泄密解决方案-SDC沙盒
- 计算机实训大纲,计算机专业实训大纲
- 1002. 三角形 (
- 浙江大学计算机科学与技术博士培养研究方向,浙江大学博士研究生培养方案
- SQL列转行问题（踩雷）
- (5)Spring框架----Bean作用域
- android官方原生主题,原生Android可以更换系统主题吗？
- cocos2dx 通用性能优化方案
- 怎么更改Visual Studio项目名字
- STM32F4+FreeRTOS+FreeRTosTcpIp移植教程
- centos7 crontab未执行问题排查
- 对化石用计算机模拟修补,浅谈化石的修复和清理（下）
- linux定时运行命令
- PowerBI中的函数日期表
- Linux基础命令学习——方法二（给swap分区增加500M）