Tag标签的使用

一个非常适合运用在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

②配置pinia到项目中

2、使用pinia存储所需的数据和方法

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

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

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

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

5、给路由添加meta属性

6、效果展示

五、完善四的功能

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

效果展示

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

效果展示

3、功能3：点击左侧菜单栏，就能往pinia的TagStore.js的tags数组中添加一个对象，用来渲染Tag标签

效果展示

六、最重要的一点：Pinia默认不会持久化数据，因此每当一刷新页面，pinia的数据就会重置，因此需要再下载一个pinia持久化插件

1、下载pinia持久化插件pinia-plugin-persistedstate

2、在main.js中，令pinia使用该插件

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

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

②配置pinia到项目中

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个元素。}
}

效果展示

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默认不会持久化数据，因此每当一刷新页面，pinia的数据就会重置，因此需要再下载一个pinia持久化插件

1、下载pinia持久化插件pinia-plugin-persistedstate

npm install pinia-plugin-persistedstate

2、在main.js中，令pinia使用该插件

3、在pinia的js文件中，开启持久化

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