ColorPicker add editable prop
This commit is contained in:
梁灏
parent
0ab65f3bfa
commit
0fdbb26be3
3 changed files with 39 additions and 148 deletions
|
|
@ -1,152 +1,17 @@
|
|||
<template>
|
||||
<div style="margin: 100px;">
|
||||
{{color}}
|
||||
<!--<Input placeholder="请输入..." size="large" style="width: 50px;"></Input>-->
|
||||
<color-picker
|
||||
v-model="color"
|
||||
placement="bottom-start"
|
||||
@on-change="c1"
|
||||
@on-active-change="c2"></color-picker>
|
||||
<Input value="hello" style="display: inline-block" />
|
||||
<Date-picker
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
style="width: 200px"></Date-picker>
|
||||
<color-picker
|
||||
ref="xxx"
|
||||
v-model="color"
|
||||
:recommend="true"
|
||||
format="rgb"
|
||||
alpha
|
||||
@on-change="onChange"
|
||||
@on-active-change="onActiveChange"></color-picker>
|
||||
<color-picker
|
||||
v-model="color2"
|
||||
:alpha="true"
|
||||
:recommend="false"
|
||||
format="hsv"></color-picker>
|
||||
<!--<Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>-->
|
||||
<color-picker
|
||||
v-model="color"
|
||||
placement="bottom-start"
|
||||
></color-picker>
|
||||
<Date-picker
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
style="width: 200px"></Date-picker>
|
||||
<color-picker
|
||||
ref="yyy"
|
||||
:colors="colors"
|
||||
v-model="color"
|
||||
format="rgb"
|
||||
alpha></color-picker>
|
||||
<Button @click="setColor">set color</Button>
|
||||
|
||||
<br><br><br><br>
|
||||
{{openState}}
|
||||
<ColorPicker
|
||||
v-model="color7"
|
||||
:hue="false"
|
||||
@on-open-change="onOpenChange"></ColorPicker>
|
||||
<ColorPicker
|
||||
v-model="color7"
|
||||
:hue="false"
|
||||
:hide-drop-down="hideDropDown"
|
||||
@on-open-change="onOpenChange"></ColorPicker>
|
||||
|
||||
<br><br><br><br>
|
||||
<ColorPicker
|
||||
v-model="color7"
|
||||
disabled></ColorPicker>
|
||||
{{ color1 }}
|
||||
<ColorPicker v-model="color1" />
|
||||
<ColorPicker v-model="color2" :editable="false"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {},
|
||||
|
||||
data () {
|
||||
return {
|
||||
color: 'rgba(12,34,255,.85)',
|
||||
color2: '',
|
||||
color7: '#19be6b',
|
||||
openState: false,
|
||||
colors: [
|
||||
'#2d8cf0',
|
||||
'#19be6b',
|
||||
'#ff9900',
|
||||
'#ed3f14',
|
||||
'#00b5ff',
|
||||
'#19c919',
|
||||
'#f9e31c',
|
||||
'#ea1a1a',
|
||||
'#9b1dea',
|
||||
'#00c2b1',
|
||||
'#ac7a33',
|
||||
'#1d35ea',
|
||||
'#8bc34a',
|
||||
'#f16b62',
|
||||
'#ea4ca3',
|
||||
'#0d94aa',
|
||||
'#febd79',
|
||||
'#5d4037',
|
||||
'#00bcd4',
|
||||
'#f06292',
|
||||
'#cddc39',
|
||||
'#607d8b',
|
||||
'#000000',
|
||||
'#ffffff',
|
||||
'#2d8cf0',
|
||||
'#19be6b',
|
||||
'#ff9900',
|
||||
'#ed3f14',
|
||||
'#00b5ff',
|
||||
'#19c919',
|
||||
'#f9e31c',
|
||||
'#ea1a1a',
|
||||
'#9b1dea',
|
||||
'#00c2b1',
|
||||
'#ac7a33',
|
||||
'#1d35ea',
|
||||
'#8bc34a',
|
||||
'#f16b62',
|
||||
'#ea4ca3',
|
||||
'#0d94aa',
|
||||
'#febd79',
|
||||
'#5d4037',
|
||||
],
|
||||
hideDropDown: false,
|
||||
color1: '#19be6b',
|
||||
color2: ''
|
||||
};
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
mounted() {
|
||||
setInterval(this.toggleShowHide, 2000);
|
||||
},
|
||||
|
||||
methods: {
|
||||
setColor() {
|
||||
this.color = '#26bc77';
|
||||
},
|
||||
c1(d) {
|
||||
console.log(d);
|
||||
},
|
||||
c2(d) {
|
||||
console.log(d);
|
||||
},
|
||||
onOpenChange(state) {
|
||||
this.openState = state;
|
||||
},
|
||||
onChange(d) {
|
||||
console.log(d);
|
||||
},
|
||||
onActiveChange(d) {
|
||||
console.log(d);
|
||||
},
|
||||
toggleShowHide() {
|
||||
this.hideDropDown = !this.hideDropDown;
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -82,7 +82,12 @@
|
|||
@picker-color="handleSelectColor"></recommend-colors>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-confirm']">
|
||||
<span :class="[prefixCls + '-confirm-color']">{{formatColor}}</span>
|
||||
<span :class="confirmColorClasses">
|
||||
<template v-if="editable">
|
||||
<i-input :value="formatColor" size="small" @on-enter="handleEditColor"></i-input>
|
||||
</template>
|
||||
<template v-else>{{formatColor}}</template>
|
||||
</span>
|
||||
<i-button
|
||||
ref="clear"
|
||||
:tabindex="0"
|
||||
|
|
@ -118,6 +123,7 @@ import RecommendColors from './recommend-colors.vue';
|
|||
import Saturation from './saturation.vue';
|
||||
import Hue from './hue.vue';
|
||||
import Alpha from './alpha.vue';
|
||||
import iInput from '../input/input.vue';
|
||||
import Locale from '../../mixins/locale';
|
||||
import {oneOf} from '../../utils/assist';
|
||||
import Emitter from '../../mixins/emitter';
|
||||
|
|
@ -127,7 +133,7 @@ import {changeColor, toRGBAString} from './utils';
|
|||
export default {
|
||||
name: 'ColorPicker',
|
||||
|
||||
components: {Drop, RecommendColors, Saturation, Hue, Alpha},
|
||||
components: {Drop, RecommendColors, Saturation, Hue, Alpha, iInput},
|
||||
|
||||
directives: {clickOutside, TransferDom},
|
||||
|
||||
|
|
@ -209,6 +215,10 @@ export default {
|
|||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
@ -334,6 +344,14 @@ export default {
|
|||
|
||||
return saturationColors.hex;
|
||||
},
|
||||
confirmColorClasses () {
|
||||
return [
|
||||
`${this.prefixCls}-confirm-color`,
|
||||
{
|
||||
[`${this.prefixCls}-confirm-color-editable`]: this.editable
|
||||
}
|
||||
];
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
|
|
@ -419,6 +437,10 @@ export default {
|
|||
this.val = changeColor(color);
|
||||
this.$emit('on-active-change', this.formatColor);
|
||||
},
|
||||
handleEditColor (event) {
|
||||
const value = event.target.value;
|
||||
this.handleSelectColor(value);
|
||||
},
|
||||
handleFirstTab(event) {
|
||||
if (event.shiftKey) {
|
||||
event.preventDefault();
|
||||
|
|
|
|||
|
|
@ -289,6 +289,10 @@
|
|||
position: absolute;
|
||||
top: 11px;
|
||||
left: 8px;
|
||||
|
||||
&-editable{
|
||||
top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue