vue-cli点击实现全屏功能
程序员文章站
2023-10-30 18:03:10
本文实例为大家分享了vue-cli点击实现全屏功能的具体代码,供大家参考,具体内容如下项目中有点击按钮实现全屏功能方式一:js实现全屏代码如下:
...
本文实例为大家分享了vue-cli点击实现全屏功能的具体代码,供大家参考,具体内容如下
项目中有点击按钮实现全屏功能
方式一:js实现全屏
代码如下:
<template> <div> <a-button type="primary" @click="screen">全屏</a-button> </div> </template> <script> export default { name: "index", data(){ return{ fullscreen: false } }, methods:{ screen(){ let element = document.documentelement; if (this.fullscreen) { if (document.exitfullscreen) { document.exitfullscreen(); } else if (document.webkitcancelfullscreen) { document.webkitcancelfullscreen(); } else if (document.mozcancelfullscreen) { document.mozcancelfullscreen(); } else if (document.msexitfullscreen) { document.msexitfullscreen(); } } else { if (element.requestfullscreen) { element.requestfullscreen(); } else if (element.webkitrequestfullscreen) { element.webkitrequestfullscreen(); } else if (element.mozrequestfullscreen) { element.mozrequestfullscreen(); } else if (element.msrequestfullscreen) { // ie11 element.msrequestfullscreen(); } } this.fullscreen = !this.fullscreen; } } } </script> <style scoped> </style>
方式二:使用的是sreenfull插件,执行命令安装
npm install --save screenfull
在使用的页面正确引入:
import screenfull from ‘screenfull'
代码如下:
<template> <div> <a-button type="primary" @click="screen">全屏</a-button> </div> </template> <script> import screenfull from 'screenfull' export default { name: "home", data() { return { //默认不全屏 isfullscreen: false } }, methods: { screen(){ // 如果不允许进入全屏,发出不允许提示 if (!screenfull.enabled) { this.$message('您的浏览器不能全屏'); return false } screenfull.toggle(); this.$message.success('全屏啦') } } } </script> <style scoped> </style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: 虞姬最后真的是自刎吗?背后真相是什么?