文章目录

  • 组件介绍
  • 开发思路
  • 组件安装与使用
  • 标准用法
  • 自定义背景色和字体颜色
  • 点击和关闭的回调
  • 组件代码
  • 参数说明
  • 事件
  • 关于dxui组件库

组件介绍

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

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

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

开发思路

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

  1. 能删除
  2. 能自定义背景,颜色,甚至提供部分形状可供选择
  3. tag的内容能够完全自定义
  4. 删除或者点击的回调,(如果是点击的回调,更像一个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>

标准用法vue element tabs组件_vue.js

<Tag>12346</Tag>

自定义背景色和字体颜色vue element tabs组件_vue.js_02

<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

当tag被关闭时触发

@tagClick

当tag被点击时触发