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

Color keyboard control

Browse source
This commit is contained in:
Graham Fairweather 2018-05-15 14:26:58 +02:00
parent b924d14da3
commit f2bcd4adaf
13 changed files with 1314 additions and 653 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,46 +1,157 @@
<template>
<div style="margin: 100px;">
{{ color }}
{{color}}
<!--<Input placeholder="请输入..." size="large" style="width: 50px;"></Input>-->
<color-picker @on-change="c1" @on-active-change="c2" 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" format="hsv" :alpha="true" :recommend="false"></color-picker>
<color-picker
v-model="color"
placement="bottom-start"
size="large"
@on-change="c1"
@on-active-change="c2"></color-picker>
<Date-picker
transfer
type="date"
placeholder="选择日期"
style="width: 200px"></Date-picker>
<color-picker
ref="xxx"
:transfer="true"
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" 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>
<color-picker
ref="yyy"
:colors="colors"
v-model="color"
transfer
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"
@on-open-change="onOpenChange"></ColorPicker>
<ColorPicker
v-model="color7"
:hue="false"
:hide-drop-down="hideDropDown"
transfer
@on-open-change="onOpenChange"></ColorPicker>
<br><br><br><br>
<ColorPicker
v-model="color7"
disabled></ColorPicker>
</div>
</template>
<script>
export default {
props: {},
data () {
return {
color: 'rgba(12,34,255,.85)',
color2: '',
color7: '#19be6b',
openState: false,
};
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,
};
},
computed: {},
mounted() {
setInterval(this.toggleShowHide, 2000);
},
methods: {
setColor() {
this.color = '#26bc77';
},
computed: {},
methods: {
setColor () {
this.color = '#26bc77';
},
c1 (d) {
console.log(d);
},
c2 (d) {
console.log(d);
},
onOpenChange(state){
this.openState = state;
}
}
};
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>