自己开源的vue2颜色选择器

<template>
    <div> 
      <a-popover overlayClassName="color-popover" placement="bottomLeft" trigger="click" v-model="visible">
          <template slot="content">
            <a-icon type="close-square" theme="filled" class="color-close" @click="visible = false"/>
            <sketch-picker 
                :value="colorRbgaValue"
                @input="changeColor"
                :palette="defaultColors"
            />
          </template>
          <div class="ant-input color-input" :style="{ width, height }" @click="visible = true">
            <div class="color-area" :style="{ backgroundColor: colorRbgaValue }"></div>
          </div>
       </a-popover>
    </div>
</template>
<script>
import { Sketch } from 'vue-color';
export default {
  name: 'colorPicker',
  components: {
     'sketch-picker': Sketch
  },
  props: {
    value: {
      type: String,
      default: '#000' //hex值
    },
    alpha:{
      type: String || Number,
      default: '1'
    },
    width: {
      type: String,
      default: '88px' //色块宽度
    },
    height: {
      type: String,
      default: '32px' //色块高度
    }
  },
  data() {
    return {
        colorRbgaValue: 'rbga(0,0,0)',
        visible: false,
        defaultColors:[
            '#000000', '#FFFFFF', '#FF1900', '#F47365', '#FFB243', 
            '#FFE623', '#6EFF2A', '#1BC7B1', '#00BEFF', 
            '#2E81FF', '#5D61FF', '#FF89CF', '#FC3CAD', 
            '#BF3DCE', '#8E00A7', 'rgba(0,0,0,0)'
        ],
    };
  },
  mounted() {
    const {r, g, b} = this.hex2rgb(this.value);
    this.colorRbgaValue = `rgba(${r}, ${g}, ${b}, ${this.alpha !== null ? this.alpha : '1'})`;
  },
  methods: {
      changeColor(color) {
        const { r, g, b, a } = color.rgba;
        this.colorRbgaValue = `rgba(${r}, ${g}, ${b}, ${a})`;
        this.$emit('update:value', color.hex);
        this.$emit('update:alpha', a.toString());
      },
      hex2rgb(hex) {
          hex = hex.slice(1)
          const change = val => parseInt(val, 16) || 0 // 避免NaN的情况
          return {
              r: change(hex.slice(0, 2)),
              g: change(hex.slice(2, 4)),
              b: change(hex.slice(4, 6))
          }
      }, 
  }
};
</script>
<style lang="scss">
.color-popover {
  .ant-popover-inner-content {
    padding: 0;
  }
  .ant-popover-arrow {
    z-index:1;
  }
  .vc-sketch {
    padding: 14px 10px 0;
  }
}
</style>
<style lang="scss" scoped>
.color-close {
  position: absolute;
  right: 0;
  color: #9d9d9d;
  font-size: 12px;
  z-index: 2;
}
.color-area {
   width: 98%;
   height: 98%;
   border:1px solid #d9d9d9;
}
</style>

 <color-picker width="88px" 
                  :alpha.sync="Transparency"
                  :value.sync="borderColor"/>