标签选择器

一 布局

分类三个部分： 自定义标签。 自定义底部， 自定义模版

代码拆分： 

 二初始化

2.1 初始化

点击添加按钮， 初始化这个三个数据，并进行展示

2.2 下拉框的多选框

const checkSegment3 = ref<any>({})

是个对象，key 是id , value 是 选中还是未选中

2.3颜色切换

     <template #footer>
                <!-- <el-tooltip
                  content="当前标签已达到最大值20个"
                  placement="bottom"
                  effect="customized"
                  :disabled="segment3Options.length < 20"
                > -->
                <el-button type="primary" @click="addTagInput" v-if="isAdd === false"
                  >新建标签</el-button
                >
                <!-- :disabled="segment3Options.length >= 20" -->
                <!-- </el-tooltip> -->
                <div v-if="isAdd === true" style="display: flex; justify-content: space-between">
                  <input
                    type="text"
                    placeholder="标签名称不能超过10个字符"
                    class="addTag"
                    v-model="addForm.name"
                    maxlength="10"
                  />
                  <!-- 颜色选择 -->
                  <el-popover
                    ref="popoverRef"
                    placement="bottom"
                    title="Title"
                    :width="160"
                    trigger="click"
                    :teleported="false"
                  >
                    <div class="tag_colors">
                      <div
                        class="tag_color"
                        v-for="color in colors"
                        :key="color"
                        :style="{ backgroundColor: color }"
                        @click="changeColor(color)"
                      ></div>
                    </div>
                    <template #reference>
                      <!-- 颜色选择按钮 -->
                      <div class="select_color">
                        <div class="color" :style="{ backgroundColor: chooseColor }"></div>
                        <div class="triangle"></div>
                      </div>
                    </template>
                  </el-popover>

                  <el-button type="primary" @click="saveNewTag">确定</el-button>
                </div>
              </template>



// 颜色选择
const colors = ref(["#EC6E79", "#F48C3F", "#E3B509", "#67C23A", "#34C2C7", "#4C9AE8", "#AE6EDD"])


const chooseColor = ref("")
const popoverRef = ref()
const changeColor = (color: any) => {
  chooseColor.value = color
  addForm.value.color = color
  if (popoverRef.value) {
    popoverRef.value.hide()
  }
}

2.4 保存标签

1更新列表

2 添加一个标签以后， 往showTags 数组添加一个数据，同时往 多选框checkSegment3对象添加一个数据

2.5 删除某个标签

    清除头上的数据

2.6 取消选择某个标签

2.7 选择某一个

change的参数： 

业务：

多选框发生改变，同时showTags 添加值

//下拉框的多选框
const checkSegment3 = ref<any>({})
//处理下拉框的勾选操作
const handleSegment3Change = (val) => {
  console.log("处理下拉框的勾选操作", val)
  let obj = {}
  segment3Options.value.forEach((item: any) => {
    if (val && val.includes(item.tagId)) {
      checkSegment3.value[item.tagId] = true
      obj[item.tagId] = item
    } else {
      checkSegment3.value[item.tagId] = false
    }
  })

  let arr: any = []
  val.forEach((item) => {
    arr.push(obj[item])
  })
  showTags.value = arr
}
/** 打开弹框 */
const open = () => {
  // getQueryHaveTag()
}

2.8 每次打开弹框都显示【新增】按钮

1关闭在点开， 仍然显示【新建标签】的按钮： 用一个变量控制展示什么

2 弹框展开关闭调用的事件：visible-change（下拉框出现/隐藏时触发）

三el-tag 可以随之变化颜色

CustomTag：

<template>
  <div>
    <el-tag
      :color="color + '15'"
      :closable="closable"
      @close="handleClose"
      :style="{ color: color, 'border-color': color + '15' }"
    >
      <slot></slot>
    </el-tag>
  </div>
</template>
<script setup lang="ts">
const emit = defineEmits(["close"])
defineProps({
  closable: {
    type: Boolean,
    default: false
  },
  color: {
    type: String,
    default: ""
  }
})

const handleClose = (event) => {
  emit("close", event)
}
</script>
<style scoped lang="scss">
:deep(.el-tag .el-tag__close) {
  color: v-bind(color) !important;
}
:deep(.el-tag .el-tag__close:hover) {
  background-color: transparent;
}
</style>

父组件：

<CustomTag
                  class="tag"
                  v-for="item in showTags"
                  :key="item.tagId"
                  :color="item.color"
                  affect="dark"
                  closable
                  style="margin-right: 8px"
                  @close="deleteShowTag(item.tagId)"
                >
                  {{ item.name }}
                </CustomTag>