本文實例為大家分享了vue-cli點擊實現(xiàn)全屏功能的具體代碼，供大家參考，具體內(nèi)容如下

項目中有點擊按鈕實現(xiàn)全屏功能

方式一：js實現(xiàn)全屏

代碼如下：

<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插件，執(zhí)行命令安裝

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 { //默認(rèn)不全屏 isFullscreen: false } }, methods: { screen(){ // 如果不允許進(jìn)入全屏，發(fā)出不允許提示 if (!screenfull.enabled) { this.$message(’您的瀏覽器不能全屏’); return false } screenfull.toggle(); this.$message.success(’全屏啦’) } } }</script><style scoped></style>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。