<template>
  <div style="display: flex" class="dk-color">
    <el-input v-model="data" :placeholder="placeholder" clearable />
    <el-color-picker v-model="data" :show-alpha="showAlpha" color-format="colorFormat" />
  </div>
</template>

<script>
export default {
  name: 'DkColorInput',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      default: '',
      type: String
    },
    showAlpha: {
      default: false,
      type: Boolean
    },
    placeholder: {
      default: '填写颜色',
      type: String
    },
    colorFormat: {
      default: 'hex',
      type: String
    }
  },
  data() {
    return {
      data: this.value || ''
    }
  },
  computed: {},
  watch: {
    value(val) {
      this.data = val
      // this.$emit('change', val)
    },
    data(val) {
      this.$emit('change', val)
    }
  },
  mounted() {
  },
  methods: {}
}
</script>

<style scoped lang="scss">
.dk-color {
  display: flex;

  &::v-deep {
    .el-input__inner {
      // border 右侧圆角0
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    .el-color-picker__trigger {
      // border 左侧圆角0
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      left:-1;
    }
  }
}
</style>
