vue使用 screenfull 插件实现网页全屏 + aside 和 main 对应高度变化

1、安装screenfull插件,在终端中输入:npm install screenfull --save

2、在需要使用全屏的 .vue 文件的script中引入:import screenfull from 'screenfull';

3、设置触发事件 和 函数调用

<template>
//设置点击事件
<el-button @click="hand">anniu</el-button>
</template>

<script>
//引入
import screenfull from "screenfull"
export default {
    methods:{
        hand(){
        //执行切换全屏
        screenfull.toggle()
    }
    }

}
</script>

 aside 和 main 设置高度:

height: calc(100vh - 70px);            //设置高度为 当前窗口高度 - 70px(header的高度)

 

posted on 2021-03-17 14:40  cropsecrab  阅读(515)  评论(0)    收藏  举报

导航