fix: 取色器 Hue 初始化异常,应用预置颜色 Hue 不更新

This commit is contained in:
pipipi-pikachu 2021-05-27 22:54:03 +08:00
parent 7a0e01d40a
commit 243e605f10
3 changed files with 13 additions and 7 deletions

View File

@ -37,7 +37,7 @@ export default defineComponent({
const color = computed(() => {
const hsla = tinycolor(props.value).toHsl()
if (props.hue) hsla.h = props.hue
if (props.hue !== -1) hsla.h = props.hue
return hsla
})
@ -70,7 +70,7 @@ export default defineComponent({
percent = left * 100 / containerWidth
h = 360 * percent / 100
}
if (color.value.h !== h) {
if (props.hue === -1 || color.value.h !== h) {
emit('colorChange', {
h,
l: color.value.l,

View File

@ -39,7 +39,7 @@ export default defineComponent({
setup(props, { emit }) {
const color = computed(() => {
const hsva = tinycolor(props.value).toHsv()
if (props.hue) hsva.h = props.hue
if (props.hue !== -1) hsva.h = props.hue
return hsva
})

View File

@ -140,7 +140,7 @@ export default defineComponent({
},
},
setup(props, { emit }) {
const hue = ref(0)
const hue = ref(-1)
const recentColors = ref<string[]>([])
const color = computed({
@ -162,6 +162,7 @@ export default defineComponent({
})
const selectPresetColor = (colorString: string) => {
hue.value = tinycolor(colorString).toHsl().h
emit('update:modelValue', colorString)
}
@ -189,9 +190,14 @@ export default defineComponent({
})
const changeColor = (value: ColorFormats.RGBA | ColorFormats.HSLA | ColorFormats.HSVA) => {
if ('h' in value && 'l' in value) hue.value = value.h
if ('h' in value) color.value = tinycolor(value).toRgb()
else color.value = value
if ('h' in value) {
hue.value = value.h
color.value = tinycolor(value).toRgb()
}
else {
hue.value = tinycolor(value).toHsl().h
color.value = value
}
updateRecentColorsCache()
}