大屏幕-全屏、退出全屏

<Button type="primary" @click="screenfullToggle">{{isFullScreen ? "退出全屏" : "全屏展示"}}
</Button>
import { mapState } from "vuex";
import { screenFullMixins } from "./extend/mixins/screenFull";
methods: {mixins: [screenFullMixins],computed: {...mapState("main", ["isFullScreen"]),},
}

screenFull.js

/*** 监听全屏状态统一mixins*/
import screenfull from "screenfull";
import { mapMutations } from "vuex";
export const screenFullMixins = {data() {return {};},mounted() {screenfull.on("change", this.__toggleFullScreen);document.addEventListener("keydown", this.__overWriteEvent);},beforeDestroy() {screenfull.off("change", this.__toggleFullScreen);document.removeEventListener("keydown", this.__overWriteEvent);},methods: {...mapMutations("main", ["setFullScreen"]),/*** 全屏切换事件监听*/__toggleFullScreen() {this.setFullScreen(screenfull.isFullscreen);},/*** F11事件重写监听*/__overWriteEvent(e) {if (e.keyCode == 122 && screenfull.enabled) {e.preventDefault();screenfull.toggle();}},/*** 全屏事件*/screenfullToggle() {if (!screenfull.enabled) {this.$Message.warning("当前浏览器不支持按键全屏！请按F11");return false;}screenfull.toggle();},}
};

大屏幕-全屏、退出全屏相关推荐

esc键退出全屏 vue_vue项目实现全屏,退出全屏，图标切换的解决方案
vue项目实现全屏,退出全屏,图标切换的解决方案 vue项目点击按钮实现全屏很容易,点击按钮退出全屏也很容易. fullScreen(){ var element=document.documentE ...
html全屏/退出全屏按钮，以及监听Esc退出后按钮样式变更
全屏和退出全屏引用了layui里面的icon标签,也可以使用自己的图片,都可以. html: <div id="screenDiv"><!-- 以下是layui里 ...
vue自写全屏/退出全屏组件
页面代码 isFullscreen主要是判断当前是否为全屏状态,然后展示不同的文字和svg图标组件传入的值为当前需要全屏的模块div的id名 vue data中定义是否全屏的值,默认为false i ...
会议室大屏幕用投影还是拼接屏好？
在现代企业的会议室中,通常都会安装一个大屏幕设备用来显示一些会议内容,或播放视频.播放PPT文档等内容.在传统情况下,可能您接触的用投影的比较多,因为拼接屏只是最近几年才流行起来的.那么二者的区别有哪 ...
three.js全屏退出全屏
window.addEventListener("dblclick", () => {const fullScreenElement = document.fullscree ...
js 全屏退出全屏
直接上代码: 全屏 function fullScreen() {var el = document.documentElement;var rfs = el.requestFullScreen || ...
【Vue实用功能】Vue实现浏览器全屏退出全屏
Vue实现浏览器全屏 vue代码 <v-btn class="ml-2" @click="fullScreen" v-show="!is_sma ...
浏览器切换全屏|退出全屏
一.进入全屏浏览器无法自启动以后立即触发进入全屏 function requestFullScreen() {var de = document.documentElement;if (de.re ...
Putty全屏/退出全屏快捷键
转载于:https://www.cnblogs.com/sos-blue/p/5287571.html
手机投屏不是全屏怎么办_手机投屏win10怎么退出全屏详细图文教程
出于某些原因,我们可能需要将手机屏幕投放到电脑上,不少小伙伴在网上苦苦搜寻投屏软件,当然有不错的,但是我个人觉得纯投屏的话.不用键盘操作的话,还是win10自带的投屏最好,支持传输声音,画质非常好,无 ...

大屏幕-全屏、退出全屏

大屏幕-全屏、退出全屏相关推荐

最新文章

热门文章