drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update ColorPicker

Browse source
This commit is contained in:
梁灏 2017-08-18 17:33:19 +08:00
parent 8105945f4f
commit 4109bbc6c1
3 changed files with 85 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
examples/routers/color-picker.vue
View file

@ -2,13 +2,13 @@
<div style="margin: 100px;"> <div style="margin: 100px;">
{{ color }} {{ color }}
<!--<Input placeholder="请输入..." size="large" style="width: 50px;"></Input>--> <!--<Input placeholder="请输入..." size="large" style="width: 50px;"></Input>-->
<!--<color-picker placement="bottom-start" size="large"></color-picker>--> <color-picker v-model="color" placement="bottom-start" size="large"></color-picker>
<Date-picker transfer type="date" placeholder="选择日期" size="large" style="width: 200px"></Date-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 :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>--> <!--<Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>-->
<!--<color-picker placement="bottom-start" size="small"></color-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>--> <Date-picker type="date" placeholder="选择日期" size="small" style="width: 200px"></Date-picker>
<Button @click="setColor">set color</Button> <Button @click="setColor">set color</Button>
</div> </div>
</template> </template>
@ -17,7 +17,7 @@
props: {}, props: {},
data () { data () {
return { return {
color: 'rgba(255,255,255,.85)', color: 'rgba(12,34,255,.85)',
color2: '' color2: ''
}; };
}, },

72
src/components/color-picker/color-picker.vue
View file

@ -1,17 +1,26 @@
<template> <template>
<Dropdown :class="classes" class-name="ivu-transfer-" ref="picker" trigger="click" :transfer="transfer" :placement="placement" @on-visible-change="handleToggleVisible"> <div :class="classes" v-clickoutside="handleClose">
<div :class="wrapClasses"> <div ref="reference" @click="toggleVisible" :class="wrapClasses">
<i class="ivu-icon ivu-icon-arrow-down-b ivu-input-icon ivu-input-icon-normal"></i> <i class="ivu-icon ivu-icon-arrow-down-b ivu-input-icon ivu-input-icon-normal"></i>
<div :class="inputClasses"> <div :class="inputClasses">
<div :class="[prefixCls + '-color']"> <div :class="[prefixCls + '-color']">
<div :class="[prefixCls + '-color-empty']" v-show="value === '' && !visible"> <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>
<div v-show="value || visible" :style="{backgroundColor: displayedColor}"></div> <div v-show="value || visible" :style="{backgroundColor: displayedColor}"></div>
</div> </div>
</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']">
<div :class="[prefixCls + '-picker-wrapper']"> <div :class="[prefixCls + '-picker-wrapper']">
<div :class="[prefixCls + '-picker-panel']"> <div :class="[prefixCls + '-picker-panel']">
@ -39,18 +48,19 @@
<Confirm @on-pick-success="handleSuccess" @on-pick-clear="handleClear"></Confirm> <Confirm @on-pick-success="handleSuccess" @on-pick-clear="handleClear"></Confirm>
</div> </div>
</div> </div>
</Dropdown-menu> </Drop>
</Dropdown> </transition>
</div>
</template> </template>
<script> <script>
import tinycolor from 'tinycolor2'; import tinycolor from 'tinycolor2';
import Icon from '../icon/icon.vue'; import clickoutside from '../../directives/clickoutside';
import Dropdown from '../dropdown/dropdown.vue'; import TransferDom from '../../directives/transfer-dom';
import DropdownMenu from '../dropdown/dropdown-menu.vue';
import Drop from '../../components/select/dropdown.vue';
import RecommendColors from './recommend-colors.vue'; import RecommendColors from './recommend-colors.vue';
import Confirm from '../date-picker/base/confirm.vue'; import Confirm from '../date-picker/base/confirm.vue';
import Saturation from './saturation.vue'; import Saturation from './saturation.vue';
import Hue from './hue.vue'; import Hue from './hue.vue';
import Alpha from './alpha.vue'; import Alpha from './alpha.vue';
@ -111,7 +121,8 @@
export default { export default {
name: 'ColorPicker', name: 'ColorPicker',
components: { Icon, Dropdown, DropdownMenu, Confirm, RecommendColors, Saturation, Hue, Alpha }, components: { Drop, Confirm, RecommendColors, Saturation, Hue, Alpha },
directives: { clickoutside, TransferDom },
props: { props: {
value: { value: {
type: String type: String
@ -142,7 +153,8 @@
size: { size: {
validator (value) { validator (value) {
return oneOf(value, ['small', 'large', 'default']); return oneOf(value, ['small', 'large', 'default']);
} },
default: 'default'
}, },
placement: { placement: {
validator (value) { validator (value) {
@ -160,6 +172,7 @@
val: _colorChange(this.value), val: _colorChange(this.value),
prefixCls: prefixCls, prefixCls: prefixCls,
visible: false, visible: false,
disableCloseUnderTransfer: false, // transfer 模式下，点击Drop也会触发关闭
recommendedColor: [ recommendedColor: [
'#2d8cf0', '#2d8cf0',
'#19be6b', '#19be6b',
@ -189,6 +202,13 @@
}; };
}, },
computed: { computed: {
transition () {
if (this.placement === 'bottom-start' || this.placement === 'bottom' || this.placement === 'bottom-end') {
return 'slide-up';
} else {
return 'fade';
}
},
saturationColors: { saturationColors: {
get () { get () {
return this.val; return this.val;
@ -266,11 +286,30 @@
value (newVal) { value (newVal) {
this.val = _colorChange(newVal); this.val = _colorChange(newVal);
}, },
visible () { visible (val) {
this.val = _colorChange(this.value); this.val = _colorChange(this.value);
if (val) {
this.$refs.drop.update();
} else {
this.$refs.drop.destroy();
}
} }
}, },
methods: { 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) { childChange (data) {
this.colorChange(data); this.colorChange(data);
}, },
@ -300,18 +339,15 @@
return data; return data;
} }
}, },
handleToggleVisible (visible) {
this.visible = visible;
},
handleSuccess () { handleSuccess () {
const color = this.formatColor; const color = this.formatColor;
this.$emit('input', color); this.$emit('input', color);
this.$emit('on-change', color); this.$emit('on-change', color);
this.$refs.picker.handleClose(); this.handleClose();
}, },
handleClear () { handleClear () {
this.$emit('input', ''); this.$emit('input', '');
this.$refs.picker.handleClose(); this.handleClose();
}, },
handleSelectColor (color) { handleSelectColor (color) {
this.val = _colorChange(color); this.val = _colorChange(color);

1
src/styles/components/color-picker.less
View file

@ -1,6 +1,7 @@
@color-picker-prefix-cls: ~"@{css-prefix}color-picker"; @color-picker-prefix-cls: ~"@{css-prefix}color-picker";
.@{color-picker-prefix-cls} { .@{color-picker-prefix-cls} {
display: inline-block;
& .@{select-dropdown-prefix-cls} { & .@{select-dropdown-prefix-cls} {
padding: 0; padding: 0;
} }