update ColorPicker
This commit is contained in:
梁灏
parent
9673dcb04c
commit
9af2f01cb2
4 changed files with 117 additions and 8 deletions
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<div style="margin: 100px;">
|
||||
<!--<Input placeholder="请输入..." size="large" style="width: 50px;"></Input>-->
|
||||
<color-picker placement="bottom-start" size="large"></color-picker>
|
||||
<!--<color-picker placement="bottom-start" size="large"></color-picker>-->
|
||||
<!--<Date-picker type="date" placeholder="选择日期" size="large" style="width: 200px"></Date-picker>-->
|
||||
<color-picker placement="bottom-start" size="default"></color-picker>
|
||||
<color-picker recommend alpha placement="bottom" size="default"></color-picker>
|
||||
<!--<Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>-->
|
||||
<color-picker placement="bottom-start" size="small"></color-picker>
|
||||
<!--<color-picker placement="bottom-start" size="small"></color-picker>-->
|
||||
<!--<Date-picker type="date" placeholder="选择日期" size="small" style="width: 200px"></Date-picker>-->
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -7,9 +7,17 @@
|
|||
</div>
|
||||
</div>
|
||||
<Dropdown-menu slot="list">
|
||||
<p>常用于各种自定义下拉内容的场景。</p>
|
||||
<div style="text-align: right;margin:10px;">
|
||||
<Button type="primary">关闭</Button>
|
||||
<div :class="[prefixCls + '-picker']">
|
||||
<div :class="[prefixCls + '-picker-panel']"></div>
|
||||
<div :class="[prefixCls + '-picker-hue-slider']">
|
||||
<Slider v-model="hueNumber" :min="0" :max="255"></Slider>
|
||||
</div>
|
||||
<div v-if="alpha" :class="[prefixCls + '-picker-alpha-slider']">
|
||||
<Slider v-model="alphaNumber" :min="0" :max="100"></Slider>
|
||||
</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', prefixCls + '-picker-colors-recommended']"></recommend-colors>
|
||||
<Confirm></Confirm>
|
||||
</div>
|
||||
</Dropdown-menu>
|
||||
</Dropdown>
|
||||
|
|
@ -17,6 +25,9 @@
|
|||
<script>
|
||||
import Dropdown from '../dropdown/dropdown.vue';
|
||||
import DropdownMenu from '../dropdown/dropdown-menu.vue';
|
||||
import Slider from '../slider/slider.vue';
|
||||
import RecommendColors from './recommend-colors.vue';
|
||||
import Confirm from '../date-picker/base/confirm.vue';
|
||||
import { oneOf } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-color-picker';
|
||||
|
|
@ -24,7 +35,7 @@
|
|||
|
||||
export default {
|
||||
name: 'ColorPicker',
|
||||
components: { Dropdown, DropdownMenu },
|
||||
components: { Dropdown, DropdownMenu, Slider, Confirm, RecommendColors },
|
||||
props: {
|
||||
value: {
|
||||
type: String
|
||||
|
|
@ -33,11 +44,21 @@
|
|||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
recommend: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
format: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['hsl', 'hsv', 'hex', 'rgb']);
|
||||
}
|
||||
},
|
||||
colors: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
|
|
@ -61,7 +82,31 @@
|
|||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
currentValue: this.value
|
||||
currentValue: this.value,
|
||||
hueNumber: 0,
|
||||
alphaNumber: 0,
|
||||
recommendedColor: [
|
||||
'#2d8cf0',
|
||||
'#19be6b',
|
||||
'#ff9900',
|
||||
'#ed3f14',
|
||||
'#00b5ff',
|
||||
'#19c919',
|
||||
'#f9e31c',
|
||||
'#ea1a1a',
|
||||
'#9b1dea',
|
||||
'#00c2b1',
|
||||
'#ac7a33',
|
||||
'#1d35ea',
|
||||
'#42bd82',
|
||||
'#f16b62',
|
||||
'#ea4ca3',
|
||||
'#0d94aa',
|
||||
'#febd79',
|
||||
'#3b90fc',
|
||||
'#000000',
|
||||
'#ffffff'
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
23
src/components/color-picker/recommend-colors.vue
Normal file
23
src/components/color-picker/recommend-colors.vue
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<div>
|
||||
<template v-for="(item, index) in list">
|
||||
<span><em :style="{'background': item}"></em></span>
|
||||
<br v-if="(index + 1) % 10 === 0 && index !== 0 && (index + 1) !== list.length">
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
list: Array
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -21,4 +21,45 @@
|
|||
height: 14px;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
&-picker{
|
||||
padding: 8px 8px 0;
|
||||
&-panel{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 0 auto;
|
||||
background: #47cb89;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&-hue-slider{
|
||||
|
||||
}
|
||||
&-alpha-slider{
|
||||
|
||||
}
|
||||
&-colors{
|
||||
margin-top: 8px;
|
||||
span{
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
em{
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-colors-recommended{
|
||||
span:last-child em{
|
||||
border: 1px solid #6b6f78;
|
||||
}
|
||||
}
|
||||
.@{picker-prefix-cls}-confirm{
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue