vue-element-admin/template的全屏功能实现

最新推荐文章于 2024-01-26 10:57:50 发布
最新推荐文章于 2024-01-26 10:57:50 发布
阅读量2.2k 收藏 8
点赞数 2
分类专栏： vue 文章标签： vue.js es6 javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44989478/article/details/107670520
版权

vue-element-admin的全屏功能
1. 复制文件

  • ① 首先把vue-element-admin中的src/components/Screenfull 复制到自己项目中
  • ②还有src/icons/svg下的exit-fullscreen.svg和fullscreen.svg复制到自己项目中

2.修改
如果出现提示you browser can not work，查看src/Screenfull/index.vue，打印一下screenfull，不同的版本screenfull下的isEnabled不一样，有的是isEnabled有的是Enabled
在这里插入图片描述

然后进入src/layout/components/Navbar.vue，添加

在这里插入图片描述
还有两处
在这里插入图片描述
此时全屏功能就可以了
在这里插入图片描述
位置自己用样式调就行了。

独孤求赞
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-element-admin-template
03-20
Vue元素管理模板 English | 具有Element UI，axios，iconfont，权限控制和lint的最小vue管理员模板 现场演示： : 当前版本是在vue-cli上构建的v4.0+ 。如果要使用旧版本，可以将分支切换到 ，它不依赖于vue-cli 构建设置 # clone the project git clone https://github.com/PanJiaChen/vue-admin-template.git # enter the project directory cd vue-admin-template # install dependency npm install # develop npm run dev 这将自动打开 建造 # build for test environment npm run build:stage # build for
vue实现浏览器全屏展示功能
12-13
1、项目中使用的是sreenfull插件，执行命令安装 npm install --save screenfull 2、安装好后，引入项目，用一个按钮进行控制即可，按钮方法如下： toggleFullscreen() { if (!screenfull.enabled) { this.$message({ message: 'you browser can not work', type: 'warning' }) return false } screenfull.toggle() } 试了一下可以全屏，我用的chrome，IE9以下不要考
16 VUE-admin tab全屏视图，多语言与颜色切换
THE ORDER
09-09 76
此时，element已经变成了zh，也就是中文，但是我们常规的内容怎么根据当前语言类型显示？这里，针对英文和中文，我们可以提供两个不同的语言包 src/lang/zh.js , src/lang/en.js该语言包，我们已经在资源中提供第四步，在index.js中同样引入该语言包import customZH from './zh' // 引入自定义中文包import customEN from './en' // 引入自定义英文包Vue.use(VueI18n) // 全局注册国际化包。
vue中让tempalte里面的div铺满全屏的办法
最新发布
weixin_58689699的博客
01-26 413
1.将div设置定位，这样就可以脱离template，以body为父级。2.用vw和vh，设置百分之百。
vue-element-admin实践系列(二)初始化系统的页面元素
Sunny_Future的博客
05-25 797
1、修改默认参数 1.1 修改启动端口 1.2 修改网页title 1.3 修改网站 ico 1.4 效果如下 2、自定义左侧导航栏 2.1 修改侧边栏 Logo 2.1.1 自定义Logo文字 2.1.2 自定义Logo背景色 2.1.3 设置Logo默认自动打开 2.2 删除导航栏内嵌广告
vue-element-admin 列表页面超出滚动改为满屏显示
Irene1991的博客
12-30 1949
vue-element-admin 列表页面超出滚动改为满屏显示
vue+element ui 设置页面全屏
qq_42797435的博客
09-06 2261
vue+element ui 设置页面全屏
vue-element-admin模板刷新组件，初始化页面
L_csdn123的博客
07-04 832
vue-element-admin 搭建的系统初始化页面
vue浏览器全屏实现
热门推荐
Curry的博客
11-06 1万+
项目中有要实现全屏的需求，而且全屏和非全屏的状态有差异。 1、项目中使用的是sreenfull插件，执行命令安装 npm install --save screenfull 2、安装好后，引入项目，用一个按钮进行控制即可，按钮方法如下： toggleFullscreen() { if (!screenfull.enabled) { this.$message({ ...
【bug】vue-screenfull全屏时页面高度未自适应，已解决
花椒和蕊的博客
01-30 1132
bug收录
使用vue-admin-element全屏功能
想去旅行的静静的博客
03-23 2094
使用vue-admin-element全屏功能 1、确保在\src\components目录下有Screenfull文件。 2、在目标页面中引入。 template中： <screenfull id="screenfull" class="right-menu-item hover-effect" /> script中： import Screenfull from '@/comp...
element-vue admin 右击路由选项 利用fullscreen实现全局页面全屏
Darkness___的博客
05-27 2238
凡有所相，皆是虚妄 文章目录前言效果图一、fullscreen是什么？二、使用步骤1.安装依赖，引入组件2.添加路由右键菜单选项及全屏实现 前言 项目需求，每个页面都需要有个全屏的功能，而原有的全屏功能是把整个页面放大全屏（包括左侧菜单，路由栏），现在只需要主功能页面放大全屏。 效果图 一、fullscreen是什么？ 简易轻量化类原生的高兼容窗口全屏控件。 二、使用步骤 1.安装依赖，引入组件 终端安装依赖 npm install vue-fullscreen --save 在 main..
vue-element-admin中文版本
07-20
该资源为一个后台管理系统，为vue-element-admin在git下搭建而成
vue-element-admin:vue-element-admin
04-29
fork by element admin克隆项目git clone安装依赖npm install建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题npm install --registry=配置配置后端支持，config文件夹 BASE_API 都...
vue-element-admin 精简版
03-03
减少冗余组件，保留基本框架以及设置和头部栏。
vue-element-admin完整依赖包node_modules
03-05
从github克隆下来的vue-element-admin项目后，有时install时会报各种异常导致下载失败，故上传此完整依赖包以便各位使用
vue-element-template/admin添加多标签(tags)功能和修改tags的背景颜色
俗人
07-28 4270
1.首先从vue-element-admin复制文件到项目 vue-admin-template\src\layout\components\TagsView 文件夹 vue-admin-template\src\store\modules\tagsView.js 2.\src\layout\components\TagsView/index.vue 删除三处 <template> <div id="tags-view-container" class="tags-view-c
element的树表格和树形控件折叠展开方法
俗人
08-17 3617
element的树表格和树形控件展开折叠方法 1.绑定表格/tree（树形控件） <el-table :data="diffeDataTable" ref="diffeDataTable" row-key="id" height="500px" > 注意，树形控件和表格都是ref=“diffeDataTable” ; 2.封装方法 fold(treeName,arr,isTree){ //arr就是你的表格数据数组或者树形控件的数组 let allArr=JSON.pars
vue组件样式相互影响解决办法
俗人
05-02 3495
今天在这个有点热的五一假期里，分享一个我之前遇到的小问题，就是vue-cli在多个组件下，样式会相互影响，有的会说在style标签里加scoped就好了，但是你加上之后还是会影响，比如我之前的，一个组件加了内边距之后，根组件的tabbar会被挤出视图，而且tabbar的宽度也非常宽，加了scoped也不管用，后来审查元素发现给的宽度100%，但是超过了视图宽度，怎么解决的呢？也是非常简单啊，就是加...
vue-admin-template和vue-element-admin
09-13
vue-admin-template和vue-element-admin是两个不同的项目。 vue-admin-template是一个基于vue-element-admin的后台管理系统基础模板，可以作为模板进行二次开发。它提供了一个简洁的基础框架，适合用于中小型后台管理项目的开发。你可以从GitHub上获取它的源代码，GitHub地址是https://github.com/PanJiaChen/vue-admin-template 。 而vue-element-admin是一个丰富的组件库，它包含了很多常用的组件和功能，可以作为一个工具箱。你可以从vue-element-admin中复制你需要的功能或组件到vue-admin-template中进行二次开发。这样可以加快开发速度，并且确保功能的完整性和稳定性。 总结起来，vue-admin-template是一个基础的后台管理系统模板，适合二次开发，而vue-element-admin是一个组件库，可以作为工具箱供开发者使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值