vue-cli點擊實現全屏功能

本文實例為大家分享了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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。