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 14:56:10 +08:00
parent c0fa72ca6d
commit 1f61a55983
4 changed files with 26 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,12 +4,12 @@
<!--<Input placeholder="请输入..." size="large" style="width: 50px;"></Input>-->
<!--<color-picker placement="bottom-start" size="large"></color-picker>-->
<!--<Date-picker type="date" placeholder="选择日期" size="large" style="width: 200px"></Date-picker>-->
<color-picker ref="xxx" v-model="color" alpha :recommend="true"></color-picker>
<color-picker ref="xxx" v-model="color" :recommend="true"></color-picker>
<color-picker v-model="color2" :alpha="false" :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>-->
<Button @click="do2">do2</Button>
<Button @click="setColor">set color</Button>
</div>
</template>
<script>
@ -17,14 +17,14 @@
props: {},
data () {
return {
color: 'rgba(124,24,24,.5)',
color: '',
color2: ''
};
},
computed: {},
methods: {
do2 () {
this.$refs.xxx.do2();
setColor () {
this.color = '#26bc77';
}
}
};

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

@ -4,10 +4,10 @@
<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-if="value === '' && !visible">
<div :class="[prefixCls + '-color-empty']" v-show="value === '' && !visible">
<Icon type="ios-close-empty"></Icon>
</div>
<div v-else :style="{backgroundColor: displayedColor}"></div>
<div v-show="value || visible" :style="{backgroundColor: displayedColor}"></div>
</div>
</div>
</div>
@ -22,8 +22,16 @@
<div v-if="alpha" :class="[prefixCls + '-picker-alpha-slider']">
<Alpha v-model="saturationColors" @change="childChange"></Alpha>
</div>
<recommend-colors v-if="colors.length" :list="colors" :class="[prefixCls + '-picker-colors']"></recommend-colors>
<recommend-colors v-if="!colors.length && recommend" :list="recommendedColor" :class="[prefixCls + '-picker-colors']"></recommend-colors>
<recommend-colors
v-if="colors.length"
:list="colors"
:class="[prefixCls + '-picker-colors']"
@picker-color="handleSelectColor"></recommend-colors>
<recommend-colors
v-if="!colors.length && recommend"
:list="recommendedColor"
:class="[prefixCls + '-picker-colors']"
@picker-color="handleSelectColor"></recommend-colors>
<Confirm @on-pick-success="handleSuccess" @on-pick-clear="handleClear"></Confirm>
</div>
</Dropdown-menu>
@ -278,6 +286,9 @@
handleClear () {
this.$emit('input', '');
this.$refs.picker.handleClose();
},
handleSelectColor (color) {
this.val = _colorChange(color);
}
}
};

11
src/components/color-picker/recommend-colors.vue
View file

@ -1,7 +1,7 @@
<template>
<div>
<template v-for="(item, index) in list">
<span><em :style="{'background': item}"></em></span>
<span @click="handleClick(index)"><em :style="{'background': item}"></em></span>
<br v-if="(index + 1) % 10 === 0 && index !== 0 && (index + 1) !== list.length">
</template>
</div>
@ -11,13 +11,10 @@
props: {
list: Array
},
data () {
return {
};
},
methods: {
handleClick (index) {
this.$emit('picker-color', this.list[index]);
}
}
};
</script>

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

@ -152,6 +152,7 @@
bottom: 0;
left: 0;
overflow: hidden;
border-radius: 2px;
}
&-checkerboard{
position: absolute;
@ -167,6 +168,7 @@
right: 0;
bottom: 0;
left: 0;
border-radius: 2px;
}
&-container{
cursor: pointer;