chenhaodong / mew-iview

Commit 4109bbc6c1ba17b8f0ebbe8a7a8c78852fd9a1b9

Authored by 梁灏
1 parent 8105945f

update ColorPicker

Showing 3 changed files with 85 additions and 48 deletions   Show diff stats
Inline Side-by-side
examples/routers/color-picker.vue
  Show/Hide comments   View file @4109bbc
... ... @@ -2,13 +2,13 @@
2 2 <div style="margin: 100px;">
3 3 {{ color }}
4 4 <!--<Input placeholder="请输入..." size="large" style="width: 50px;"></Input>-->
5   - <!--<color-picker placement="bottom-start" size="large"></color-picker>-->
6   - <Date-picker transfer type="date" placeholder="选择日期" size="large" style="width: 200px"></Date-picker>
  5 + <color-picker v-model="color" placement="bottom-start" size="large"></color-picker>
  6 + <Date-picker transfer type="date" placeholder="选择日期" style="width: 200px"></Date-picker>
7 7 <color-picker :transfer="true" ref="xxx" v-model="color" format="rgb" alpha :recommend="true"></color-picker>
8   - <color-picker v-model="color2" :alpha="false" :recommend="false"></color-picker>
  8 + <color-picker v-model="color2" format="hsv" :alpha="true" :recommend="false"></color-picker>
9 9 <!--<Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>-->
10   - <!--<color-picker placement="bottom-start" size="small"></color-picker>-->
11   - <!--<Date-picker type="date" placeholder="选择日期" size="small" style="width: 200px"></Date-picker>-->
  10 + <color-picker v-model="color" placement="bottom-start" size="small"></color-picker>
  11 + <Date-picker type="date" placeholder="选择日期" size="small" style="width: 200px"></Date-picker>
12 12 <Button @click="setColor">set color</Button>
13 13 </div>
14 14 </template>
... ... @@ -17,7 +17,7 @@
17 17 props: {},
18 18 data () {
19 19 return {
20   - color: 'rgba(255,255,255,.85)',
  20 + color: 'rgba(12,34,255,.85)',
21 21 color2: ''
22 22 };
23 23 },
... ...
src/components/color-picker/color-picker.vue
  Show/Hide comments   View file @4109bbc
1 1 <template>
2   - <Dropdown :class="classes" class-name="ivu-transfer-" ref="picker" trigger="click" :transfer="transfer" :placement="placement" @on-visible-change="handleToggleVisible">
3   - <div :class="wrapClasses">
  2 + <div :class="classes" v-clickoutside="handleClose">
  3 + <div ref="reference" @click="toggleVisible" :class="wrapClasses">
4 4 <i class="ivu-icon ivu-icon-arrow-down-b ivu-input-icon ivu-input-icon-normal"></i>
5 5 <div :class="inputClasses">
6 6 <div :class="[prefixCls + '-color']">
7 7 <div :class="[prefixCls + '-color-empty']" v-show="value === '' && !visible">
8   - <Icon type="ios-close-empty"></Icon>
  8 + <i class="ivu-icon ivu-icon-ios-close-empty"></i>
9 9 </div>
10 10 <div v-show="value || visible" :style="{backgroundColor: displayedColor}"></div>
11 11 </div>
12 12 </div>
13 13 </div>
14   - <Dropdown-menu slot="list">
15   - <div :class="[prefixCls + '-picker']">
16   - <div :class="[prefixCls + '-picker-wrapper']">
17   - <div :class="[prefixCls + '-picker-panel']">
18   - <Saturation v-model="saturationColors" @change="childChange"></Saturation>
  14 + <transition :name="transition">
  15 + <Drop
  16 + v-show="visible"
  17 + @click.native="handleTransferClick"
  18 + :class="{ [prefixCls + '-transfer']: transfer }"
  19 + class-name="ivu-transfer-no-max-height"
  20 + :placement="placement"
  21 + ref="drop"
  22 + :data-transfer="transfer"
  23 + v-transfer-dom>
  24 + <div :class="[prefixCls + '-picker']">
  25 + <div :class="[prefixCls + '-picker-wrapper']">
  26 + <div :class="[prefixCls + '-picker-panel']">
  27 + <Saturation v-model="saturationColors" @change="childChange"></Saturation>
  28 + </div>
  29 + <div :class="[prefixCls + '-picker-hue-slider']">
  30 + <Hue v-model="saturationColors" @change="childChange"></Hue>
  31 + </div>
  32 + <div v-if="alpha" :class="[prefixCls + '-picker-alpha-slider']">
  33 + <Alpha v-model="saturationColors" @change="childChange"></Alpha>
  34 + </div>
  35 + <recommend-colors
  36 + v-if="colors.length"
  37 + :list="colors"
  38 + :class="[prefixCls + '-picker-colors']"
  39 + @picker-color="handleSelectColor"></recommend-colors>
  40 + <recommend-colors
  41 + v-if="!colors.length && recommend"
  42 + :list="recommendedColor"
  43 + :class="[prefixCls + '-picker-colors']"
  44 + @picker-color="handleSelectColor"></recommend-colors>
19 45 </div>
20   - <div :class="[prefixCls + '-picker-hue-slider']">
21   - <Hue v-model="saturationColors" @change="childChange"></Hue>
  46 + <div :class="[prefixCls + '-confirm']">
  47 + <span :class="[prefixCls + '-confirm-color']">{{ formatColor }}</span>
  48 + <Confirm @on-pick-success="handleSuccess" @on-pick-clear="handleClear"></Confirm>
