发布时间:2022-08-19 11:34
因为需要动态控制div的显示数目,所以需要div的大小能动态变化,这里使用的计算属性来实现
这里的videoWidth和videoHeight就是计算属性
computed: {
videoWidth: {
get: function () {
// elmWidth是当前控件的宽度
return this.elmWidth / this.columnNum - 10
}
},
videoHeight: {
get: function () {
// elmHeight是当前控件的高度
return this.elmHeight / this.rowNum - 10
}
},
// rowNum和comunmNum根据当前需要展示的视频数目videoNumShow计算
// videoNumShow是父组件传递的一个属性
// 4 -- 2 * 2
// 9 -- 3 * 3
// 12 -- 3 * 4
// 24 -- 4 * 6
rowNum: {
get: function () {
if (this.videoNumShow === 4) return 2
else if (this.videoNumShow === 9) return 3
else if (this.videoNumShow === 12) return 3
else if (this.videoNumShow === 24) return 4
return 2
}
},
columnNum: {
get: function () {
if (this.videoNumShow === 4) return 2
else if (this.videoNumShow === 9) return 3
else if (this.videoNumShow === 12) return 4
else if (this.videoNumShow === 24) return 6
return 2
}
}
}
这样在父组件传递进来的videoNumShow改变时,就会自动改变窗口的大小
另外需要说明的几点
1、elmWidth和elmHeight可以通过ResizeObserver监听动态的获取
mounted () {
const that = this
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
console.log(entry)
that.elmWidth = that.$el.getClientRects()[0].width
that.elmHeight = that.$el.getClientRects()[0].height
}
})
this.resizeObserver = resizeObserver
if (this.$el instanceof Element) {
resizeObserver.observe(this.$el)
}
else {
// 定时检测是否this.$el有效
setInterval(function () {
if (that.$el instanceof Element) {
that.resizeObserver.observe(that.$el)
}
}, 1000)
}
that.elmWidth = that.$el.getClientRects()[0].width
that.elmHeight = that.$el.getClientRects()[0].height
}
2、视频的显示数目可以通过绑定class实现
像下面这个div,在videoNumShow小于5的时候就会隐藏,hide是一个用来隐藏的样式 display: none;