ui，首页index页面驾驶舱全屏显示方法

以若依首页为例：
1.store/modules/settings.js添加一个navbar_tags：

.... const state = { .... navbar_tags: true // navbar/tags-view显示与隐藏 } .... const actions = { .... // navbar/tags-view显示与隐藏 setNavbar_tags({ commit }, navbar_tags) { state.navbar_tags = navbar_tags } } ....

2.views/index.vue添加一个全屏按钮：

<div @click="fullscreen" v-if="!winfull.full"> <el-button>放大</el-button> </div> <div @click="nofullscreen" v-else> <el-button>退出</el-button> </div> <el-button @click="changePage">跳转页面</el-button> export default { data() { return { // 窗口放大 winfull: { full: false } }; }, // 解决第二次进入页面，页面存在缓存不刷新问题 activated() { this.fullscreen(); // 需要刷新执行的函数 }, // 进入页面就显示全屏 created() { this.fullscreen(); }, methods: { // app-main层全屏显示开关 fullscreen() { this.winfull.full = true; this.$store.dispatch("app/toggleSideBarHide", true); this.$store.dispatch("settings/setNavbar_tags", false); }, // 关闭全屏显示 nofullscreen() { this.winfull.full = false; this.$store.dispatch("app/toggleSideBarHide", false); this.$store.dispatch("settings/setNavbar_tags", true); }, // 跳转页面 changePage() { this.$router.push({ path: "/system/user" }); this.nofullscreen(); }, } };

3.layout/index.vue

<div :class="{'fixed-header':fixedHeader}" v-if="navbar_tags"> <navbar /> <tags-view v-if="needTagsView" /> </div> .... export default { .... computed: { ...mapState({ .... navbar_tags: state => state.settings.navbar_tags }), .... } .... }

4.更改router.js中的配置项，刷新缓存，不然第二次进去不会全屏

(责任编辑：)

搜索

热门标签:

ui，首页index页面驾驶舱全屏显示方法