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) 收藏 举报
浙公网安备 33010602011771号