vue3 组件篇 tag

tag组件，是前端开发常用组件之一，无论是移动端，还是pc端，我们都能经常看到。tag组件的交互也比较简单，需要实现的功能如下能删除能自定义背景，颜色，甚至提供部分形状可供选择tag的内容能够完全自定义删除或者点击的回调，（如果是点击的回调，更像一个button）

可缺不可滥

2269人浏览 · 2022-11-30 17:35:50

可缺不可滥 · 2022-11-30 17:35:50 发布

文章目录

组件介绍

“Tag” 组件是一种常见的用户界面元素，通常用于显示标签或标记，以标识或分类内容、数据、选项或元素。标签通常用于给用户提供快速的视觉参考，帮助他们理解、筛选、组织或分类信息。以下是关于 “Tag” 组件的介绍和特点：

标签显示:
- “Tag” 组件通常以文本或小图标的形式显示，用于表示某种属性、状态、分类或标识。这些标签可以与内容、数据或元素相关联。
多选和单选:
- “Tag” 组件通常支持多选和单选模式。在多选模式下，用户可以选择多个标签，而在单选模式下，用户只能选择一个标签。
可关闭标签:
- 一些 “Tag” 组件支持可关闭标签，允许用户关闭已选择的标签，特别是在多选模式下。
标签颜色:
- “Tag” 组件通常支持设置标签的颜色，以便更好地区分不同的标签类型或状态。
自定义样式:
- 开发人员通常可以自定义 “Tag” 组件的样式，包括背景色、文本颜色、边框等。
事件处理:
- “Tag” 组件通常支持事件处理，开发人员可以监听用户的点击或关闭操作，并执行自定义操作。
响应式设计:
- “Tag” 组件通常支持响应式设计，以适应不同屏幕尺寸和设备类型。
可访问性:
- 良好的 “Tag” 组件应该考虑到可访问性，以确保它对于使用辅助技术的用户也是可访问的。
标签云:
- 在某些情况下，多个标签可以以云状的形式呈现，这称为 “标签云”，用于显示常见标签或关键词。

“Tag” 组件在许多应用程序中都有广泛的应用，用于帮助用户理解和浏览内容、分类信息、筛选数据等。它们通常出现在文章标签、商品分类、筛选条件、用户配置选项等场景中。许多前端框架和库提供了 “Tag” 组件的实现，或者你可以自行编写代码来创建适合你应用程序需求的标签功能。。

开发思路

tag组件的交互也比较简单，需要实现的功能如下

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

组件安装与使用

需要先安装vue3-dxui

yarn add vue3-dxui

或者

npm install vue3-dxui

全局main.ts中引入css

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'vue3-dxui/dxui/dxui.css'

createApp(App).use(store).use(router).mount('#app')

按需引入

<script>
import { Tag } from 'vue3-dxui'

export default {
  components: {
  	Tag
  }
}
</script>

标准用法

在这里插入图片描述

<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