element-vue admin 右击路由选项 利用fullscreen实现全局页面全屏_fullscreen使用

凡有所相，皆是虚妄

---

前言

项目需求，每个页面都需要有个全屏的功能，而原有的全屏功能是把整个页面放大全屏（包括左侧菜单，路由栏），现在只需要主功能页面放大全屏。

---

效果图

---

一、fullscreen是什么？

简易轻量化类原生的高兼容窗口全屏控件。

二、使用步骤

1.安装依赖，引入组件

终端安装依赖

npm install vue-fullscreen --save
1

在 main.js文件中引入组件

import fullscreen from 'vue-fullscreen'

Vue.use(fullscreen)
1
2
3

2.添加路由右键菜单选项及全屏实现

我的路由文件在这，具体自行寻找projectName/src/layout/components/TagsView/index.vue

Template代码

// 选项为无序列表
<ul>
	<li @click="clickFullscreen()"><i class="el-icon-full-screen" /> 全屏显示</li>
</ul>
<fullscreen style="background: #f7f8fa" :fullscreen.sync="fullscreen">
	// 这里是全局设置，在路由下的页面就全屏，如果要给其它的数据全屏改成对应的就好		
	<router-view v-if="showMainFlag" :in-screen="!fullscreen" style="width: 100%; height: 100%;" />
</fullscreen>
1
2
3
4
5
6
7
8

script代码

export default {
	data() {
	    return {
		    fullscreen: false,
		    showMain: false
	    }
  	},
  	computed: {
  		showMainFlag() {
      		return this.showMain
    	}
	},
	watch: {
		fullscreen() {
			// 刷新 进行重新渲染
			this.showMain = false
			this.$nextTick(() => {
			this.showMain = true
      		})
    	}
	},
	method:{
		clickFullscreen() {
			this.fullscreen = true
	    },
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

---