组件介绍

tag组件，是前端开发常用组件之一，无论是移动端，还是pc端，我们都能经常看到。tag组件的交互也比较简单，需要实现的功能如下

1. 能删除
2. 能自定义背景，颜色，甚至提供部分形状可供选择
3. tag的内容能够完全自定义
4. 删除或者点击的回调，（如果是点击的回调，更像一个button）

标准用法

<Tag>12346</Tag>

自定义背景色和字体颜色

<Tag :style="{color: '#c41d7f', borderColor: '#ffadd2',background: '#fff0f6' }">12346</Tag>
<Tag :style="{color: '#c41d7f', borderColor: '#ffadd2',background: '#fff0f6' }" closable>12346</Tag>

点击和关闭的回调

点击回调

          <Tag @tagClick='handleClick'>点击回调</Tag>
          <script>
          export default {
            components: {
              Tag
            },
            setup() {
              const handleClick = () => {
                alert('你点击了标签')
              }
              return {
                handleClick
              }
            }
          }
          </script>

关闭回调

          <Tag @closeClick='closeClick' closable>点击回调</Tag>
          <script>
          export default {
            components: {
              Tag
            },
            setup() {
              const closeClick = () => {
                alert('你关掉了标签')
              }
              return {
                closeClick
              }
            }
          }
          </script>

组件代码

<template>
  <div
    @click="tagClick"
    v-if="tagShow"
    class="dx-tag-warpper"
    :class="colorTagClass"
    :style="style"
  >
    <div class="dx-tag-content">
      <slot />
    </div>
    <span v-if="closable && !showTagClose" class="dx-tag-close" @click="closeTag">X</span>
    <div v-if="showTagClose && closable" class="dx-tag-close" @click="closeTag">
      <slot name="tagClose" />
    </div>
  </div>
</template>

<script lang="ts">
import {
  PropType,
  ref,
  CSSProperties,
  SetupContext
} from 'vue'
// import { useRouter } from 'vue-router'
import { useShowSlotOrDefaultNode } from '@/common/index'

import { Data } from './types/index'

export default {
  props: {
    // 标签是否可以关闭
    closable: {
      require: false,
      default: false,
      type: Boolean
    },
    style: Object as PropType<CSSProperties>,
    // 彩色标签，内置了几种颜色，当然也可以自定义色彩
    color: {
      require: false,
      default: '',
      type: String
    }
  },
  setup(props: Data, ctx: SetupContext) {
    const tagShow = ref(true)
    const colorTagClass = ref(`dx-color-tag-${props.color}`)

    const showTagClose = useShowSlotOrDefaultNode(ctx, 'tagClose')

    const closeTag = (e: Event) => {
      tagShow.value = false
      // 防止点击关闭时也触发tagClick
      e.stopPropagation()
      ctx.emit('closeClick', e)
    }

    const tagClick = (e: Event) => {
      ctx.emit('tagClick', e)
    }

    return {
      tagShow,
      closeTag,
      tagClick,
      colorTagClass,
      showTagClose
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/scss/layout.scss';

.dx-tag-warpper {
  background: $background-color;
  border: $border;
  border-radius: 2px;
  display: inline-block;
  margin: 0 8px 8px 0;
  padding: 2px 8px;
  font-size: 12px;
  .dx-tag-content {
    display: inline-block;
  }
  .dx-tag-close {
    display: inline-block;
    margin-left: 4px;
    cursor: pointer;
  }
}

.dx-color-tag-purple {
  border: 1px solid $purple-middle-color;
  color: $purple-color;
  background: $purple-light-color;
}

.dx-color-tag-red {
  border: 1px solid $red-middle-color;
  color: $red-color;
  background: $red-light-color;
}

.dx-color-tag-blue {
  border: 1px solid $blue-middle-color;
  color: $blue-color;
  background: $blue-light-color;
}

.dx-color-tag-green {
  border: 1px solid $green-middle-color;
  color: $green-color;
  background: $green-light-color;
}

.dx-color-tag-orange {
  border: 1px solid $orange-middle-color;
  color: $orange-color;
  background: $orange-light-color;
}
</style>

参数说明

参数名称	说明
closable	标签是否可以关闭 boolean 默认为false
color	彩色标签，内置了几种颜色，当然也可以自定义色彩 purple red blue green orange

两种事件
closeClick 和 tagClick
closeClick 当tag被关闭时触发
tagClick 当tag被点击时触发

关于dxui组件库

如果你有任何疑问，欢迎发送你的问题至我的邮箱757363985@qq.com.
你也可以前往dxui的线上网站，组件还有更多用法和设计，体验一下实际使用的效果. http://www.dxyx-together.cn/#/home/tag
后面等时机成熟的时候，我会将源码github库与大家一同分享.