github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

[ColorPicker ]:Fixed colorFormat responsive issues

pull/22489/head
yang 2023-04-14 19:04:20 +08:00
parent f14b5ba540
commit d022fca465
1 changed files with 155 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
packages/color-picker/src/main.vue
View File

@ -1,31 +1,21 @@
<template> <template>
<div <div :class="[
:class="[
'el-color-picker', 'el-color-picker',
colorDisabled ? 'is-disabled' : '', colorDisabled ? 'is-disabled' : '',
colorSize ? `el-color-picker--${colorSize}` : '' colorSize ? `el-color-picker--${colorSize}` : ''
]" ]" v-clickoutside="hide">
v-clickoutside="hide">
<div class="el-color-picker__mask" v-if="colorDisabled"></div> <div class="el-color-picker__mask" v-if="colorDisabled"></div>
<div class="el-color-picker__trigger" @click="handleTrigger"> <div class="el-color-picker__trigger" @click="handleTrigger">
<span class="el-color-picker__color" :class="{ 'is-alpha': showAlpha }"> <span class="el-color-picker__color" :class="{ 'is-alpha': showAlpha }">
<span class="el-color-picker__color-inner" <span class="el-color-picker__color-inner" :style="{
:style="{
backgroundColor: displayedColor backgroundColor: displayedColor
}"></span> }"></span>
<span class="el-color-picker__empty el-icon-close" v-if="!value && !showPanelColor"></span> <span class="el-color-picker__empty el-icon-close" v-if="!value && !showPanelColor"></span>
</span> </span>
<span class="el-color-picker__icon el-icon-arrow-down" v-show="value || showPanelColor"></span> <span class="el-color-picker__icon el-icon-arrow-down" v-show="value || showPanelColor"></span>
</div> </div>
<picker-dropdown <picker-dropdown ref="dropdown" :class="['el-color-picker__panel', popperClass || '']" v-model="showPicker"
ref="dropdown" @pick="confirmValue" @clear="clearValue" :color="color" :show-alpha="showAlpha" :predefine="predefine">
:class="['el-color-picker__panel', popperClass || '']"
v-model="showPicker"
@pick="confirmValue"
@clear="clearValue"
:color="color"
:show-alpha="showAlpha"
:predefine="predefine">
</picker-dropdown> </picker-dropdown>
</div> </div>
</template> </template>
@ -98,6 +88,12 @@
this.showPanelColor = true; this.showPanelColor = true;
} }
}, },
colorFormat: {
deep: true,
handler() {
this.color = this.createColor();
}
},
displayedColor(val) { displayedColor(val) {
if (!this.showPicker) return; if (!this.showPicker) return;
const currentValueColor = new Color({ const currentValueColor = new Color({
@ -114,6 +110,12 @@
}, },
methods: { methods: {
createColor() {
return new Color({
enableAlpha: this.showAlpha,
format: this.colorFormat
});
},
handleTrigger() { handleTrigger() {
if (this.colorDisabled) return; if (this.colorDisabled) return;
this.showPicker = !this.showPicker; this.showPicker = !this.showPicker;
@ -162,6 +164,7 @@
mounted() { mounted() {
const value = this.value; const value = this.value;
// this.color = this.createColor();
if (value) { if (value) {
this.color.fromString(value); this.color.fromString(value);
} }
@ -169,13 +172,13 @@
}, },
data() { data() {
const color = new Color({ // const color = new Color({
enableAlpha: this.showAlpha, // enableAlpha: this.showAlpha,
format: this.colorFormat // format: this.colorFormat
}); // });
return { return {
color, color: this.createColor(),
showPicker: false, showPicker: false,
showPanelColor: false showPanelColor: false
}; };