quasar框架切换Tab页使用<keep-alive>缓存

devtools/2024/9/23 7:27:03/

写法1 : 使用quasar的q-tabs组件使用方法

//布局样式根据需求自己设置
<template><div class="all-Tabs"><q-tabs v-model="activeTabName"  @update:model-value="selectedChange"><q-tabv-for="(item, index) in cardArr":key="index":label="item.label":name="item.activeTabName"></q-tab></q-tabs><div class="bottom"><!-- 放置动态组件... --><!-- keep-alive缓存组件,这样的话,组件就不会被销毁,DOM就不会被重新渲染 --><keep-alive><component:is="activeTabName"></component></keep-alive></div>
</div>
</template>
<script>
import { ref, shallowRef, watch, nextTick, onMounted, inject,reactive ,computed,toRefs,getCurrentInstance,onUnmounted,watchEffect} from 'vue'
import hourlyQueryCom from './hourlyQueryCom'
import journalQueryCom from './journalQueryCom'
import historicalDataCom from './historicalDataCom'
import historicalDataMoreCom from './historicalDataMoreCom'
export default {name: "index",components:{hourlyQueryCom,journalQueryCom,historicalDataCom,historicalDataMoreCom},setup(){const state = reactive({activeTabName:'hourlyQueryCom',cardArr: [{label: "观测部查询",activeTabName: "hourlyQueryCom",},{label: "日纪要查询",activeTabName: "journalQueryCom",},{label: "历史数据单表查询",activeTabName: "historicalDataCom",},{label: "历史数据多表查询",activeTabName: "historicalDataMoreCom",},],})const selectedChange = (value)=>{state.activeTabName = value}return{selectedChange,...toRefs(state),}}
</script>

写法2 :手动创建tab切换效果

//自行设置样式
<template><div class="all-Tabs"><div class="top"><div class="crad":class="{ highLight: whichIndex == index }"v-for="(item, index) in cardArr":key="index"@click="whichIndex = index;activeTabName = item.activeTabName;">{{ item.label }}</div></div><div class="bottom"><!-- 放置动态组件... --><!-- keep-alive缓存组件,这样的话,组件就不会被销毁,DOM就不会被重新渲染 --><keep-alive><component :is="activeTabName"></component></keep-alive></div></div>
</template>
<script>
import { ref, shallowRef, watch, nextTick, onMounted, inject,reactive ,computed,toRefs,getCurrentInstance,onUnmounted,watchEffect} from 'vue'
import hourlyQueryCom from './hourlyQueryCom'
import journalQueryCom from './journalQueryCom'
import historicalDataCom from './historicalDataCom'
import historicalDataMoreCom from './historicalDataMoreCom'
export default {name: "index",components:{hourlyQueryCom,journalQueryCom,historicalDataCom,historicalDataMoreCom},setup(){const state = reactive({whichIndex:0,activeTabName:'hourlyQueryCom',cardArr: [{label: "观测部查询",activeTabName: "hourlyQueryCom",},{label: "日纪要查询",activeTabName: "journalQueryCom",},{label: "历史数据单表查询",activeTabName: "historicalDataCom",},{label: "历史数据多表查询",activeTabName: "historicalDataMoreCom",},],})return{...toRefs(state),}}
</script>
<style  scoped lang="scss">.highLight{border:1px solid red;///自行设置  高亮	}//自行设置样式.bottom{}
</style>

http://www.ppmy.cn/devtools/14454.html

相关文章

【1429】招生管理管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java 招生管理系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql5.0&…

神经网络与深度学习(四)

目录 一、循环神经网络1.1 门控循环单元(GRU)1.2 长短期记忆网络(LSTM)1.3 深度循环神经网络1.4 双向循环神经网络 二、NLP2.1 序列模型2.2 数据预处理2.3 文本预处理2.4 文本嵌入 三、RNN模型3.1 RNN概要3.2 RNN模型3.3 RNN示例 一、循环神经网络 循环神经网络&#xff08;RN…

交换机与AI的连接:构建未来智能网络的关键路径

随着信息技术的飞速发展&#xff0c;交换机和人工智能&#xff08;AI&#xff09;这两大领域正逐渐融合&#xff0c;为我们的工作和生活带来前所未有的变革。本文将探讨交换机与人工智能之间的连接&#xff0c;以及这种连接如何影响未来网络的发展。一、交换机的基本概念 交换机…

FANUC机器人socket通讯硬件配置

一、添加机器人选配包 Fanuc机器人要进行socket通讯&#xff0c;需要有机器人通讯的选配包&#xff0c;1A05B-2600-R648 User Socket Msg&#xff0c;1A05B-2600-R632 KAREL&#xff0c;1A05B-2600-R566 KAREL Diagnostic&#xff0c;1A05B-2600-J971 KAREL Use Sprt FCTN。 二…

NXP恩智浦 S32G电源管理芯片 VR5510 安全概念 Safety Concept (万字长文详解,配21张彩图)

NXP恩智浦 S32G电源管理芯片 VR5510 安全概念 Safety Concept (万字长文详解&#xff0c;配21张彩图) 1. 简介 本应用笔记描述了与S32G处理器和VR5510 PMIC相关的安全概念。该文档涵盖了S32G和VR5510的安全功能以及它们如何相互作用&#xff0c;以确保对ASIL D安全完整性级别…

考古:MFC界面的自适应缩放(代码示例)

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 MFC窗体的控件的自适应缩放早期…

亚远景科技-什么是R.A.S.I.C角色职权矩阵

什么是 R.A.S.I.C角色职权矩阵 在流程定义过程中&#xff0c;亚远景科技推荐使用RASIC 矩阵。RASIC 矩阵是一个非常有用的管理方法。可以明确流程定义中的角色和其相关责任。 "RASIC" 是"Responsible" 、"Accountable" 、"Supportive"…

SpringBoot钩子函数

在Java Spring Boot中&#xff0c;并没有直接称为“钩子函数”的概念&#xff0c;但你可以通过实现特定的接口、注解、事件监听或使用AOP&#xff08;面向切面编程&#xff09;来实现类似的功能。这些功能允许你在应用的特定点插入自定义逻辑&#xff0c;类似于钩子函数的作用。…