这个bug花了我下午快3个小时的时间去查找原因以及半个小时左右的时间去解决,花了这么多精力,值得记录下来,避免以后再踩坑。
一、vue-screenfull是一款插件,算是比较常用的插件了,一般在后台页面导航栏的右上角。
简短的说下
npm install sreenfull --save
封装成组件,直接引入到页面
父组件
<screenfull id="screenfull" />
import Screenfull from '@/components/Screenfull'
子组件
<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
}
//实列自带的toggle方法
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>
二、排查原因发现全屏的时候,body的高度动态变化了,但是列表组件高度未发生改变。 项目里将窗口动态渲染的方法挂载到了全局
export function windowRenderNew() {
this.screenWidth = document.body.clientWidth
this.screenHeight = document.body.clientHeight
window.onresize = () => {
this.screenWidth = document.body.clientWidth
this.screenHeight = document.body.clientHeight
}
return {
screenWidth: this.screenWidth,
screenHeight: this.screenHeight,
}
}
在需要的页面直接mounted钩子函数中调用即可
bug产生的原因也就在这,列表子组件只在一开始的时候渲染,没有监听动态计算,导致组件内部的页面区域可见高度一直没有动态计算
三、解决思路
在列表子组件内部,定义对象
windowSize: {
},
在mounted中加浏览器监听resize事件
mounted() {
this.windowSize = this.windowRenderNew(10)
var that = this
window.addEventListener('resize', function () {
that.windowSize = that.windowRenderNew(10)
})
},
给列表的高度绑定
<vxe-table
:height="windowSize.screenHeight"
>