1 | <template>
|
2 | <transition name="el-zoom-in-top" @after-leave="doDestroy">
|
3 | <div
|
4 | class="el-color-dropdown"
|
5 | v-show="showPopper">
|
6 | <div class="el-color-dropdown__main-wrapper">
|
7 | <hue-slider ref="hue" :color="color" vertical style="float: right;"></hue-slider>
|
8 | <sv-panel ref="sl" :color="color"></sv-panel>
|
9 | </div>
|
10 | <alpha-slider v-if="showAlpha" ref="alpha" :color="color"></alpha-slider>
|
11 | <predefine v-if="predefine" :color="color" :colors="predefine"></predefine>
|
12 | <div class="el-color-dropdown__btns">
|
13 | <span class="el-color-dropdown__value">
|
14 | <el-input
|
15 | v-model="customInput"
|
16 | @keyup.native.enter="handleConfirm"
|
17 | @blur="handleConfirm"
|
18 | :validate-event="false"
|
19 | size="mini">
|
20 | </el-input>
|
21 | </span>
|
22 | <el-button
|
23 | size="mini"
|
24 | type="text"
|
25 | class="el-color-dropdown__link-btn"
|
26 | @click="$emit('clear')">
|
27 | {{ t('el.colorpicker.clear') }}
|
28 | </el-button>
|
29 | <el-button
|
30 | plain
|
31 | size="mini"
|
32 | class="el-color-dropdown__btn"
|
33 | @click="confirmValue">
|
34 | {{ t('el.colorpicker.confirm') }}
|
35 | </el-button>
|
36 | </div>
|
37 | </div>
|
38 | </transition>
|
39 | </template>
|
40 |
|
41 | <script>
|
42 | import SvPanel from './sv-panel';
|
43 | import HueSlider from './hue-slider';
|
44 | import AlphaSlider from './alpha-slider';
|
45 | import Predefine from './predefine';
|
46 | import Popper from 'element-ui/src/utils/vue-popper';
|
47 | import Locale from 'element-ui/src/mixins/locale';
|
48 | import ElInput from 'element-ui/packages/input';
|
49 | import ElButton from 'element-ui/packages/button';
|
50 |
|
51 | export default {
|
52 | name: 'el-color-picker-dropdown',
|
53 |
|
54 | mixins: [Popper, Locale],
|
55 |
|
56 | components: {
|
57 | SvPanel,
|
58 | HueSlider,
|
59 | AlphaSlider,
|
60 | ElInput,
|
61 | ElButton,
|
62 | Predefine
|
63 | },
|
64 |
|
65 | props: {
|
66 | color: {
|
67 | required: true
|
68 | },
|
69 | showAlpha: Boolean,
|
70 | predefine: Array
|
71 | },
|
72 |
|
73 | data() {
|
74 | return {
|
75 | customInput: ''
|
76 | };
|
77 | },
|
78 |
|
79 | computed: {
|
80 | currentColor() {
|
81 | const parent = this.$parent;
|
82 | return !parent.value && !parent.showPanelColor ? '' : parent.color.value;
|
83 | }
|
84 | },
|
85 |
|
86 | methods: {
|
87 | confirmValue() {
|
88 | this.$emit('pick');
|
89 | },
|
90 |
|
91 | handleConfirm() {
|
92 | this.color.fromString(this.customInput);
|
93 | }
|
94 | },
|
95 |
|
96 | mounted() {
|
97 | this.$parent.popperElm = this.popperElm = this.$el;
|
98 | this.referenceElm = this.$parent.$el;
|
99 | },
|
100 |
|
101 | watch: {
|
102 | showPopper(val) {
|
103 | if (val === true) {
|
104 | this.$nextTick(() => {
|
105 | const { sl, hue, alpha } = this.$refs;
|
106 | sl && sl.update();
|
107 | hue && hue.update();
|
108 | alpha && alpha.update();
|
109 | });
|
110 | }
|
111 | },
|
112 |
|
113 | currentColor: {
|
114 | immediate: true,
|
115 | handler(val) {
|
116 | this.customInput = val;
|
117 | }
|
118 | }
|
119 | }
|
120 | };
|
121 | </script>
|