Tag标签的使用

news/2025/2/25 6:49:40

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

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

效果展示

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.niftyadmin.cn/n/5865112.html

相关文章

分库分表中间件开源

分库分表中间件开源

根据你的需求&#xff0c;以下是一些可以实现分库分表功能的中间件&#xff0c;这些项目可以帮助你管理分布式数据库环境中的数据分片和路由&#xff1a; 1. ShardingSphere ShardingSphere 是一个开源的分布式数据库中间件&#xff0c;提供了分库分表、读写分离、分布式事务…
阅读更多...
如何解决 Django 网站登录人数过多导致的性能问题

如何解决 Django 网站登录人数过多导致的性能问题

引言 随着用户量的增加，Django 开发的网站可能会面临登录人数过多导致的性能问题。这些问题可能包括数据库压力大、响应时间变长、服务器负载过高等。本文将详细分析这些问题的根源，并提供一系列解决方案，帮助你优化 Django 网站的性能。 1. 问题分析 当登录人数过多时，D…
阅读更多...
clickhouse--表引擎的使用

clickhouse--表引擎的使用

表引擎决定了如何存储表的数据。包括&#xff1a; 数据的存储方式和位置&#xff0c;写到哪里以及从哪里读取数据。(默认是在安装路径下的 data 路径)支持哪些查询以及如何支持。&#xff08;有些语法只有在特定的引擎下才能用&#xff09;并发数据访问。索引的使用&#xff0…
阅读更多...
Trae IDE Remote-SSH不能连接问题解决办法

Trae IDE Remote-SSH不能连接问题解决办法

一、问题现象描述 安装Remote - SSH for Trae后&#xff0c;发现无法连接访问ssh服务器。 二、解决办法 先说解决办法&#xff1a; 下载: trae-remote-ssh-script.zip 链接: https://pan.baidu.com/s/1yO6ny8huafv4L3x-pYKSxw?pwd445r 提取码: 445r 然后将这个包传输到远程…
阅读更多...
Css3重点知识讲解

Css3重点知识讲解

选择器 优先级&#xff1a; id 选择器 > 类选择器 > 标签选择器 类选择器&#xff1a; .myClass {color: blue; }id 选择器&#xff08;全局唯一&#xff09;&#xff1a; #myId {color: green; }标签选择器&#xff1a; p {color: red; }层次选择器&#xff1a; /…
阅读更多...
Qt如何将数据传入labview,Qt又如何从labview中读取数据?

Qt如何将数据传入labview,Qt又如何从labview中读取数据?

Qt如何将数据传入labview,Qt又如何从labview中读取数据? Qt如何将数据传入labviewQt如何从labview中读取数据 Qt如何将数据传入labview Qt如何从labview中读取数据
阅读更多...
Kafka RecordTooLargeException问题解决

Kafka RecordTooLargeException问题解决

个人博客地址&#xff1a;Kafka RecordTooLargeException问题解决 | 一张假钞的真实世界 Producer向Kafka写入数据时遇到异常&#xff1a;org.apache.kafka.common.errors.RecordTooLargeException。该异常是因为单条消息大小超过限制导致的。解决方法是将限制参数调大&#x…
阅读更多...
2. EXCEL中函数和公式《AI赋能Excel》

2. EXCEL中函数和公式《AI赋能Excel》

欢迎来到滔滔讲AI。今天我们来学习和讨论下函数和公式是什么&#xff0c;以及它们之间的区别。 点击图片查看视频 2、AI赋能EXCEL-函数和公式 一、什么是函数 首先&#xff0c;我们来了解一下函数。函数是Excel中预定义的计算工具&#xff0c;能够帮助我们快速进行各种计算。 …
阅读更多...
最新文章

Copyright @ 2022~2023