22 49 </div>
23   - <div v-if="alpha" :class="[prefixCls + '-picker-alpha-slider']">
24   - <Alpha v-model="saturationColors" @change="childChange"></Alpha>
25   - </div>
26   - <recommend-colors
27   - v-if="colors.length"
28   - :list="colors"
29   - :class="[prefixCls + '-picker-colors']"
30   - @picker-color="handleSelectColor"></recommend-colors>
31   - <recommend-colors
32   - v-if="!colors.length && recommend"
33   - :list="recommendedColor"
34   - :class="[prefixCls + '-picker-colors']"
35   - @picker-color="handleSelectColor"></recommend-colors>
36   - </div>
37   - <div :class="[prefixCls + '-confirm']">
38   - <span :class="[prefixCls + '-confirm-color']">{{ formatColor }}</span>
39   - <Confirm @on-pick-success="handleSuccess" @on-pick-clear="handleClear"></Confirm>
40 50 </div>
41   - </div>
42   - </Dropdown-menu>
43   - </Dropdown>
  51 + </Drop>
  52 + </transition>
  53 + </div>
44 54 </template>
45 55 <script>
46 56 import tinycolor from 'tinycolor2';
47 57  
48   - import Icon from '../icon/icon.vue';
49   - import Dropdown from '../dropdown/dropdown.vue';
50   - import DropdownMenu from '../dropdown/dropdown-menu.vue';
  58 + import clickoutside from '../../directives/clickoutside';
  59 + import TransferDom from '../../directives/transfer-dom';
  60 +
  61 + import Drop from '../../components/select/dropdown.vue';
51 62 import RecommendColors from './recommend-colors.vue';
52 63 import Confirm from '../date-picker/base/confirm.vue';
53   -
54 64 import Saturation from './saturation.vue';
55 65 import Hue from './hue.vue';
56 66 import Alpha from './alpha.vue';
... ... @@ -111,7 +121,8 @@
111 121  
112 122 export default {
113 123 name: 'ColorPicker',
114   - components: { Icon, Dropdown, DropdownMenu, Confirm, RecommendColors, Saturation, Hue, Alpha },
  124 + components: { Drop, Confirm, RecommendColors, Saturation, Hue, Alpha },
  125 + directives: { clickoutside, TransferDom },
115 126 props: {
116 127 value: {
117 128 type: String
... ... @@ -142,7 +153,8 @@
142 153 size: {
143 154 validator (value) {
144 155 return oneOf(value, ['small', 'large', 'default']);
145   - }
  156 + },
  157 + default: 'default'
146 158 },
147 159 placement: {
148 160 validator (value) {
... ... @@ -160,6 +172,7 @@
160 172 val: _colorChange(this.value),
161 173 prefixCls: prefixCls,
162 174 visible: false,
  175 + disableCloseUnderTransfer: false, // transfer 模式下，点击Drop也会触发关闭
163 176 recommendedColor: [
164 177 '#2d8cf0',
165 178 '#19be6b',
... ... @@ -189,6 +202,13 @@
189 202 };
190 203 },
191 204 computed: {
  205 + transition () {
  206 + if (this.placement === 'bottom-start' || this.placement === 'bottom' || this.placement === 'bottom-end') {
  207 + return 'slide-up';
  208 + } else {
  209 + return 'fade';
  210 + }
  211 + },
192 212 saturationColors: {
193 213 get () {
194 214 return this.val;
... ... @@ -266,11 +286,30 @@
266 286 value (newVal) {
267 287 this.val = _colorChange(newVal);
268 288 },
269   - visible () {
  289 + visible (val) {
270 290 this.val = _colorChange(this.value);
  291 + if (val) {
  292 + this.$refs.drop.update();
  293 + } else {
  294 + this.$refs.drop.destroy();
  295 + }
271 296 }
272 297 },
273 298 methods: {
  299 + // 开启 transfer 时，点击 Drop 即会关闭，这里不让其关闭
  300 + handleTransferClick () {
  301 + if (this.transfer) this.disableCloseUnderTransfer = true;
  302 + },
  303 + handleClose () {
  304 + if (this.disableCloseUnderTransfer) {
  305 + this.disableCloseUnderTransfer = false;
  306 + return false;
  307 + }
  308 + this.visible = false;
  309 + },
  310 + toggleVisible () {
  311 + this.visible = !this.visible;
  312 + },
274 313 childChange (data) {
275 314 this.colorChange(data);
276 315 },
... ... @@ -300,18 +339,15 @@
300 339 return data;
301 340 }
302 341 },
303   - handleToggleVisible (visible) {
304   - this.visible = visible;
305   - },
306 342 handleSuccess () {
307 343 const color = this.formatColor;
308 344 this.$emit('input', color);
309 345 this.$emit('on-change', color);
310   - this.$refs.picker.handleClose();
  346 + this.handleClose();
311 347 },
312 348 handleClear () {
313 349 this.$emit('input', '');
314   - this.$refs.picker.handleClose();
  350 + this.handleClose();
315 351 },
316 352 handleSelectColor (color) {
317 353 this.val = _colorChange(color);
... ...
src/styles/components/color-picker.less
  Show/Hide comments   View file @4109bbc
1 1 @color-picker-prefix-cls: ~"@{css-prefix}color-picker";
2 2  
3 3 .@{color-picker-prefix-cls} {
  4 + display: inline-block;
4 5 & .@{select-dropdown-prefix-cls} {
5 6 padding: 0;
6 7 }
... ...