<template>
|
<transition name="el-zoom-in-top" @after-leave="doDestroy">
|
<div
|
class="el-color-dropdown"
|
v-show="showPopper">
|
<div class="el-color-dropdown__main-wrapper">
|
<hue-slider ref="hue" :color="color" vertical style="float: right;"></hue-slider>
|
<sv-panel ref="sl" :color="color"></sv-panel>
|
</div>
|
<alpha-slider v-if="showAlpha" ref="alpha" :color="color"></alpha-slider>
|
<predefine v-if="predefine" :color="color" :colors="predefine"></predefine>
|
<div class="el-color-dropdown__btns">
|
<span class="el-color-dropdown__value">
|
<el-input
|
v-model="customInput"
|
@keyup.native.enter="handleConfirm"
|
@blur="handleConfirm"
|
:validate-event="false"
|
size="mini">
|
</el-input>
|
</span>
|
<el-button
|
size="mini"
|
type="text"
|
class="el-color-dropdown__link-btn"
|
@click="$emit('clear')">
|
{{ t('el.colorpicker.clear') }}
|
</el-button>
|
<el-button
|
plain
|
size="mini"
|
class="el-color-dropdown__btn"
|
@click="confirmValue">
|
{{ t('el.colorpicker.confirm') }}
|
</el-button>
|
</div>
|
</div>
|
</transition>
|
</template>
|
|
<script>
|
import SvPanel from './sv-panel';
|
import HueSlider from './hue-slider';
|
import AlphaSlider from './alpha-slider';
|
import Predefine from './predefine';
|
import Popper from 'element-ui/src/utils/vue-popper';
|
import Locale from 'element-ui/src/mixins/locale';
|
import ElInput from 'element-ui/packages/input';
|
import ElButton from 'element-ui/packages/button';
|
|
export default {
|
name: 'el-color-picker-dropdown',
|
|
mixins: [Popper, Locale],
|
|
components: {
|
SvPanel,
|
HueSlider,
|
AlphaSlider,
|
ElInput,
|
ElButton,
|
Predefine
|
},
|
|
props: {
|
color: {
|
required: true
|
},
|
showAlpha: Boolean,
|
predefine: Array
|
},
|
|
data() {
|
return {
|
customInput: ''
|
};
|
},
|
|
computed: {
|
currentColor() {
|
const parent = this.$parent;
|
return !parent.value && !parent.showPanelColor ? '' : parent.color.value;
|
}
|
},
|
|
methods: {
|
confirmValue() {
|
this.$emit('pick');
|
},
|
|
handleConfirm() {
|
this.color.fromString(this.customInput);
|
}
|
},
|
|
mounted() {
|
this.$parent.popperElm = this.popperElm = this.$el;
|
this.referenceElm = this.$parent.$el;
|
},
|
|
watch: {
|
showPopper(val) {
|
if (val === true) {
|
this.$nextTick(() => {
|
const { sl, hue, alpha } = this.$refs;
|
sl && sl.update();
|
hue && hue.update();
|
alpha && alpha.update();
|
});
|
}
|
},
|
|
currentColor: {
|
immediate: true,
|
handler(val) {
|
this.customInput = val;
|
}
|
}
|
}
|
};
|
</script>
|
