update ColorPicker
This commit is contained in:
梁灏
parent
8105945f4f
commit
4109bbc6c1
3 changed files with 85 additions and 48 deletions
|
|
@ -2,13 +2,13 @@
|
|||
<div style="margin: 100px;">
|
||||
{{ color }}
|
||||
<!--<Input placeholder="请输入..." size="large" style="width: 50px;"></Input>-->
|
||||
<!--<color-picker placement="bottom-start" size="large"></color-picker>-->
|
||||
<Date-picker transfer type="date" placeholder="选择日期" size="large" style="width: 200px"></Date-picker>
|
||||
<color-picker v-model="color" placement="bottom-start" size="large"></color-picker>
|
||||
<Date-picker transfer type="date" placeholder="选择日期" style="width: 200px"></Date-picker>
|
||||
<color-picker :transfer="true" ref="xxx" v-model="color" format="rgb" alpha :recommend="true"></color-picker>
|
||||
<color-picker v-model="color2" :alpha="false" :recommend="false"></color-picker>
|
||||
<color-picker v-model="color2" format="hsv" :alpha="true" :recommend="false"></color-picker>
|
||||
<!--<Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>-->
|
||||
<!--<color-picker placement="bottom-start" size="small"></color-picker>-->
|
||||
<!--<Date-picker type="date" placeholder="选择日期" size="small" style="width: 200px"></Date-picker>-->
|
||||
<color-picker v-model="color" placement="bottom-start" size="small"></color-picker>
|
||||
<Date-picker type="date" placeholder="选择日期" size="small" style="width: 200px"></Date-picker>
|
||||
<Button @click="setColor">set color</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
props: {},
|
||||
data () {
|
||||
return {
|
||||
color: 'rgba(255,255,255,.85)',
|
||||
color: 'rgba(12,34,255,.85)',
|
||||
color2: ''
|
||||
};
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,17 +1,26 @@
|
|||
<template>
|
||||
<Dropdown :class="classes" class-name="ivu-transfer-" ref="picker" trigger="click" :transfer="transfer" :placement="placement" @on-visible-change="handleToggleVisible">
|
||||
<div :class="wrapClasses">
|
||||
<div :class="classes" v-clickoutside="handleClose">
|
||||
<div ref="reference" @click="toggleVisible" :class="wrapClasses">
|
||||
<i class="ivu-icon ivu-icon-arrow-down-b ivu-input-icon ivu-input-icon-normal"></i>
|
||||
<div :class="inputClasses">
|
||||
<div :class="[prefixCls + '-color']">
|
||||
<div :class="[prefixCls + '-color-empty']" v-show="value === '' && !visible">
|
||||
<Icon type="ios-close-empty"></Icon>
|
||||
<i class="ivu-icon ivu-icon-ios-close-empty"></i>
|
||||
</div>
|
||||
<div v-show="value || visible" :style="{backgroundColor: displayedColor}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Dropdown-menu slot="list">
|
||||
<transition :name="transition">
|
||||
<Drop
|
||||
v-show="visible"
|
||||
@click.native="handleTransferClick"
|
||||
:class="{ [prefixCls + '-transfer']: transfer }"
|
||||
class-name="ivu-transfer-no-max-height"
|
||||
:placement="placement"
|
||||
ref="drop"
|
||||
:data-transfer="transfer"
|
||||
v-transfer-dom>
|
||||
<div :class="[prefixCls + '-picker']">
|
||||
<div :class="[prefixCls + '-picker-wrapper']">
|
||||
<div :class="[prefixCls + '-picker-panel']">
|
||||
|
|
@ -39,18 +48,19 @@
|
|||
<Confirm @on-pick-success="handleSuccess" @on-pick-clear="handleClear"></Confirm>
|
||||
</div>
|
||||
</div>
|
||||
</Dropdown-menu>
|
||||
</Dropdown>
|
||||
</Drop>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import tinycolor from 'tinycolor2';
|
||||
|
||||
import Icon from '../icon/icon.vue';
|
||||
import Dropdown from '../dropdown/dropdown.vue';
|
||||
import DropdownMenu from '../dropdown/dropdown-menu.vue';
|
||||
import clickoutside from '../../directives/clickoutside';
|
||||
import TransferDom from '../../directives/transfer-dom';
|
||||
|
||||
import Drop from '../../components/select/dropdown.vue';
|
||||
import RecommendColors from './recommend-colors.vue';
|
||||
import Confirm from '../date-picker/base/confirm.vue';
|
||||
|
||||
import Saturation from './saturation.vue';
|
||||
import Hue from './hue.vue';
|
||||
import Alpha from './alpha.vue';
|
||||
|
|
@ -111,7 +121,8 @@
|
|||
|
||||
export default {
|
||||
name: 'ColorPicker',
|
||||
components: { Icon, Dropdown, DropdownMenu, Confirm, RecommendColors, Saturation, Hue, Alpha },
|
||||
components: { Drop, Confirm, RecommendColors, Saturation, Hue, Alpha },
|
||||
directives: { clickoutside, TransferDom },
|
||||
props: {
|
||||
value: {
|
||||
type: String
|
||||
|
|
@ -142,7 +153,8 @@
|
|||
size: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['small', 'large', 'default']);
|
||||
}
|
||||
},
|
||||
default: 'default'
|
||||
},
|
||||
placement: {
|
||||
validator (value) {
|
||||
|
|
@ -160,6 +172,7 @@
|
|||
val: _colorChange(this.value),
|
||||
prefixCls: prefixCls,
|
||||
visible: false,
|
||||
disableCloseUnderTransfer: false, // transfer 模式下，点击Drop也会触发关闭
|
||||
recommendedColor: [
|
||||
'#2d8cf0',
|
||||
'#19be6b',
|
||||
|
|
@ -189,6 +202,13 @@
|
|||
};
|
||||
},
|
||||
computed: {
|
||||
transition () {
|
||||
if (this.placement === 'bottom-start' || this.placement === 'bottom' || this.placement === 'bottom-end') {
|
||||
return 'slide-up';
|
||||
} else {
|
||||
return 'fade';
|
||||
}
|
||||
},
|
||||
saturationColors: {
|
||||
get () {
|
||||
return this.val;
|
||||
|
|
@ -266,11 +286,30 @@
|
|||
value (newVal) {
|
||||
this.val = _colorChange(newVal);
|
||||
},
|
||||
visible () {
|
||||
visible (val) {
|
||||
this.val = _colorChange(this.value);
|
||||
if (val) {
|
||||
this.$refs.drop.update();
|
||||
} else {
|
||||
this.$refs.drop.destroy();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 开启 transfer 时，点击 Drop 即会关闭，这里不让其关闭
|
||||
handleTransferClick () {
|
||||
if (this.transfer) this.disableCloseUnderTransfer = true;
|
||||
},
|
||||
handleClose () {
|
||||
if (this.disableCloseUnderTransfer) {
|
||||
this.disableCloseUnderTransfer = false;
|
||||
return false;
|
||||
}
|
||||
this.visible = false;
|
||||
},
|
||||
toggleVisible () {
|
||||
this.visible = !this.visible;
|
||||
},
|
||||
childChange (data) {
|
||||
this.colorChange(data);
|
||||
},
|
||||
|
|
@ -300,18 +339,15 @@
|
|||
return data;
|
||||
}
|
||||
},
|
||||
handleToggleVisible (visible) {
|
||||
this.visible = visible;
|
||||
},
|
||||
handleSuccess () {
|
||||
const color = this.formatColor;
|
||||
this.$emit('input', color);
|
||||
this.$emit('on-change', color);
|
||||
this.$refs.picker.handleClose();
|
||||
this.handleClose();
|
||||
},
|
||||
handleClear () {
|
||||
this.$emit('input', '');
|
||||
this.$refs.picker.handleClose();
|
||||
this.handleClose();
|
||||
},
|
||||
handleSelectColor (color) {
|
||||
this.val = _colorChange(color);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
@color-picker-prefix-cls: ~"@{css-prefix}color-picker";
|
||||
|
||||
.@{color-picker-prefix-cls} {
|
||||
display: inline-block;
|
||||
& .@{select-dropdown-prefix-cls} {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue