【区分vue2和vue3下的element UI Tag 标签组件，分别详细介绍属性，事件，方法如何使用，并举例】

最新推荐文章于 2025-05-07 19:22:48 发布

加仑小铁

最新推荐文章于 2025-05-07 19:22:48 发布

阅读量848

点赞数 15

CC 4.0 BY-SA版权

分类专栏： Element 文章标签： ui vue.js javascript

本文链接：https://blog.youkuaiyun.com/xiejunlan/article/details/139731095

Element UI（Vue 2）和 Element Plus（Vue 3）都提供了 Tag 标签组件，但两者之间存在一些差异，特别是在语法和可用特性上。以下将分别介绍这两个版本中的 Tag 组件的属性、事件和方法，并给出使用示例。

Vue 2 + Element UI Tag

属性 (Attributes)

type: 类型，例如 success、info、warning、danger 或自定义颜色。
closable: 是否可关闭。
disable-transitions: 是否禁用过渡动画。
hit: 是否有点击反馈效果。
color: 自定义颜色。

事件 (Events)

close: 关闭时的回调函数。
click: 点击 Tag 时的回调函数。

方法 (Methods)

Element UI 的 Tag 组件没有直接暴露方法供调用。但你可以通过事件来响应用户操作。

示例

<template>
  <el-tag
    type="success"
    closable
    @close="handleClose"
    @click="handleClick"
  >
    成功
  </el-t

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

加仑小铁

关注关注

15
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

Vue2基础笔记

weixin_68658847的博客

02-07

2010

vue2基础笔记

VUE面试题（3）--vue常见面试题

MingL520的博客

05-21

727

除了核心功能默认内置的指令 (v-model和v-show)，Vue 也允许注册自定义指令。[info]举个聚焦输入框的例子，如下：autofocus在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。// 注册一个全局自定义指令 `v-focus`// 当被绑定的元素插入到 DOM 中时……// 聚焦元素el.focus()})如果想注册局部指令，组件中也接受一个directivesfocus: {// 指令的定义。

1 条评论您还未登录，请先登录后发表或查看评论

基于vue 的标签组件

09-14

基于vue 封装的标签组件。可以实现标签的动态新增，双击可以修改，还可以删除

ElementUI Tag标签

weixin_42594143的博客

03-04

918

ElementUI 提示框单例控制：从 2.X 到 3.X 的完整解决方案

最新发布

wujiayu31415的博客

05-07

977

但在某些场景下，我们不希望它们。Element Plus（基于 Vue 3）对。ElementUI 2.X 的设计初衷是。在前端开发中，ElementUI 的。在 2.X 版本支持全局。的支持不同，需分别处理。"，获取更多前端开发干货！关注我的微信公众号"

element-ui的tag标签使用

weixin_46421821的博客

03-25

4490

<el-table-column prop="level" label="权限等级"> <template slot-scope="scope"> <el-tag v-if="scope.row.level==='0'">一级</el-tag> <el-tag v-else-if="scope.row.level==='1'" ty...

【Vue3 Element UI - Plus + Tyscript 实现Tags标签输入及回显】

qq_45973421的博客

03-06

1410

是一个常见的功能需求。用户可以通过输入框添加标签，并通过关闭按钮删除标签，同时还需要支持标签数据的提交和回显。本文将详细介绍如何使用。通过以上实现，我们完成了动态标签的添加、删除、提交和回显功能。用户可以通过输入框添加新标签，并通过关闭按钮删除标签。希望这篇文章对你有帮助！如果有任何问题，欢迎在评论区留言讨论~在编辑表单时，需要从接口获取已保存的标签数据并回显到页面上。在开发后台管理系统或表单页面时，渲染标签列表，并使用。动态标签的核心是通过。字段随表单一起提交。

vue3 组件篇 tag

秋来九月八

11-30

3036

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

【区分vue2和vue3下的element UI Cascader 级联选择器组件，分别详细介绍属性，事件，方法如何使用，并举例】

xiejunlan的博客

06-04

1243

在Vue 2的Element UI和Vue 3的Element Plus中，（级联选择器）组件用于从嵌套的数据中进行选择。以下是对这两个版本下组件的属性、事件和方法的详细介绍，并附带示例。

