color选择组件

qianlishi 3 years ago
parent 44eb5d5491
commit 44a45247e7

@ -1,71 +1,70 @@
<!--
* @Author: lide1202@hotmail.com
* @Date: 2021-4-8 11:04:24
* @Last Modified by: lide1202@hotmail.com
* @Last Modified time: 2021-4-8 11:04:24
!-->
<template>
<el-popover placement="right"
trigger="click">
<Chrome v-model="colors"
@input="updateValue" />
<el-input slot="reference"
v-model="colors.hex"
<el-input
clearable
v-model="colorValue"
placeholder="请输入颜色"
size="mini"
placeholder="颜色选择器">
<template #append><i class="iconfont iconcolorSelector" /></template>
@change="changeColor"
>
<template slot="append">
<el-color-picker
v-model="colorValue"
:predefine="predefineColors"
size="mini"
@change="changeColor"
/>
</template>
</el-input>
</el-popover>
</template>
<script>
import { Chrome } from 'vue-color' // https://gitee.com/mirrors/vue-color // Photoshop Chrome
export default {
name: 'ColorPicker',
components: {
Chrome,
},
name: "ColorPicker",
model: {
prop: 'value',
event: 'input',
prop: "value",
event: "input"
},
props: {
value: {
type: [String],
default: '',
},
default: ""
}
},
data () {
data() {
return {
colors: {
hex: '',
hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
hsv: { h: 150, s: 0.66, v: 0.3, a: 1 },
rgba: { r: 25, g: 77, b: 51, a: 1 },
},
}
predefineColors: [
"#ff4500",
"#ff8c00",
"#ffd700",
"#90ee90",
"#00ced1",
"#1e90ff",
"#c71585"
],
colorValue: ""
};
},
watch: {
value (val) {
this.colors.hex = val
value(val) {
this.colorValue = val || "";
}
},
mounted () {
this.colors.hex = this.value
mounted() {
this.colorValue = this.value;
},
methods: {
updateValue (value) {
// this.colors = value
this.$emit('input', value.hex)
this.$emit('change', value.hex)
},
},
}
changeColor(val) {
this.colorValue = val || "";
this.$emit("input", this.colorValue);
this.$emit("change", this.colorValue);
}
}
};
</script>
<style scoped lang="scss">
/deep/.el-input-group__append {
width: 20px;
padding: 0 5px;
<style lang="scss" scoped>
/deep/.el-color-picker--mini,
/deep/.el-color-picker--mini .el-color-picker__trigger {
width: 23px;
height: 23px;
}
</style>

@ -167,8 +167,8 @@ export default {
/deep/.el-table::before {
height: 0;
}
/deep/.el-form-item--mini .el-color-picker--mini,
/deep/.el-form-item--mini .el-color-picker--mini .el-color-picker__trigger {
/deep/.el-color-picker--mini,
/deep/.el-color-picker--mini .el-color-picker__trigger {
width: 23px;
height: 23px;
}

@ -52,7 +52,6 @@
placeholder="请输入内容"
@change="changed($event, item.name)"
/>
<ColorPicker
v-if="item.type == 'vue-color'"
v-model="formData[item.name]"

Loading…
Cancel
Save