mirror of https://github.com/ElemeFE/element
ColorPicker: add chalk theme
Leopoldthecoder
杨奕
parent
f01df258f4
commit
e8516d633a
|
|
@ -2,9 +2,10 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
color1: '#20a0ff',
|
||||
color1: '#1989fa',
|
||||
color2: null,
|
||||
color3: 'rgba(19, 206, 102, 0.8)'
|
||||
color3: 'rgba(19, 206, 102, 0.8)',
|
||||
color4: '#20a0ff'
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -34,6 +35,9 @@
|
|||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.demo-color-picker .el-color-picker + .el-color-picker {
|
||||
margin-left: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
## ColorPicker
|
||||
|
|
@ -57,7 +61,7 @@ ColorPicker is a color selector supporting multiple color formats.
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
color1: '#20a0ff',
|
||||
color1: '#1989fa',
|
||||
color2: null
|
||||
}
|
||||
}
|
||||
|
|
@ -84,9 +88,32 @@ ColorPicker is a color selector supporting multiple color formats.
|
|||
```
|
||||
:::
|
||||
|
||||
### Sizes
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-color-picker v-model="color4"></el-color-picker>
|
||||
<el-color-picker v-model="color4" size="medium"></el-color-picker>
|
||||
<el-color-picker v-model="color4" size="small"></el-color-picker>
|
||||
<el-color-picker v-model="color4" size="mini"></el-color-picker>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
color4: '#20a0ff'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| disabled | whether to disable the ColorPicker | boolean | — | false |
|
||||
| size | size of ColorPicker | string | — | medium / small / mini |
|
||||
| show-alpha | whether to display the alpha slider | boolean | — | false |
|
||||
| color-format | color format of v-model | string | hsl / hsv / hex / rgb | hex (when show-alpha is false)/ rgb (when show-alpha is true) |
|
||||
|
||||
|
|
|
|||
|
|
@ -2,9 +2,10 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
color1: '#20a0ff',
|
||||
color1: '#1989fa',
|
||||
color2: null,
|
||||
color3: 'rgba(19, 206, 102, 0.8)'
|
||||
color3: 'rgba(19, 206, 102, 0.8)',
|
||||
color4: '#20a0ff'
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -34,6 +35,9 @@
|
|||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.demo-color-picker .el-color-picker + .el-color-picker {
|
||||
margin-left: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
## ColorPicker 颜色选择器
|
||||
|
|
@ -57,7 +61,7 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
color1: '#20a0ff',
|
||||
color1: '#1989fa',
|
||||
color2: null
|
||||
}
|
||||
}
|
||||
|
|
@ -84,9 +88,32 @@
|
|||
```
|
||||
:::
|
||||
|
||||
### 不同尺寸
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-color-picker v-model="color4"></el-color-picker>
|
||||
<el-color-picker v-model="color4" size="medium"></el-color-picker>
|
||||
<el-color-picker v-model="color4" size="small"></el-color-picker>
|
||||
<el-color-picker v-model="color4" size="mini"></el-color-picker>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
color4: '#20a0ff'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| size | 尺寸 | string | — | medium / small / mini |
|
||||
| show-alpha | 是否支持透明度选择 | boolean | — | false |
|
||||
| color-format | 写入 v-model 的颜色的格式 | string | hsl / hsv / hex / rgb | hex（show-alpha 为 false）/ rgb（show-alpha 为 true） |
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,13 @@
|
|||
<template>
|
||||
<div class="el-color-picker" v-clickoutside="hide">
|
||||
<div class="el-color-picker__trigger" @click="showPicker = !showPicker">
|
||||
<div
|
||||
:class="[
|
||||
'el-color-picker',
|
||||
disabled ? 'is-disabled' : '',
|
||||
size ? `el-color-picker--${ size }` : ''
|
||||
]"
|
||||
v-clickoutside="hide">
|
||||
<div class="el-color-picker__mask" v-if="disabled"></div>
|
||||
<div class="el-color-picker__trigger" @click="handleTrigger">
|
||||
<span class="el-color-picker__color" :class="{ 'is-alpha': showAlpha }">
|
||||
<span class="el-color-picker__color-inner"
|
||||
:style="{
|
||||
|
|
@ -8,7 +15,7 @@
|
|||
}"></span>
|
||||
<span class="el-color-picker__empty el-icon-close" v-if="!value && !showPanelColor"></span>
|
||||
</span>
|
||||
<span class="el-color-picker__icon el-icon-caret-bottom"></span>
|
||||
<span class="el-color-picker__icon el-icon-caret-bottom" v-show="value || showPanelColor"></span>
|
||||
</div>
|
||||
<picker-dropdown
|
||||
ref="dropdown"
|
||||
|
|
@ -31,15 +38,11 @@
|
|||
name: 'ElColorPicker',
|
||||
|
||||
props: {
|
||||
value: {
|
||||
type: String
|
||||
},
|
||||
showAlpha: {
|
||||
type: Boolean
|
||||
},
|
||||
colorFormat: {
|
||||
type: String
|
||||
}
|
||||
value: String,
|
||||
showAlpha: Boolean,
|
||||
colorFormat: String,
|
||||
disabled: Boolean,
|
||||
size: String
|
||||
},
|
||||
|
||||
directives: { Clickoutside },
|
||||
|
|
@ -77,6 +80,10 @@
|
|||
},
|
||||
|
||||
methods: {
|
||||
handleTrigger() {
|
||||
if (this.disabled) return;
|
||||
this.showPicker = !this.showPicker;
|
||||
},
|
||||
confirmValue(value) {
|
||||
this.$emit('input', this.color.value);
|
||||
this.$emit('change', this.color.value);
|
||||
|
|
|
|||
|
|
@ -163,6 +163,7 @@
|
|||
line-height: 26px;
|
||||
font-size: 12px;
|
||||
color: $--color-black;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
@include e(btn) {
|
||||
|
|
@ -202,24 +203,99 @@
|
|||
display: inline-block;
|
||||
position: relative;
|
||||
line-height: normal;
|
||||
height: 40px;
|
||||
|
||||
@include when(disabled) {
|
||||
.el-color-picker__trigger {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(medium) {
|
||||
height: 36px;
|
||||
|
||||
.el-color-picker__trigger {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.el-color-picker__mask {
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(small) {
|
||||
height: 32px;
|
||||
|
||||
.el-color-picker__trigger {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.el-color-picker__mask {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.el-color-picker__icon,
|
||||
.el-color-picker__empty {
|
||||
transform: translate3d(-50%, -50%, 0) scale(0.6);
|
||||
}
|
||||
}
|
||||
|
||||
@include m(mini) {
|
||||
height: 28px;
|
||||
|
||||
.el-color-picker__trigger {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.el-color-picker__mask {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
}
|
||||
|
||||
.el-color-picker__icon,
|
||||
.el-color-picker__empty {
|
||||
transform: translate3d(-50%, -50%, 0) scale(0.6);
|
||||
}
|
||||
}
|
||||
|
||||
@include e(mask) {
|
||||
height: 38px;
|
||||
width: 38px;
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
z-index: 1;
|
||||
cursor: not-allowed;
|
||||
background-color: rgba(255, 255, 255, .7);
|
||||
}
|
||||
|
||||
@include e(trigger) {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
height: 36px;
|
||||
padding: 6px;
|
||||
border: 1px solid #bfcbd9;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 4px;
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 4px;
|
||||
font-size: 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@include e(color) {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #666;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 1px solid #999;
|
||||
border-radius: $--border-radius-small;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
|
||||
@include when(alpha) {
|
||||
|
|
@ -237,20 +313,21 @@
|
|||
|
||||
@include e(empty) {
|
||||
font-size: 12px;
|
||||
vertical-align: middle;
|
||||
color: #666;
|
||||
color: #999;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, -50%, 0) scale(0.8);
|
||||
}
|
||||
|
||||
@include e(icon) {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -6px;
|
||||
margin-left: 8px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, -50%, 0) scale(0.8);
|
||||
width: 12px;
|
||||
color: #888;
|
||||
color: $--color-white;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
|
@ -259,7 +336,8 @@
|
|||
z-index: 10;
|
||||
padding: 6px;
|
||||
background-color: $--color-white;
|
||||
border: 1px solid $--color-black;
|
||||
border: 1px solid $--border-color-lighter;
|
||||
border-radius: $--border-radius-base;
|
||||
box-shadow: $--dropdown-menu-box-shadow;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ $--border-radius-circle: 100%;
|
|||
-------------------------- */
|
||||
$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
|
||||
$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);
|
||||
$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
|
||||
$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
|
||||
/* Fill
|
||||
-------------------------- */
|
||||
$--fill-base: $--color-white;
|
||||
|
|
@ -282,7 +282,7 @@ $--message-danger-color: $--color-danger;
|
|||
$--notification-width: 330px;
|
||||
$--notification-padding: 14px 26px 14px 13px;
|
||||
$--notification-raduis: 8px;
|
||||
$--notification-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
|
||||
$--notification-shadow: $--box-shadow-light;
|
||||
$--notification-border-color: $--border-color-lighter;
|
||||
$--notification-icon-size: 24px;
|
||||
$--notification-close-font-size: 12px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue