mirror of https://gitee.com/xiaonuobase/snowy
【调整】调整ColorPicker注释风格
parent
f7b2349e32
commit
aad7cafe03
|
@ -10,20 +10,16 @@
|
||||||
import tool from '@/utils/tool'
|
import tool from '@/utils/tool'
|
||||||
|
|
||||||
const emit = defineEmits(['update:value'])
|
const emit = defineEmits(['update:value'])
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
value: {
|
value: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '#1677FF'
|
default: '#1677FF'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const id = tool.snowyUuid()
|
const id = tool.snowyUuid()
|
||||||
|
|
||||||
const forceResize = () => {
|
const forceResize = () => {
|
||||||
window.dispatchEvent(new Event('resize'))
|
window.dispatchEvent(new Event('resize'))
|
||||||
}
|
}
|
||||||
|
|
||||||
const update = (val) => {
|
const update = (val) => {
|
||||||
showTxt(val)
|
showTxt(val)
|
||||||
emit('update:value', val)
|
emit('update:value', val)
|
||||||
|
@ -37,18 +33,12 @@
|
||||||
if (currentColor) {
|
if (currentColor) {
|
||||||
currentColor.textContent = val
|
currentColor.textContent = val
|
||||||
}
|
}
|
||||||
|
|
||||||
// 改变文字颜色
|
// 改变文字颜色
|
||||||
currentColor.style.color = changeTextColor(currentColor.style.backgroundColor)
|
currentColor.style.color = changeTextColor(currentColor.style.backgroundColor)
|
||||||
}
|
}
|
||||||
|
// 改变文字颜色 backgroundColor背景色
|
||||||
/**
|
|
||||||
* 改变文字颜色
|
|
||||||
* @param backgroundColor 背景色
|
|
||||||
*/
|
|
||||||
const changeTextColor = (backgroundColor) => {
|
const changeTextColor = (backgroundColor) => {
|
||||||
const backgroundHexColor = backgroundColor.length > 7 ? convertRGBToHex(backgroundColor) : backgroundColor
|
const backgroundHexColor = backgroundColor.length > 7 ? convertRGBToHex(backgroundColor) : backgroundColor
|
||||||
|
|
||||||
let hex = backgroundHexColor
|
let hex = backgroundHexColor
|
||||||
// 如果当前传入的参数以 # 开头,去除当前的
|
// 如果当前传入的参数以 # 开头,去除当前的
|
||||||
if (hex.startsWith('#')) {
|
if (hex.startsWith('#')) {
|
||||||
|
@ -61,22 +51,16 @@
|
||||||
if (hex.length !== 6) {
|
if (hex.length !== 6) {
|
||||||
throw new Error('Invalid background color.' + backgroundHexColor)
|
throw new Error('Invalid background color.' + backgroundHexColor)
|
||||||
}
|
}
|
||||||
|
|
||||||
const r = parseInt(hex.slice(0, 2), 16)
|
const r = parseInt(hex.slice(0, 2), 16)
|
||||||
const g = parseInt(hex.slice(2, 4), 16)
|
const g = parseInt(hex.slice(2, 4), 16)
|
||||||
const b = parseInt(hex.slice(4, 6), 16)
|
const b = parseInt(hex.slice(4, 6), 16)
|
||||||
|
|
||||||
if ([r, g, b].some((x) => Number.isNaN(x))) {
|
if ([r, g, b].some((x) => Number.isNaN(x))) {
|
||||||
throw new Error('Invalid background color.' + backgroundHexColor)
|
throw new Error('Invalid background color.' + backgroundHexColor)
|
||||||
}
|
}
|
||||||
|
|
||||||
return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? '#000' : '#fff'
|
return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? '#000' : '#fff'
|
||||||
}
|
}
|
||||||
const toHex = (x) => ('0' + parseInt(x).toString(16)).slice(-2)
|
const toHex = (x) => ('0' + parseInt(x).toString(16)).slice(-2)
|
||||||
/**
|
// RGB 转换为 HEX
|
||||||
* RGB 转换为 HEX
|
|
||||||
* @param rgb RGB 颜色
|
|
||||||
*/
|
|
||||||
const convertRGBToHex = (rgb) => {
|
const convertRGBToHex = (rgb) => {
|
||||||
const bg = rgb.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/)
|
const bg = rgb.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/)
|
||||||
// 返回空字符串,在后面判断长度为 6 时候会报错。不在此处进行操作
|
// 返回空字符串,在后面判断长度为 6 时候会报错。不在此处进行操作
|
||||||
|
@ -90,11 +74,9 @@
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.snowy-color-picker {
|
.snowy-color-picker {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.vc-color-wrap {
|
.vc-color-wrap {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.current-color {
|
.current-color {
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue