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

Merge pull request #4353 from icarusion/ColorPicker-add-editable-prop

Browse source 
ColorPicker add editable prop
This commit is contained in:
Aresn 2018-08-24 16:56:49 +08:00 • committed by GitHub
commit d411992d07
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 39 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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,
};
},
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;
},
},
};
export default {
data () {
return {
color1: '#19be6b',
color2: ''
};
}
};
</script>