vue全屏时隐藏顶部栏
vue可以点击按钮进行全屏显示,如果想在全屏时看到更多,隐藏掉顶部栏,我们可以这样编写代码,按钮图如下
设置完后效果图如下,这是整个电脑窗口的样子
首先我们找到这个按钮的代码
screenfull的index.vue
路径在src/components/Screeful/index.vue,找不到就全局搜索下
进入里面我们可以看到如下代码
<template>
<div>
//isFullscreen表示全屏与不全屏
<svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'"
@click="click" />
</div>
</template>
我们在它的change方法里进行编写
change() {
//navbar是顶部栏,根据是否全屏让顶部栏高度为0不展示或50展示出来
var navbar = document.getElementById('navbar')
navbar.style.height = screenfull.isFullscreen ? 0 + 'px' : 50 + 'px'
//sidebar是侧边栏距离顶部距离,如果不设置,可能会空出一块,看自己代码是什么样的
var sidebar = document.getElementById('sidebar')
sidebar.style.top = screenfull.isFullscreen ? 0 + 'px' : 50 + 'px'
//这个表示右边内容区,因为没有了顶部栏,我这里整体内容上移,下面会出现空白,所以将内容区放大到100%
var main = document.getElementById('app-main')
main.style.height = screenfull.isFullscreen ? 100 + '%' : 'calc(100% - 46px)'
this.isFullscreen = screenfull.isFullscreen
},
对了别忘记在navbar,sidebar ,app-main地方设置id,不然获取不到
可以全局搜索
class=“navbar”
class="sidebar "
class=“app-main”
找到各自的index.vue
然后在后面加上id=“navbar”
举个栗子
写完就完成了,效果可以看到了