VUE3中实现浏览器全屏功能
- 安装screenfull
npm install screenfull
- 在vue页面中引入
import screenfull from 'screenfull'
- 定义全屏方法
const SetFullScreen = () => {
//screenfull.isEnabled 此方法返回布尔值,判断当前能不能进入全屏
if (!screenfull.isEnabled) {
return false
}
//screenfull.toggle 此方法是执行全屏化操作。如果已是全屏状态,则退出全屏
screenfull.toggle()
}
- 调用方法
<el-tooltip
class="box-item"
effect="dark"
content="全屏"
placement="top"
>
<FullScreen
@click="SetFullScreen"
v-if="headBtnList?.find((n) => n == 'MD007_1_2')"
style="
width: 1.4em;
height: 1.4em;
color: var(--headerFontcolor);
cursor: pointer;
margin-right: 10px;
"
/>
</el-tooltip>