vue項目全屏預覽 簡單易懂 screenfull

1,安裝步驟

在命令行中執行:npm install --save screenfull (注:因爲這是生產依賴,所以執行–save)

報錯就切換下版本

重新安裝package.json中的依賴時,一定要注意其版本,最近發現在5.0上版本時全屏不可用,
可用重新安裝依賴: npm install --save [email protected]

<template>
	<el-button type="primary" class="button" @click="buttoncli">摁我全屏</el-button>
</template>
 
<script>
	import screenfull from 'screenfull'
//	全屏功能使用:1.安裝,npm install --save screenfull
//	         2.引入
//	         3.點擊時判斷瀏覽器是否可全屏,不可全屏給提示,可全屏執行screenfull.toggle()
	export default{
		data(){
			return{
				isFullscreen: false
			}
		},
		methods:{
			buttoncli(){
				if (!screenfull.enabled) { // 如果不允許進入全屏,發出不允許提示
		        this.$message({
		          message: '不支持全屏',
		          type: 'warning'
		        })
		        return false
		     }
		      screenfull.toggle()
		      this.$message({
		          message: '已開啓全屏',
		          type: 'success'
		        })
			}
		}
	}
</script>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章