一个非常适合运用在vue项目中的组件：Tag标签。
目录
3、在components目录下，创建自定义组件Tag.vue
六、最重要的一点：Pinia默认不会持久化数据，因此每当一刷新页面，pinia的数据就会重置，因此需要再下载一个pinia持久化插件
1、下载pinia持久化插件pinia-plugin-persistedstate
一、准备工作
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：移除tag
const removeTag = (removeTagInfo)=>{
//-:寻找所要删除的tag在tags列表中的下标
let index = tags.value.findIndex(item => item.title == removeTagInfo.title);
//-:根据该下标，删除该tag
tags.value.splice(index, 1);//从索引index的位置开始，删除1个标签
}
//返回上述定义的两个属性、两个方法
return {
tags,
currentMenu,
setTag,
removeTag
}
},
{
//persist 选项可以让 Pinia 存储的数据在页面刷新或会话结束后仍然保留。
persist:true//意思是持久化
}
)
//导出(上面起的名字就是tagStore)
export default tagStore3、在components目录下，创建自定义组件Tag.vue
<template>
<div class="tags">
<el-tag
v-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标签的path
if(index === tags.length-1){
//alert("这的确是最后一个Tag标签")
//将路由跳转到上一个Tag标签
router.push(tags[index-1].path)
//移除当前Tag标签
tags.splice(index,1)
}
//特殊情况二：如果关闭的是当前路由对应的那个Tag标签（即：高亮的Tag标签）且不是最后一个Tag标签，则跳转路由到下一个Tag标签的path
else{
//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文件中，开启持久化
以上就是本篇文章的全部内容，想了解更多的前端内容，请关注本博主~~
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
