【vue】vue组件之颜色选择器（基于element-ui）

ps：需要引入element-ui

1. 代码(待优化，后面会改为双向绑定)

<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) {
      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>

2. 引用

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

3. 示例