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

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

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

Loading…
Cancel
Save