1.下載插件 screenfull
npm i screenfull@5.1.0
2.封裝全屏顯示的插件
<template>
<!-- 放置一個圖標 -->
<div>
<!-- 放置一個svg的圖標 -->
<svg-icon icon-class="fullscreen" style="color:#fff; width: 20px; height: 20px" @click="changeScreen" />
</div>
</template>
<script>
import ScreenFull from 'screenfull'
export default {
methods: {
// 改變全屏
changeScreen() {
if (!ScreenFull.isEnabled) {
// 此時全屏不可用
this.$message.warning('此時全屏組件不可用')
return
}
// document.documentElement.requestFullscreen() 原生js調用
// 如果可用 就可以全屏
ScreenFull.toggle()
}
}
}
</script>
<style>
</style>
3.全局注冊插件
import ScreenFull from './ScreenFull'
Vue.component('ScreenFull', ScreenFull) // 注冊全屏組件
4.使用插件
文章來源地址http://www.zghlxwxcb.cn/news/detail-728866.html
文章來源：http://www.zghlxwxcb.cn/news/detail-728866.html
到了這里，關于vue項目中頁面實現全屏的功能的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
