用vue3的语法写一个颜色选择框组件，颜色选择框可以是任意颜色

一 实现 

<template>
  <div class="color-picker">
    <div class="color-preview" :style="{ backgroundColor: selectedColor }"></div>
    <div class="color-selector">
      <div v-for="color in colors" :key="color" :style="{ backgroundColor: color }"
           @click="selectColor(color)" :class="{ 'active': selectedColor === color }" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      colors: [
        '#e74c3c', '#f1c40f', '#16a085', '#2c3e50',
        '#1abc9c', '#3498db', '#9b59b6', '#34495e',
        '#2ecc71', '#e67e22', '#95a5a6', '#7f8c8d',
        '#ff0000', '#00ff00', '#0000ff', '#ffff00',
        '#00ffff', '#ff00ff', '#800000', '#008000',
        '#000080', '#808000', '#800080', '#008080',
        '#ff8000', '#ff0080', '#80ff00', '#0080ff'
      ],
      selectedColor: '#e74c3c'
    }
  },
  methods: {
    selectColor(color) {
      this.selectedColor = color
      this.$emit('select', color)
    }
  }
}
</script>
<style scoped>
.color-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.color-preview {
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
}
.color-selector {
  display: flex;
  flex-wrap: wrap;
}
.color-selector > div {
  width: 30px;
  height: 30px;
  margin: 5px;
  cursor: pointer;
}
.active {
  border: 2px solid #fff;
}
</style>

使用方式：

<template>
  <div>
    <color-picker @select="onColorSelected" />
  </div>
</template>
<script>
import ColorPicker from './ColorPicker.vue'
export default {
  components: { ColorPicker },
  methods: {
    onColorSelected(color) {
      console.log('Selected color:', color)
    }
  }
}
</script>

二 实现选中样式 

.active {
  box-shadow: 0 0 0 2px #477fff;
  border: 2px solid #fff;
}

三 项目

<template>
  <div class="tagDrawer">
    <el-drawer
      v-model="isShow"
      direction="rtl"
      :before-close="handleClose"
      :destroy-on-close="true"
      custom-class="drawer-box"
      size="30%"
    >
      <template #header>
        <div class="title">新建标签</div>
      </template>
      <template #default>
        <!-- 标签 -->
        <div class="tag_name">
          <el-form :model="tagForm" label-position="top" ref="form" :rules="rules">
            <el-form-item label="标签名称" prop="name">
              <el-input
                v-model="tagForm.name"
                placeholder="请输入内容"
                style="width: 100%"
                maxlength="10"
                show-word-limit
                type="text"
              />
            </el-form-item>
            <el-form-item label="选择标签颜色">
              <div class="tag_colors">
                <div
                  class="tag_color"
                  v-for="color in colors"
                  :key="color"
                  :style="{ backgroundColor: color }"
                  @click="selectColor(color)"
                  :class="{ active: tagForm.color === color }"
                ></div>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <!-- 按钮 -->
      <template #footer>
        <div style="display: flex; justify-content: flex-end; align-items: center">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="addTag">确定</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import CustomerAPI from "@/api/customer/index.ts"
/** 展开关闭 */
// 展开
let isShow = ref(false)
const isOpen = () => {
  isShow.value = true
}
// 关闭
const isClose = () => {
  isShow.value = false
}

defineExpose({
  isOpen,
  isClose
})

/** 添加标签 */
const tagForm = ref<any>({
  name: "",
  color: "#EC6E79"
})
// 颜色选择
const colors = ref(["#EC6E79", "#F48C3F", "#E3B509", "#67C23A", "#34C2C7", "#4C9AE8", "#AE6EDD"])
const selectColor = (color) => {
  tagForm.value.color = color
}

//校验
//职位校验规则
const rules = {
  name: [{ required: true, message: "请输入标签名称", trigger: "blur" }]
}

//添加自定义标签
const emit = defineEmits(["selectTags"])
const form = ref()
const addTag = async () => {
  //表单校验结果,结果通过在发请求、结果没有通过不应该在发生请求
  await form.value.validate()

  await CustomerAPI.addTag()
  emit("selectTags")
  isShow.value = false
}

// 关闭弹窗
const handleClose = () => {
  tagForm.value = {
    name: "",
    color: "#EC6E79"
  }
  isClose()
}
</script>

<style lang="scss" scoped>
.title {
  font-family: PingFangSC-SNaNpxibold;
  font-weight: 600;
  font-size: 18px;
  color: #333333;
}
:deep(.el-drawer__close-btn) {
  color: #000000;
}
:deep(.el-drawer__header) {
  border-bottom: 1px solid #dcdfe6;
  padding-bottom: 14px;
  margin-bottom: 20px;
}

// 标签
.tag_colors {
  display: flex;
  height: 44px;
  width: 100%;
  background: #f8f9fa;
  flex-wrap: wrap;
  padding-left: 10px;
  align-items: center;
  .tag_color {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    cursor: pointer;
    padding: 1px;
  }
}
.active {
  box-shadow: 0 0 0 2px #477fff;
  border: 2px solid #fff;
}
</style>