Tag标签的使用

embedded/2025/2/26 5:52:59/

一个非常适合运用在vue项目中的组件：Tag标签。

目录

一、准备工作

1、安装element-plus库

2、配置element-plus库

二、Tag标签入门

1、打开element官网，搜索tag标签

2、体验Tag标签的基础用法

三、Tag标签进阶训练1

1、定义一个数组，并使用v-for指令，渲染Tag标签

2、查看运行效果

四、Tag标签进阶训练2

1、安装、配置Pinia

pinia-toc" name="tableOfContents" style="margin-left:80px">①安装pinia

pinia%E5%88%B0%E9%A1%B9%E7%9B%AE%E4%B8%AD-toc" name="tableOfContents" style="margin-left:80px">②配置pinia到项目中

pinia%E5%AD%98%E5%82%A8%E6%89%80%E9%9C%80%E7%9A%84%E6%95%B0%E6%8D%AE%E5%92%8C%E6%96%B9%E6%B3%95-toc" name="tableOfContents" style="margin-left:40px">2、使用pinia存储所需的数据和方法

①在src路径下，创建TagStore.js

②在TagStore.js中，编写所需的数据和方法

3、在components目录下，创建自定义组件Tag.vue

4、在所需页面中，使用自定义组件Tag.vue

5、给路由添加meta属性

6、效果展示

五、完善四的功能

1、功能1：点击Tag标签，跳转到对应的路由（页面）。

效果展示

2、功能2：点击Tag标签的关闭按钮，所触发的事件

效果展示

pinia%E7%9A%84TagStore.js%E7%9A%84tags%E6%95%B0%E7%BB%84%E4%B8%AD%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%EF%BC%8C%E7%94%A8%E6%9D%A5%E6%B8%B2%E6%9F%93Tag%E6%A0%87%E7%AD%BE-toc" name="tableOfContents" style="margin-left:40px">3、功能3：点击左侧菜单栏，就能往pinia的TagStore.js的tags数组中添加一个对象，用来渲染Tag标签

效果展示

pinia%E7%9A%84%E6%95%B0%E6%8D%AE%E5%B0%B1%E4%BC%9A%E9%87%8D%E7%BD%AE%EF%BC%8C%E5%9B%A0%E6%AD%A4%E9%9C%80%E8%A6%81%E5%86%8D%E4%B8%8B%E8%BD%BD%E4%B8%80%E4%B8%AApinia%E6%8C%81%E4%B9%85%E5%8C%96%E6%8F%92%E4%BB%B6-toc" name="tableOfContents" style="margin-left:0px">六、最重要的一点：Pinia默认不会持久化数据，因此每当一刷新页面，pinia的数据就会重置，因此需要再下载一个pinia持久化插件

pinia%E6%8C%81%E4%B9%85%E5%8C%96%E6%8F%92%E4%BB%B6pinia-plugin-persistedstate-toc" name="tableOfContents" style="margin-left:40px">1、下载pinia持久化插件pinia-plugin-persistedstate

pinia%E4%BD%BF%E7%94%A8%E8%AF%A5%E6%8F%92%E4%BB%B6-toc" name="tableOfContents" style="margin-left:40px">2、在main.js中，令pinia使用该插件

pinia%E7%9A%84js%E6%96%87%E4%BB%B6%E4%B8%AD%EF%BC%8C%E5%BC%80%E5%90%AF%E6%8C%81%E4%B9%85%E5%8C%96-toc" name="tableOfContents" style="margin-left:40px">3、在pinia的js文件中，开启持久化

一、准备工作

1、安装element-plus库

npm install element-plus              基于vue3的组件库（按钮、表单等）

2、配置element-plus库

二、Tag标签入门

1、打开element官网，搜索tag标签

2、体验Tag标签的基础用法

<el-tag>标签一</el-tag>
<el-tag type="success">标签二</el-tag>
<el-tag type="info">标签三</el-tag>
<el-tag type="warning">标签四</el-tag>
<el-tag type="danger">标签五</el-tag>

将上述代码直接粘贴到项目中，如下：

查看页面效果：

可见，基本雏形已经出现。其中type代表着每个Tag标签的类型（type不同，颜色就不同）。

三、Tag标签进阶训练1

1、定义一个数组，并使用v-for指令，渲染Tag标签

其中，

v-for=“tag in tags”表示从tags数组中，依次取出对象tag，因此tags数组中有多少个对象，就会渲染多少条<el-tag></el-tag>

:key表示每一个标签都是互不相同的，因此可以使用tag.name来充当。

closable=“true”表示每一个标签都是可以通过叉号来关闭的。