【区分vue2和vue3下的element UI Select 选择器组件，分别详细介绍属性，事件，方法如何使用，并举例】

xiejunlan的博客

05-31

1006

在 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中，el-select选择器组件是一个常用的表单控件，用于从一组选项中选择一个或多个值。以下是对这两个版本下el-select组件的属性、事件和方法的详细介绍，并附带示例。

vue3实现tags

a1831511974的博客

11-20

2576

首先先用el-tag搭好架子 <template> <div class="tags">  <el-tag :key="tag.name" v-for="(tag,index) in tags" :closable="tag.name !== 'home'" :disable-transitions="false" @close="handleClos

vue组件系列之TagsInput详解

10-15

TagsInput 是一种可编辑的输入框，通过回车或者分号来分割每个标签，用回退键删除上一个标签。这篇文章主要介绍了vue组件TagsInput的相关知识,需要的朋友可以参考下

vue-input-tag, Vue.js 2.0输入标记组件.zip

09-17

vue-input-tag, Vue.js 2.0输入标记组件 vue-input-tagVue.js 2.0输入标记组件在反应tagsinput中激发。安装 NPMnpm install vue-input-tag --saveregiste

Vue自定义Tag标签

ljw的博客

06-01

4511

1、需求：项目中有好几处用到标签组，有单行、多行、单行显示不下省略（鼠标放上去提示）等等需求，为了方便使用提取为组件。单行样式如下： 2、在项目的components文件下新建文件夹

Vue3标签（Tag）

Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者

07-25

2019

进行标记和分类的小标签，支持：多彩标签；预设状态的标签；动态添加和删除；三种尺寸；自定义动态标签排列；无边框；总之，功能丰富，简单易用😁😁

vue3中，封装tag标签列中，单击进行切换分类

weixin_44867717的博客

12-07

575

tag

vue中实现tag标签

热门推荐

07-09

1万+

