el-select颜色选择器

子组件colorSelect.vue：

<template>
    <el-select ref="colorSelect" placeholder="" v-model="myColor" style="width: 100%" @change="handleChange" clearable>
        <el-option v-for="item in colorList" :key="item" label=" " :value="item">
            <template #default>
                <div class="color-block" :style="{ 
                    backgroundColor: item,
                    borderRadius: '6px',
                    height: '90%',
                    width: '50%'
                }">
                </div>
            </template>

        </el-option>
    </el-select>
</template>
  
  <script>
    export default {
        name: "colorSelect",
        //允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。
        model: {
            prop: 'color',
            event: 'update'
        },
        props: {
            //颜色数组
            colorList: {
                type: Array,
                default: () => {
                    return ["#FFC0CB", "#DB7093", "#FF1493", "#DC143C"];
                }
            },
            //父组件绑定的值
            color: {
                type: String,
                default: undefined
            }
        },
        data() {
            return {
                myColor: undefined
            }
        },
        methods: {
            //设置颜色选择框中颜色
            setSelectColor(color) {
                //通过操作dom节点改变样式
                this.$nextTick(() => {
                    let dom = this.$refs.colorSelect;
                    if (dom) {
                        dom = dom.$el.children[0];
                        let inputDom = dom.querySelectorAll(".el-input__inner");
                        let icon = dom.querySelectorAll(".el-input__icon");
                        inputDom[0].style["background-color"] = color;
                        inputDom[0].style["margin"] = '10px';
                        icon[0].style["color"] = "black";
                    }
                })
            },
            handleChange(val) {
                this.setSelectColor(val);
                //触发update事件更新父组件绑定值
                this.$emit('update', val);
            }
        },
        created() {
            if (this.color && this.color.length > 0) {
                this.myColor = this.color;
                this.setSelectColor(this.color)
            }
        },
        watch: {
            'color': function (val) {
                this.setSelectColor(val);
            }
        }
    }
  </script>
  
  <style scoped>
</style>
  
  

父组件使用：

<el-form-item label="示意颜色" prop="colorType">
    <color-select :color-list="colorList" v-model="standardForm.colorType"></color-select>
</el-form-item>

父组件其他部分：

colorList: ["#F04864", "#FACC14"],