-
需求:点击按钮项目的当前页全屏
-
项目环境 vue2
-
使用插件
screenfull
-
安装
npm install screenfull --save
-
代码
<template> <div class="btn-fullscreen"> <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" /> </div> </template> <script> // 引入screenfull 全屏插件 import screenfull from "screenfull"; export default { name: "Screenfull", data() { return { isFullscreen: false,// 默认不全屏 }; }, mounted() { this.init(); }, beforeDestroy() { this.destroy(); }, methods: { click() { // 先使用screenfull.enabled方法判断是否支持screenfull // 如果不允许进入全屏,发出不允许提示 浏览器不能全屏 if (!screenfull.enabled) { this.$message({ message: "you browser can not work", type: "warning", }); return false; } // 调用 screenfull.toggle() 可以双向切换全屏与非全屏 screenfull.toggle(); }, change() { this.isFullscreen = screenfull.isFullscreen; }, init() { if (screenfull.enabled) { screenfull.on("change", this.change); } }, destroy() { if (screenfull.enabled) { screenfull.off("change", this.change); } }, }, }; </script>
注:
isFullscreen : 是否是全屏状态
isEnabled : 判断是否支持全屏
vue-页面全屏插件-screenfull
于 2024-02-05 11:29:21 首次发布