Custom Vue color picker

16045940:

The requirement is to create a new label with a color. The project uses the element ui component library. The built-in <el-color-picker> does not match the requirement, so I customized one.

Table of contents

foreword

1. Ideas

Two, coding

1. Define the color array

2. Dynamically render item background color through color coding

3. Get the value through getColor

Three, use

1. Component source code

2. Quote

Summarize

---

foreword

The prototype picture sent by the boss is like this

The color picker in element ui looks like this

---

Because everyone's operating habits are different, there may be colorful labels later, so after discussion, only some colors can be set.

---

---

1. Ideas

In fact, this kind of custom RadioButton revision only needs to change the data.

Two, coding

1. Define the color array

predefineColors: {
        options: [
          {
            text: '#F45B5A',
            value: '#F45B5A',
          },
          {
            text: '#FFCB45',
            value: '#FFCB45',
          },
          {
            text: '#FF8A4E',
            value: '#FF8A4E',
          },
          {
            text: '#6ABF40',
            value: '#6ABF40',
          },
          {
            text: '#3D96FF',
            value: '#3D96FF',
          },
          {
            text: '#00DAE0',
            value: '#00DAE0',
          },
          {
            text: '#5D5CDB',
            value: '#5D5CDB',
          },
          {
            text: '#B44D5F',
            value: '#B44D5F',
          },
          {
            text: '#c71585',
            value: '#c71585',
          },
        ],
      },

2. Dynamically render item background color through color coding

      <div
        v-for="(item, index) in radioObj.options"
        :key="index"
        :class="item.value === radioObj.value ? 'radio_style radio_check' : 'radio_style radio_uncheck'"
        :style="{ background: item.text }"
        @click="radioBtn(item)"
      ></div>

The core is in this sentence

        :style="{ background: item.text }"

3. Get the value through getColor

    getColor(data) {
      this.color = data
      console.log('data: ', data)
    },

​​​​​​​

---

Three, use

1. Component source code

ColorPicker.vue

<template>
  <div class="container">
    <div :span="18" class="row-radio-btn">
      <div
        v-for="(item, index) in radioObj.options"
        :key="index"
        :class="item.value === radioObj.value ? 'radio_style radio_check' : 'radio_style radio_uncheck'"
        :style="{ background: item.text }"
        @click="radioBtn(item)"
      ></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ColorPicker',
  components: {},
  props: {
    color: {
      type: String,
      default: '#DA433C',
    },
    compsData: {
      type: Object,
      default: () => {
        return {
          label: '',
          value: '',
          options: [
            {
              text: '男',
              value: '0',
            },
            {
              text: '女',
              value: '1',
            },
          ],
        }
      },
    },
  },
  data() {
    return {
      radioObj: {
        options: [],
      },
    }
  },
  watch: {
    compsData(data) {
      this.radioObj = data
      console.log('this.radioObj: ', this.radioObj)
    },
    color(newVal) {
      this.color = newVal
      this.radioBtn({ value: this.color })
    },
  },
  mounted() {
    this.radioObj = this.compsData
    this.radioBtn({ value: this.color })
  },
  methods: {
    radioBtn(item) {
      this.radioObj.value = item.value
      this.$emit('click', item.value)
    },
  },
}
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
}
.title {
  font-size: 14px;
  color: #484848;
}
.row-radio-btn {
  display: flex;
  background: #ffffff;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 40px;
  line-height: 40px;
}
.radio_style {
  width: 15px;
  margin-left: 10px;
  height: 15px;
  border-radius: 4px;
}
.radio_uncheck {
  color: #9f9f9f;
}
.radio_check {
  color: #ffffff;
  width: 18px;
  height: 18px;
}
</style>

2. Quote

<ColorPicker :compsData="predefineColors" @click="getColor" :color="color"></ColorPicker>

The definition of predefineColors is at the beginning of the article.

Summarize

Use the RadioButton component to infer other cases from one instance.