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>