:type=“tag.type”表示根据tag.type动态渲染标签的类型（颜色）

{{ tag.name}}表示根据tag.name给标签名进行动态赋值。

2、查看运行效果

四、Tag标签进阶训练2

1、安装、配置Pinia

pinia" name="%E2%91%A0%E5%AE%89%E8%A3%85pinia">①安装pinia

# 下载pinia的依赖到项目中
npm install pinia

pinia%E5%88%B0%E9%A1%B9%E7%9B%AE%E4%B8%AD" name="%E2%91%A1%E9%85%8D%E7%BD%AEpinia%E5%88%B0%E9%A1%B9%E7%9B%AE%E4%B8%AD">②配置pinia到项目中

pinia%E5%AD%98%E5%82%A8%E6%89%80%E9%9C%80%E7%9A%84%E6%95%B0%E6%8D%AE%E5%92%8C%E6%96%B9%E6%B3%95" name="2%E3%80%81%E4%BD%BF%E7%94%A8pinia%E5%AD%98%E5%82%A8%E6%89%80%E9%9C%80%E7%9A%84%E6%95%B0%E6%8D%AE%E5%92%8C%E6%96%B9%E6%B3%95">2、使用pinia存储所需的数据和方法

①在src路径下，创建TagStore.js

②在TagStore.js中，编写所需的数据和方法

