element中顶部导航全屏功能
第一步:安装:
在命令行中执行:npm install --save screenfull (注:因为这是生产依赖,所以执行--save)
第二部封装公共组件(element-admin套)
<template>
<div>
<svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" />
</div>
</template>
<script>
import screenfull from 'screenfull'
export default {
name: 'Screenfull',
data() {
return {
isFullscreen: false
}
},
mounted() {
this.init()
},
beforeDestroy() {
this.destroy()
},
methods: {
click() {
if (!screenfull.enabled) {
this.$message({
message: 'you browser can not work',
type: 'warning'
})
return false
}
screenfull.toggle()
},
change() {
this.isFullscreen = screenfull.isFullscreen
},
init() {
if (screenfull.enabled) {
screenfull.on('change', this.change)
}
},
destroy() {
if (screenfull.enabled) {
screenfull.off('change', this.change)
}
}
}
}
</script>
<style scoped>
/* .screenfull-svg {
display: inline-block;
cursor: pointer;
fill: #5a5e66;;
width: 20px;
height: 20px;
vertical-align: 10px;
} */
</style>
通用套
<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>
第三步,在需要的地方引入组件即可
网友评论