<template>
  <div>
    <el-color-picker
      v-model="vModel"
      :disabled="disabled"
      :size="size"
      :show-alpha="showAlpha"
      :color-format="colorFormat"
      :popper-class="popperClass"
      :predefine="predefine"
      @change="change"
      @active-change="activeChange"
    ></el-color-picker>
  </div>
</template>

<script>
export default {
  name: "HmElementColorPicker",
  props: {
    /**
     * 	绑定值
     */
    vModel: {
      type: String,
      default: "rgba(19, 206, 102, 0.8)",
    },
    /**
     * 	是否禁用
     */
    disabled: {
      type: Boolean,
      default: false,
    },
    /**
     * 	尺寸
     * @type Enum
     * @default medium,
     * @options ["medium","small","mini"]
     */
    size: {
      type: String,
    },
    /**
     * 是否支持透明度选择
     */
    showAlpha: {
      type: Boolean,
      default: false,
    },
    /**
     * 写入 v-model 的颜色的格式
     * @type Enum
     * @default hex
     * @options ["hsl","hsv","hex","rgb"]
     */
    colorFormat: {
      type: String,
    },
    /**
     * ColorPicker 下拉框的类名
     */
    popperClass: {
      type: String,
    },
    /**
     * 预定义颜色
     * @type Color
     */
    predefine: {
      type: Array,
    },
  },
  methods: {
    change(e) {
      this.$emit("change", e);
    },
    activeChange(e) {
      this.$emit("activeChange", e);
    },
  },
};
</script>

<style>
</style>