//该方法用于实例化一个存储信息的对象
import {defineStore} from 'pinia'
import {ref} from 'vue'//实例化一个存储信息的对象tagStore
const tagStore = defineStore("tagStore",()=>{//tagStore实体中的属性1：tags数组，里面的元素是对象，对应一个Tag标签const tags = ref([{title:'首页',path:'/index',name:'Index',},{title:'窗口挂号',path:'/registration/onsite_registration',name:'onsite_registration',},{title:'窗口退号',path:'/registration/registration_record',name:'registration_record'},{title:'患者查看',path:'/physician/home_medical_record',name:'home_medical_record'},{title:'病例首页',path:'/physician/home_medical_record',name:'home_medical_record'},{title:'开设处方',path:'/physician/write_prescription',name:'write_prescription'},{title:'药房发药',path:'/drugstore/give_medicine',name:'give_medicine'},])//tagStore实体中的属性2：currentMenu，用来记住当前位于哪一个菜单选项const currentMenu = ref(null);//tagStore实体中的方法1：点击某个菜单时，将其添加为tag const setTag = (newTag)=>{//newTag表示传入进来的数组，里面携带着tag对象//alert("新传入的对象是"+JSON.stringify(newTag))//不知道是啥if(newTag.path=='/index'){currentMenu.value=null;}//往tags数组里面添加tag对象else{//查找(找到，则返回对应的index；如果未找到，返回-1)let index = tags.value.findIndex(item=>item.title == newTag.title);//寻找下标的标准：item.title == newTagInfo.title  item指的是tags数组中的每一个对象//alert("index的值是: " + index)//判断是否存在，不存在就加入到tags数组index === -1?tags.value.push(newTag):'';//alert('操作完，TagStore中的tags数组的值是: ' + JSON.stringify(tags.value))}}//tagStore实体中的方法2：移除tagconst removeTag = (removeTagInfo)=>{//-:寻找所要删除的tag在tags列表中的下标let index = tags.value.findIndex(item => item.title == removeTagInfo.title);//-:根据该下标，删除该tagtags.value.splice(index, 1);//从索引index的位置开始，删除1个标签}//返回上述定义的两个属性、两个方法return {tags,currentMenu,setTag,removeTag}},{//persist 选项可以让 Pinia 存储的数据在页面刷新或会话结束后仍然保留。persist:true//意思是持久化}
)//导出(上面起的名字就是tagStore)
export default tagStore

3、在components目录下，创建自定义组件Tag.vue

<template><div class="tags"><el-tagv-for="(tag, index) in tags":key="tag.name":closable="tag.title != '首页'":effect="route.meta.title === tag.title ? 'dark' : 'plain'"type="warning"@click="clickTag(tag, index)"@close="closeTag(tag, index)">{{ tag.title }}</el-tag></div>
</template><script setup>
//获取TagStore.js中的数据和方法
import tagStore from "@/store/TagStore";
import { effect } from "vue";
const tagStoreInfo = tagStore();
//获取TagStore中的tags数组
const tags = tagStoreInfo.tags;
console.log(123456789);//获取路由
import {useRoute, useRouter} from 'vue-router'
const route = useRoute();
const router = useRouter();
//console.log("当前的路由的title(用来渲染Tag标签高亮)是: "+route.meta.title)
</script><style scoped>
.tags {display: flex; /* 设置为弹性盒子 */flex-wrap: wrap;gap: 5px; /* 间隔 */margin-top: 10px; /* 和上面的间距 */
}
</style>

其中，

v-for="(tag, index) in tags"表示从数组tags中，依次取出对象tag，下标index依次为0,1,2,3....

:key="tag.name"表示使用对象tag的name属性，作为每个Tag标签的唯一标识。

:closable="tag.title != '首页'"表示首页不可关闭，而其他页面携带关闭按钮。

:effect="route.meta.title === tag.title ? 'dark' : 'plain'"表示当前路由对应的Tag标签高亮显示，而其他页面是灰暗状态。

type="warning"表示所有的Tag标签的类型为warning，即颜色为黄。

@click="clickTag(tag, index)"代表点击Tag标签时触发的事件。

@close="closeTag(tag, index)"代表关闭Tag标签时触发的事件。

4、在所需页面中，使用自定义组件Tag.vue

①导入自定义组件

<script setup>
//导入Tag组件
import Tag from '@/components/Tag.vue';</script>

②使用自定义组件

5、给路由添加meta属性

:effect="route.meta.title === tag.title ? 'dark' : 'plain'"

就表示了，当前路由对应的Tag标签要高亮显示。

6、效果展示

五、完善四的功能

1、功能1：点击Tag标签，跳转到对应的路由（页面）。

//获取路由
import {useRoute, useRouter} from 'vue-router'
const route = useRoute();
const router = useRouter();
//console.log("当前的路由的title(用来渲染Tag标签高亮)是: "+route.meta.title)//编写点击事件clickTag
const clickTag = (tag, index) => {//alert('Tag标签的信息:' + tag.title + index + tag.path)//跳转路由，到所点击Tag标签的path路径router.push(tag.path)
}

效果展示

2、功能2：点击Tag标签的关闭按钮，所触发的事件

//获取TagStore.js（Pinia）中的数据和方法
import tagStore from "@/store/TagStore";
const tagStoreInfo = tagStore();
//获取TagStore中的tags数组
const tags = tagStoreInfo.tags;//编写关闭事件closeTag(tag, index)
const closeTag = (tag, index) => {//特殊情况:如果关闭的是当前路由对应的那个Tag标签（即：高亮的Tag标签）if(route.meta.title === tag.title){//route.meta.title表示当前路由的标题（这是在路由index.js中定义的）//特殊情况一：如果关闭的是当前路由对应的那个Tag标签（即：高亮的Tag标签）且是最后一个Tag标签，则跳转路由到上一个Tag标签的pathif(index === tags.length-1){//alert("这的确是最后一个Tag标签")//将路由跳转到上一个Tag标签router.push(tags[index-1].path)//移除当前Tag标签tags.splice(index,1)}//特殊情况二：如果关闭的是当前路由对应的那个Tag标签（即：高亮的Tag标签）且不是最后一个Tag标签，则跳转路由到下一个Tag标签的pathelse{//alert("要跳转到" + tags[index+1].title)router.push(tags[index+1].path)//移除当前Tag标签tags.splice(index,1)}}//普通情况：从tags数组中，将下标为index的tag对象移除即可else{tags.splice(index,1)//举例：index为2，则：如果想移除下标为2（第3个）的元素，则需要从第2个开始，移除1个元素。}
}

效果展示

pinia%E7%9A%84TagStore.js%E7%9A%84tags%E6%95%B0%E7%BB%84%E4%B8%AD%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%EF%BC%8C%E7%94%A8%E6%9D%A5%E6%B8%B2%E6%9F%93Tag%E6%A0%87%E7%AD%BE" name="3%E3%80%81%E5%8A%9F%E8%83%BD3%EF%BC%9A%E7%82%B9%E5%87%BB%E5%B7%A6%E4%BE%A7%E8%8F%9C%E5%8D%95%E6%A0%8F%EF%BC%8C%E5%B0%B1%E8%83%BD%E5%BE%80pinia%E7%9A%84TagStore.js%E7%9A%84tags%E6%95%B0%E7%BB%84%E4%B8%AD%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%EF%BC%8C%E7%94%A8%E6%9D%A5%E6%B8%B2%E6%9F%93Tag%E6%A0%87%E7%AD%BE">3、功能3：点击左侧菜单栏，就能往pinia的TagStore.js的tags数组中添加一个对象，用来渲染Tag标签

//获取到pinia的TagStore.js中的数据和方法
import tagStore from "@/store/TagStore";
const tagStoreInfo = tagStore();
//获取TagStore中的tags数组（其实没用上）
const tags = tagStoreInfo.tags;//点击"窗口挂号"，触发事件@click="btn1_1"
const btn1_1 = ()=> {//alert("点击了窗口挂号")//先查看原来的tags数组中有啥对象//alert(tags)//通过TagStore.js提供的setTag方法，向tags数组中添加一个对象const newTag = ref({title:'窗口挂号',path:'/registration/onsite_registration',name:'onsite_registration',})tagStoreInfo.setTag(newTag.value)
}//点击"窗口退号"，触发事件@click="btn1_2"
const btn1_2 = () => {//alert("点击了窗口退号")//先查看原来的tags数组中有啥对象//alert(tags)//通过TagStore.js提供的setTag方法，向tags数组中添加一个对象const newTag = ref({title:'窗口退号',path:'/registration/registration_record',name:'registration_record',})tagStoreInfo.setTag(newTag.value)
}//点击"患者查看"，触发事件@click="btn2_1"
const btn2_1 = () => {const newTag = ref({title:'患者查看',path:'/physician/physician_patient',name:'physician_patient',})tagStoreInfo.setTag(newTag.value)
}//点击"病例首页"，触发事件@click="btn2_2"
const btn2_2 = () => {const newTag = ref({title:'病例首页',path:'/physician/home_medical_record',name:'home_medical_record',})tagStoreInfo.setTag(newTag.value)
}//点击"开设处方"，触发事件@click="btn2_3"
const btn2_3 = () => {const newTag = ref({title:'开设处方',path:'/physician/write_prescription',name:'write_prescription',})tagStoreInfo.setTag(newTag.value)
}//点击"药房发药"，触发事件@click="btn3_1"
const btn3_1 = () => {const newTag = ref({title:'药房发药',path:'/drugstore/give_medicine',name:'give_medicine',})tagStoreInfo.setTag(newTag.value)
}

效果展示

pinia%E7%9A%84%E6%95%B0%E6%8D%AE%E5%B0%B1%E4%BC%9A%E9%87%8D%E7%BD%AE%EF%BC%8C%E5%9B%A0%E6%AD%A4%E9%9C%80%E8%A6%81%E5%86%8D%E4%B8%8B%E8%BD%BD%E4%B8%80%E4%B8%AApinia%E6%8C%81%E4%B9%85%E5%8C%96%E6%8F%92%E4%BB%B6" name="%E5%85%AD%E3%80%81%E6%9C%80%E9%87%8D%E8%A6%81%E7%9A%84%E4%B8%80%E7%82%B9%EF%BC%9APinia%E9%BB%98%E8%AE%A4%E4%B8%8D%E4%BC%9A%E6%8C%81%E4%B9%85%E5%8C%96%E6%95%B0%E6%8D%AE%EF%BC%8C%E5%9B%A0%E6%AD%A4%E6%AF%8F%E5%BD%93%E4%B8%80%E5%88%B7%E6%96%B0%E9%A1%B5%E9%9D%A2%EF%BC%8Cpinia%E7%9A%84%E6%95%B0%E6%8D%AE%E5%B0%B1%E4%BC%9A%E9%87%8D%E7%BD%AE%EF%BC%8C%E5%9B%A0%E6%AD%A4%E9%9C%80%E8%A6%81%E5%86%8D%E4%B8%8B%E8%BD%BD%E4%B8%80%E4%B8%AApinia%E6%8C%81%E4%B9%85%E5%8C%96%E6%8F%92%E4%BB%B6">六、最重要的一点：Pinia默认不会持久化数据，因此每当一刷新页面，pinia的数据就会重置，因此需要再下载一个pinia持久化插件

pinia%E6%8C%81%E4%B9%85%E5%8C%96%E6%8F%92%E4%BB%B6pinia-plugin-persistedstate" name="1%E3%80%81%E4%B8%8B%E8%BD%BDpinia%E6%8C%81%E4%B9%85%E5%8C%96%E6%8F%92%E4%BB%B6pinia-plugin-persistedstate">1、下载pinia持久化插件pinia-plugin-persistedstate

npm install pinia-plugin-persistedstate

pinia%E4%BD%BF%E7%94%A8%E8%AF%A5%E6%8F%92%E4%BB%B6" name="2%E3%80%81%E5%9C%A8main.js%E4%B8%AD%EF%BC%8C%E4%BB%A4pinia%E4%BD%BF%E7%94%A8%E8%AF%A5%E6%8F%92%E4%BB%B6">2、在main.js中，令pinia使用该插件

pinia%E7%9A%84js%E6%96%87%E4%BB%B6%E4%B8%AD%EF%BC%8C%E5%BC%80%E5%90%AF%E6%8C%81%E4%B9%85%E5%8C%96" name="3%E3%80%81%E5%9C%A8pinia%E7%9A%84js%E6%96%87%E4%BB%B6%E4%B8%AD%EF%BC%8C%E5%BC%80%E5%90%AF%E6%8C%81%E4%B9%85%E5%8C%96">3、在pinia的js文件中，开启持久化

以上就是本篇文章的全部内容，想了解更多的前端内容，请关注本博主~~


http://www.ppmy.cn/embedded/167206.html

相关文章

【论文解读】《Training Large Language Models to Reason in a Continuous Latent Space》

【论文解读】《Training Large Language Models to Reason in a Continuous Latent Space》

论文链接 1. 背景与动机 语言空间与推理的矛盾 目前大多数大语言模型&#xff08;LLMs&#xff09;在解决复杂问题时采用链式思维&#xff08;Chain-of-Thought, CoT&#xff09;方法&#xff0c;即利用自然语言逐步推导出答案。然而&#xff0c;论文指出&#xff1a; 自然语言…
阅读更多...
Java进阶学习笔记7——权限修饰符

Java进阶学习笔记7——权限修饰符

什么是权限修饰符&#xff1f; 就是用来限制类中的成员&#xff08;成员变量、成员方法、构造器、代码块…&#xff09;能够被访问的范围。 protected使用的比较少&#xff0c;但是程序员还是要阅读代码&#xff0c;看官方文档是怎么写的&#xff0c;都会接触到protected修饰…
阅读更多...
在 Vue 中处理跨域请求：全面解析与实践指南

在 Vue 中处理跨域请求：全面解析与实践指南

在 Vue 中处理跨域请求&#xff1a;全面解析与实践指南 在现代 Web 开发的复杂生态中&#xff0c;跨域请求&#xff08;CORS&#xff09;如同一个无处不在的难题&#xff0c;时刻考验着开发者的技术能力。当我们构建基于 Vue.js 的前端应用时&#xff0c;这一问题尤为凸显。因为…
阅读更多...
Python爬虫具体是如何解析商品信息的？

Python爬虫具体是如何解析商品信息的？

在使用Python爬虫解析亚马逊商品信息时&#xff0c;通常会结合requests库和BeautifulSoup库来实现。requests用于发送HTTP请求并获取网页内容&#xff0c;而BeautifulSoup则用于解析HTML页面并提取所需数据。以下是具体的解析过程&#xff0c;以按关键字搜索亚马逊商品为例。 …
阅读更多...
Office和WPS中使用deepseek，解决出错问题，生成速度极快，一站式AI处理文档

Office和WPS中使用deepseek，解决出错问题，生成速度极快，一站式AI处理文档

让office集成deepseek&#xff0c;支持office和WPS办公软件&#xff0c;无需本地部署一站式使用&#xff01; WPS中集成deepseek&#xff0c;一站式搞定AI排版、润色和翻译&#xff01; 但是由于deepseek官方的某些原因导致无法正常使用&#xff0c;会出现不回答或者是回答报…
阅读更多...
物联网+人工智能的无限可能

物联网+人工智能的无限可能

一、技术优势&#xff1a; 智能化决策&#xff1a;物联网通过感知层采集大量实时数据&#xff0c;而人工智能则通过数据分析和模式识别&#xff0c;为这些数据提供深层次的洞察。AI可以基于大量的实时数据做出智能决策&#xff0c;从而大幅度提升效率&#xff0c;减少人工干预。…
阅读更多...
腾讯SQL面试题解析：如何找出连续5天涨幅超过5%的股票

腾讯SQL面试题解析：如何找出连续5天涨幅超过5%的股票

腾讯SQL面试题解析：如何找出连续5天涨幅超过5%的股票 作者：某七年数据开发工程师 | 2025年02月23日 关键词：SQL窗口函数、连续问题、股票分析、腾讯面试题 一、问题背景与难点拆解 在股票量化分析场景中，"连续N天满足条件"是高频面试题类型。本题要求在单表stoc…
阅读更多...
CVE-2021-34527: PrintNightmare 域内提权

CVE-2021-34527: PrintNightmare 域内提权

域控 ip&#xff1a;192.168.72.21&#xff0c;hostname&#xff1a;dc01 域内攻击者机器 ip&#xff1a;192.168.72.158&#xff0c;hostname&#xff1a;WIN10-01 攻击者 kali 机器 ip&#xff1a;192.168.72.162 如果目标机器开启 Print Spooler 服务&#xff0c;那么此…
阅读更多...
最新文章

Copyright @ 2022~2023