vue-cli點擊實現(xiàn)全屏功能
本文實例為大家分享了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)。
相關(guān)文章:
1. IntelliJ IDEA調(diào)整字體大小的方法2. 淺談JavaScript宏任務(wù)和微任務(wù)執(zhí)行順序3. PHP大文件分割分片上傳實現(xiàn)代碼4. 使用 kind 和 Docker 啟動本地的 Kubernetes環(huán)境5. Docker 容器健康檢查機(jī)制6. IntelliJ IDEA導(dǎo)入jar包的方法7. idea環(huán)境下Maven無法正常下載pom中配置的包問題8. python在CMD界面讀取excel所有數(shù)據(jù)的示例9. vue+elementUI下拉框回顯問題及解決方式10. 刪除docker里建立容器的操作方法

網(wǎng)公網(wǎng)安備