<span> {
{ isFullscreen ? '退出全屏' : '全屏显示' }} </span>
@/mixins/index.js
import {
mapGetters } from 'vuex'
import screenfull from 'screenfull'
export const PortraitMixin = {
data() {
return {
lightEchartsNoDataColor: '#000',
blueEchartsNoDataColor: '#fff',
timeFormat: 'yyyy/MM/dd',
timeValueFormat: 'yyyy-MM-dd'
}
},
computed: {
...mapGetters(['isFullscreen'])
},
mounted() {
const _this = this
window.addEventListener(
'resize',
() => {
// 全屏下监控是否按键了ESC
if (_this.checkFull()) {
// 全屏下按键esc后要执行的动作
screenfull.exit()
_this.$store.commit('SET_isFullscreen', false)
}
},
false
)
},
methods: {
// 全屏显示
handleScreenFull() {
if (!screenfull.isEnabled) {
this.$message({
message: 'you browser can not work',
type: 'warning'
})
return false
}
if (this.isFullscreen) {
screenfull.exit()
this.$store.commit('SET_isFullscreen', false)
this.$store.commit('SET_isShowHeader', true)
} else {
screenfull.request()
this.$store.commit('SET_isFullscreen', true)
this.$store.commit('SET_isShowHeader', false)
}
},
/**
* 是否全屏并按键ESC键的方法
*/
checkFull() {
const isFullscreen =
window.fullScreen ||
window.isFullscreen ||
document.webkitIsFullScreen ||
document.msFullscreenEnabled
let isFull = document.fullscreenEnabled && !isFullscreen
// to fix : false || undefined == undefined
if (isFull === undefined) {
isFull = false
}
return isFull
}
}
}