1，安装scss插件 cnpm i node-sasssass-loader -S 2，安装element-ui cnpm i element-ui -S main.js中引入element-ui import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(Ele...

vuejs el标签_标签输入的VueJs

cuk5239的博客

07-28

313

vuejs el标签 Vue标签输入 (vue-tags-input) VueJs for tags input. 标签输入的VueJs。 View Demo 查看演示 Download Source 下载源安装 (Installation) 可通过以下方式获得： (Available through:)$ yarn add vue2-tags-input $ npm install ...

使用elementUI的el-tag实现菜单tab标签，实现右键菜单关闭当前，关闭其他、关闭全部以及超出长度是隐藏并可左右滑动功能。

徐忠炜的博客

08-25

1万+

1. 效果展示

概述：针对起网名难的问题，根据用户的偏好以及用户的行为，基于Spring Boot + Vue前后端分离架构,搭建网名推荐系统，实现对用户的网名推荐以及网名的管理。技术栈：Spring Boot、Vue 3、Element Plus、MySQL、JWT、MyBatis-Plus、Redis 主要工作： 1.基于 Spring Boot 设计后端RESTful API，采用 MyBatis-Plus 实现动态SQL与多表联查，通过 JWT 完成用户认证与权限控制，结合 Spring Security 保障接口安全性，设计并实现基于标签的推荐名称算法。 2.使用 Vue 3 搭建前端应用，通过 Axios 封装请求拦截器实现Token自动刷新，配合Element Plus 组件库完成交互界面开发。 3.设计 MySQL 数据库表结构，通过 Redis 缓存热点数据提升查询性能请详细解释里面所有用到的技术

03-14

<think>好的，我现在需要详细解释用户提到的网名推荐系统所使用的各个技术。首先，我得确保自己理解每个技术的作用以及它们在整个系统中的应用场景。让我一个一个来看。首先是Spring Boot，这是后端开发的核心框架，用来简化Spring应用的初始搭建和开发。用户提到用Spring Boot设计RESTful API，所以需要解释RESTful是什么，以及Spring Boot如何帮助实现。同时，可能还要提到内嵌的Tomcat和自动配置特性。接下来是MyBatis-Plus，这是一个增强版的MyBatis，用于简化数据库操作。用户提到动态SQL和多表联查，所以需要说明MyBatis-Plus如何简化这些操作，比如通过条件构造器或者注解方式实现联表查询，避免手写复杂SQL。然后是JWT，用于用户认证和权限控制。需要解释JWT的结构和流程，比如用户登录后生成Token，后续请求携带Token进行验证，以及如何结合Spring Security来管理权限。可能需要提到JWT的优点，比如无状态、适合分布式系统。 Spring Security是安全框架，用来保障接口安全性。这里需要说明它如何处理认证和授权，如何与JWT集成，比如自定义过滤器来校验Token，并设置用户权限到SecurityContext中。接下来是Vue 3，前端框架，用于构建用户界面。需要强调其响应式系统和组合式API的优势，以及如何提升开发效率。Element Plus作为UI组件库，提供现成的组件，比如表单、表格，方便快速搭建界面。 Axios用于处理HTTP请求，用户提到封装请求拦截器实现Token自动刷新。需要解释拦截器的作用，比如在请求头中添加Token，或者响应拦截器中处理401状态码，自动刷新Token并重发请求。 MySQL作为关系型数据库，需要设计合理的表结构。比如用户表、网名表、标签表等，以及多对多关系。可能需要举例说明如何设计这些表，比如用户偏好标签关联表。 Redis用于缓存热点数据，比如频繁访问的网名列表或用户偏好数据，减少数据库查询压力。需要解释缓存策略，比如设置过期时间，如何保证数据一致性。技术栈中的各个部分如何协同工作：前端Vue通过Axios调用后端Spring Boot的REST API，Spring Boot处理业务逻辑，使用MyBatis-Plus操作MySQL，JWT和Spring Security管理安全，Redis缓存数据。这样的架构前后端分离，职责清晰，易于维护和扩展。可能还需要考虑一些细节，比如动态SQL的具体例子，比如根据用户选择的标签组合动态生成查询条件；多表联查如何使用MyBatis-Plus的注解或XML配置实现；Spring Security的配置流程，如何与JWT整合；Vue 3的组合式API如何组织代码，比如使用setup函数；Element Plus的哪些组件被使用，如表单验证、分页组件等；Redis的数据结构选择，比如使用String存储序列化对象，或者Hash存储字段。同时，要确保解释每个技术时，突出其在项目中的具体应用，而不仅仅是泛泛而谈。例如，JWT的具体使用流程，用户登录后生成Token，前端存储Token在localStorage中，每次请求携带，后端验证Token的有效性，并从中提取用户信息进行权限判断。可能遇到的挑战包括Token刷新机制，如何在不影响用户体验的情况下，在Token快过期时通过拦截器自动刷新，这需要后端提供刷新Token的接口，并在Axios拦截器中处理。另外，推荐算法的部分提到基于标签的推荐名称算法，可能需要解释如何根据用户偏好标签，从数据库中筛选匹配的网名，或者利用更复杂的算法，比如协同过滤，但用户这里可能只是简单的标签匹配，所以需要结合MyBatis-Plus的动态查询来实现。数据库设计方面，可能需要ER图，但这里只需要解释表结构设计，如用户表（id、用户名、密码哈希、偏好标签等），网名表（id、名称、标签、创建时间等），标签表（id、标签名），以及关联表。缓存方面，例如当用户请求推荐网名时，先查Redis是否有缓存，没有则查数据库并存入Redis。总之，需要将每个技术点拆解，说明其在项目中的具体作用，以及如何与其他技术协同工作，确保解释清晰且符合用户提供的技术栈信息。</think>针对网名推荐系统的技术栈，以下从后端到前端逐项详细解析： --- ### **1. 后端技术栈** #### **1.1 Spring Boot** - **作用**：基于Spring的快速开发框架，简化配置，内嵌Tomcat服务器，支持快速构建RESTful API。 - **应用场景**： - 通过注解（如`@RestController`）定义接口，响应前端请求。 - 集成Spring Security和JWT实现安全认证。 - 使用`Spring Data`简化数据库操作，结合MyBatis-Plus动态生成SQL。 #### **1.2 MyBatis-Plus** - **作用**：MyBatis的增强工具，提供通用CRUD操作、动态SQL生成、分页插件等功能。 - **应用场景**： - 多表联查：通过`@TableField`注解映射关联字段，或编写XML文件定义复杂查询。 - 动态SQL：使用`QueryWrapper`动态拼接查询条件（如根据用户偏好标签筛选网名）。 - 示例： ```java QueryWrapper<Nickname> wrapper = new QueryWrapper<>(); wrapper.in("tag", userTags); // 根据用户标签查询网名 List<Nickname> list = nicknameMapper.selectList(wrapper); ``` #### **1.3 JWT（JSON Web Token）** - **作用**：无状态令牌，用于用户身份验证和权限控制。 - **流程**： 1. 用户登录成功后，后端生成Token（包含用户ID、角色等信息）。 2. 前端存储Token（如LocalStorage），后续请求通过`Authorization`头携带。 3. 后端通过过滤器校验Token合法性，并解析用户信息。 #### **1.4 Spring Security** - **作用**：安全框架，管理接口权限和认证流程。 - **整合JWT**： - 自定义`JwtAuthenticationFilter`，拦截请求并验证Token。 - 配置白名单（如登录接口无需鉴权）。 - 通过`@PreAuthorize`注解控制接口访问权限（如仅管理员可管理网名）。 #### **1.5 推荐算法（基于标签）** - **实现逻辑**： 1. 用户注册时选择兴趣标签（如“古风”“科技”）。 2. 根据标签匹配网名： - **精确匹配**：直接查询包含用户标签的网名。 - **权重排序**：计算标签重合度，返回Top-N结果。 3. 缓存推荐结果至Redis，减少数据库压力。 --- ### **2. 前端技术栈** #### **2.1 Vue 3** - **作用**：渐进式JavaScript框架，支持响应式数据绑定和组件化开发。 - **关键特性**： - **组合式API**：通过`setup()`函数组织逻辑代码，提升复用性。 - **路由管理**：使用Vue Router实现页面跳转（如登录页→推荐页）。 - **状态管理**：Pinia或Vuex管理全局状态（如用户登录状态）。 #### **2.2 Element Plus** - **作用**：基于Vue 3的UI组件库，提供丰富的交互组件。 - **典型组件**： - `el-form`：表单组件，用于用户注册/登录。 - `el-table`：展示网名列表，支持分页和排序。 - `el-tag`：可视化显示网名标签。 #### **2.3 Axios** - **作用**：HTTP客户端，封装请求拦截器实现Token自动刷新。 - **关键配置**： ```javascript // 请求拦截器：添加Token到Header axios.interceptors.request.use(config => { config.headers.Authorization = localStorage.getItem('token'); return config; }); // 响应拦截器：Token过期自动刷新 axios.interceptors.response.use( response => response, error => { if (error.response.status === 401) { refreshToken().then(newToken => { localStorage.setItem('token', newToken); retryOriginalRequest(error.config); }); } } ); ``` --- ### **3. 数据库与缓存** #### **3.1 MySQL** - **表结构设计**： - **用户表**：`id, username, password_hash, tags`（偏好标签）。 - **网名表**：`id, name, tags, create_time`。 - **关联表**：`user_tag`（用户-标签多对多关系）。 #### **3.2 Redis** - **作用**：缓存热点数据（如高频访问的网名列表），提升查询性能。 - **典型场景**： - 键设计：`nickname:tag:古风`，存储对应标签的网名ID列表。 - 数据同步：网名更新时，删除旧缓存，保证一致性。 --- ### **4. 系统架构图** ``` 用户请求 → Vue前端 → Axios → Spring Boot后端 → (JWT鉴权 → Spring Security) ↓ ↓ Redis缓存 ← MyBatis-Plus → MySQL数据库 ``` --- ### **5. 技术优势** - **前后端分离**：职责清晰，前端专注交互，后端专注逻辑。 - **高性能**：Redis减少数据库IO，MyBatis-Plus优化SQL效率。 - **扩展性**：Spring Boot微服务架构易于横向扩展。