自定义封装标签组件

1，根据公司需求自定义标签组件

<!-- 封装自定义tag标签 -->
<template>
//第一种鼠标经过显示删除按钮
  <span v-if="isclose" class='cls' :class="getColor(props.bgcolor)"  @mouseover="isover()" @mouseout="isout()">
    {{props.name}}
    <el-icon v-show="showClose" class="icon_clo" @click="handlerCloseTags()">
      <CircleCloseFilled />
    </el-icon>
  </span>
 // 第二种
  <span v-else class='cls' :class="getColor(props.bgcolor)">
    {{ props.name + '&nbsp;'}}
  </span>
</template>
<script setup>
import { ref } from 'vue';
const emit = defineEmits(['closeTags']);
const props = defineProps({
  name: {
    type: String,
    default: '' // 设置默认值为 false
  },
  bgcolor: {
    type: String,
    default: '' // 设置默认值为 false
  },
  isclose: {
    type: Boolean,
    default: false // 设置默认值为 false
  }
})
const showClose = ref(false);
const getColor = (color) => {
  if (color === '#E59D9F') {
    return 'cls1';
  } else if (color === '#E5A494') {
    return 'cls2';
  } else if (color === '#99A9F0') {
    return 'cls3';
  } else if (color === '#8CC49F') {
    return 'cls4';
  } else if (color === '#AEAAEF') {
    return 'cls5';
  } else if (color === '#9DD28E') {
    return 'cls6';
  } else if (color === '#8AC5F2') {
    return 'cls7';
  } else {
    return ''; // 默认返回空字符串或其他默认类名
  }
};
const isover = (index) => {
  showClose.value = true;
};
const isout = () => {
  showClose.value = false;
};
const handlerCloseTags = () => {
  emit('closeTags');
};
</script>
<style lang="scss" scoped>
.cls {
  min-width: 38px;
  text-align: center;
  padding: 4px 8px;
  border-radius: 4px;
  margin-right: 5px;
  display: inline-block;
  position: relative;
}
.cls1 {
  color: #E6555A;
  background: rgba(230, 85, 90, 0.2);
}
.cls2 {
  color: #E56343;
  background: rgba(229, 99, 67, 0.2);
}
.cls3 {
  color: #99a9f0;
  background: rgba(153, 169, 240, 0.2);
}
.cls4 {
  color: #8cc49f;
  background: rgba(140, 196, 159, 0.2);
}
.cls5 {
  color: #aeaaef;
  background: rgba(174, 170, 239, 0.2);
}
.cls6 {
  color: #9dd28e;
  background: rgba(157, 210, 142, 0.2);
}
.cls7 {
  color: #8ac5f2;
  background: rgba(138, 197, 242, 0.2);
}
.icon_clo {
  position: absolute;
  right: -5px;
  top: -5px;
  font-size: 12px;
  cursor: pointer;
  // color: red;
}
</style>

在需要的页面中引入

//tagsList 数据中一定要有name 和colo属性
<hpTag v-for="(item, index) in tagsList" :key="index" :isclose='true' :name="item.tagName"
:bgcolor="item.color" @closeTags="handlerCloseTags(item)"></hpTag>

显示效果