前言

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

效果图

一、fullscreen是什么？

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

二、使用步骤

1.安装依赖，引入组件

终端安装依赖

npm install vue-fullscreen --save

在 main.js文件中引入组件

import fullscreen from 'vue-fullscreen'Vue.use(fullscreen)

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>

script代码

export default {data() {return {fullscreen: false,showMain: false}},computed: {showMainFlag() {return this.showMain}},watch: {fullscreen() {// 刷新 进行重新渲染this.showMain = falsethis.$nextTick(() => {this.showMain = true})}},method:{clickFullscreen() {this.fullscreen = true},}
}

element-vue admin 右击路由选项利用fullscreen实现全局页面全屏相关推荐

vue+element ui 设置页面全屏全屏和退出全屏的切换
vue+element ui 设置页面全屏全屏和退出全屏的切换方式1 screenfull 插件 // 属性 screenfull.isFullscreen; // 判断当前页是否全屏返回类型 ...
vue实现页面全屏和退出全屏
pc端使用vue实现页面全屏和退出全屏 element.requestFullScreen() -- 全屏显示 Element.requestFullscreen()方法用于异步请求使得Elemen ...
vue实现页面全屏、局部全屏等多方式全屏
1.vuex创建全局变量在store/index中: import Vuex from 'vuex'Vue.use(Vuex)const user = {state: {// 全屏fullscree ...
vue admin 动态路由权限管理
主要思路通过后端接口返回数据进行判断 (通过后端实现的权限管理有许多种),在这里我们主要通过关键字即匹配前端路由meta.menu值来实现权限管理通常会把路由权限列表存至vux中箭头所指的便 ...
利用css 把背景图片全屏铺满
1.html代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
vue实现全屏只显示内容不显示导航条和退出全屏调用事件
啊萨达一.需求尝试分析二.实现内容全屏(导航条不显示) 1.页面全屏 2.部分元素全屏 3.退出全屏调用事件一.需求尝试分析先说一下需求:要求在第一个页面点击全屏按钮进入全屏或者第二个新的页面 ...
esc键退出全屏 vue_Js 网页全屏（vue）-2020-08-26-亲测兼容 F11、ESC的全屏操作
Js 网页全屏(vue) 效果描述以下逻辑均正常点击按钮全屏.点击按钮退出全屏.再点击按钮全屏点击按钮全屏,F11 / ESC 退出全屏,点击按钮全屏 F11 进入全屏,点击按钮退出全屏不同页 ...
Leaflet中使用Leaflet.fullscreen插件实现全屏效果
场景 Vue+Leaflet实现加载OSM显示地图: Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上,怎样实现地图全屏效果. ...
Vue项目中监听全屏事件，实现全屏功能和按esc退出全屏（解决全屏踩坑难题）
展示效果: 全屏功能代码: <el-buttontype="button"id="full-btn-medium"@click="VideoF ...
Fullscreen API 全屏显示网页
Fullscreen API 全屏显示网页第一次看到应用 Fullscreen API 全屏显示网页,是 FaceBook 中的照片放大.作为一个比较新的 API,目前只有 Safari.Chrom ...

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

文章目录

前言

效果图

一、fullscreen是什么？

二、使用步骤

1.安装依赖，引入组件

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

element-vue admin 右击路由选项利用fullscreen实现全局页面全屏相关推荐

最新文章

热门文章

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

文章目录

前言

效果图

一、fullscreen是什么？

二、使用步骤

1.安装依赖，引入组件

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

element-vue admin 右击路由选项 利用fullscreen实现全局页面全屏相关推荐

最新文章

热门文章

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

element-vue admin 右击路由选项利用fullscreen实现全局页面全屏相关推荐