【elementui】颜色选择器

心已赠人 2022-12-21 00:50 440阅读 0赞

> `前言`

element-ui 2.x中的颜色选择器，预定义模式中最后一个元素无法选中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70_pic_center]  
原因：颜色编码有误  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70_pic_center 1]

> `修改`

右边下拉到最底部，找到红色，放进去即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70_pic_center 2]

> `补充组件代码`

<template>
      <div class="public-input-color-picker">
        <el-input v-model="value2" :placeholder="placeholder" @input="_change"></el-input>
        <el-color-picker v-model="value2" :show-alpha="showAlpha" :predefine="predefineColors" @change="_change" ></el-color-picker>
      </div>
    </template>
    <script> /** * 输入框颜色选择器 * ps：预定义颜色中，如果颜色不对，将无法选中 * * @showAlpha 是否支持透明度 默认false * @predefineColors 预定义颜色 * @value 默认颜色编码 示例：#ffffff * @placeholder 输入框提示文字 */ export default { name: 'public-input-color-picker', data() { return { value2: '' } }, props: { showAlpha: { type: Boolean, default: false }, predefineColors: { type: Array, default: () => { return [ '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585', '#FF0000' ] } }, value: { type: String, default: '' }, placeholder: { type: String, default: '请输入颜色编码' } }, components: { }, computed: { }, created() { }, onload() { }, onShow() { }, watch: { value: { handler: function (newVal, oldVal) { this.value2 = JSON.parse(JSON.stringify(newVal)) }, immediate: true, deep: true } }, mounted() { }, methods: { _change(val) { if (val) { this.$emit('change', val) } } } } </script>
    <style lang="less" scoped> @box-width: 200px; .public-input-color-picker { // display: flex; // -webkit-box-align: center; // -webkit-align-items: center; // align-items: center; position: relative; width: @box-width; .el-input { width: @box-width; } .el-color-picker { position: absolute; right: 0; /deep/ .el-color-picker__trigger { border: 0; } } } </style>

> `组件调用代码`

<public-input-color-picker :value="form2.labelColor" placeholder="请输入标签颜色" @change="(val)=>{form2.labelColor=val}" />

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/908438dd877245058b5b4e54cd045640.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/f311081b4166417cbc20360f876f29b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/0ca7fed0e4e649059f0f7d80bc65d0e8.png