vue3 组件篇 tag

组件介绍

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

1. 标签显示:

   • “Tag” 组件通常以文本或小图标的形式显示，用于表示某种属性、状态、分类或标识。这些标签可以与内容、数据或元素相关联。

2. 多选和单选:

   • “Tag” 组件通常支持多选和单选模式。在多选模式下，用户可以选择多个标签，而在单选模式下，用户只能选择一个标签。

3. 可关闭标签:

   • 一些 “Tag” 组件支持可关闭标签，允许用户关闭已选择的标签，特别是在多选模式下。

4. 标签颜色:

   • “Tag” 组件通常支持设置标签的颜色，以便更好地区分不同的标签类型或状态。

5. 自定义样式:

   • 开发人员通常可以自定义 “Tag” 组件的样式，包括背景色、文本颜色、边框等。

6. 事件处理:

   • “Tag” 组件通常支持事件处理，开发人员可以监听用户的点击或关闭操作，并执行自定义操作。

7. 响应式设计:

   • “Tag” 组件通常支持响应式设计，以适应不同屏幕尺寸和设备类型。

8. 可访问性:

   • 良好的 “Tag” 组件应该考虑到可访问性，以确保它对于使用辅助技术的用户也是可访问的。

9. 标签云:

   • 在某些情况下，多个标签可以以云状的形式呈现，这称为 “标签云”，用于显示常见标签或关键词。

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

开发思路

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

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

组件安装与使用

需要先安装vue3-dxui

yarn add vue3-dxui
1

或者

npm install vue3-dxui
1

全局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')
1
2
3
4
5
6
7

按需引入

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

export default {
  components: {
  	Tag
  }
}
</script>
1
2
3
4
5
6
7
8
9

标准用法

<Tag>12346</Tag>
1

自定义背景色和字体颜色

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

点击和关闭的回调

点击回调

          <Tag @tagClick='handleClick'>点击回调</Tag>
          <script>
          export default {
            components: {
              Tag
            },
            setup() {
              const handleClick = () => {
                alert('你点击了标签')
              }
              return {
                handleClick
              }
            }
          }
          </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

关闭回调

          <Tag @closeClick='closeClick' closable>点击回调</Tag>
          <script>
          export default {
            components: {
              Tag
            },
            setup() {
              const closeClick = () => {
                alert('你关掉了标签')
              }
              return {
                closeClick
              }
            }
          }
          </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

组件代码

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

参数说明

事件

关于dxui组件库

dxui组件库是我个人搭建的vue3 前端交互组件库，倾向于pc网站的交互模式。

1. 如果你有任何问题，请在博客下方评论留言，我尽可能24小时内回复。
2. dxui新上线的官网域名变更 http://dxui.cn
3. npm 官方链接 https://www.npmjs.com/package/vue3-dxui
4. 如果你想看完整源码 https://github.com/757363985/dxui