组件库UI【LUI】【tag标签组件】

tag标签组件

<LTag name="hello" @close="deleteType(tag.id, true)"></LTag>

<template>
  <div class="flex items-center justify-between tag-wrap mb-1">
    <div class="overflow-ellipsis flex-1 pl-1" :title="name">{{name}}</div>
    <div :style="{width: '16px'}" class="cursor-pointer close flex items-center justify-center pr-1" @click="closeTag" v-if="closable">
      <el-icon class="Close" size="14px">
        <Close />
      </el-icon>
      <el-icon class="CircleCloseFilled" size="14px">
        <CircleCloseFilled />
      </el-icon>
    </div>
  </div>
</template>
<script setup lang="ts">
import { Close, CircleCloseFilled } from '@element-plus/icons-vue'
import { getInstance } from '@utils/common';

const { $emit } = getInstance()
const props = defineProps({
  name: {
    type: String
  },
  closable: {
    type: Boolean,
    default: false
  }
})
const closeTag = () => {
  $emit('close')
}
</script>
<style lang="scss">
.tag-wrap{
  border: 1px solid var(--el-color-primary-light-8);
  width: 100%;
  color: var(--color-main);
  font-size: 12px;
}

.close{
  &:hover{
    color: var(--color-main);
    .CircleCloseFilled{
      display: block;
    }
    .Close{
      display: none;
    }
  }
  .CircleCloseFilled{
    display: none;
  }
}
</style>