vue窗口大小监听以及el-scrollbar的warp宽度设置以及滚动条高度调整
data () {return {screenWidth: document.body.clientWidth}},mounted () {// 监听窗口大小window.onresize = () => {return (() => {this.screenWidth = docu...
·
data () {
return {
screenWidth: document.body.clientWidth
}
},
mounted () {
// 监听窗口大小
window.onresize = () => {
return (() => {
this.screenWidth = document.body.clientWidth
})()
}
this.$nextTick(function () {
// 计算实际显示的高度(我减掉的是空白部分和分页所占的位置,实际情况自己看)
const realHeight = this.$refs.infoTable.clientHeight - 153 - 101
// 这个是源码计算滚动条最终高度的算式上的修改式
const heightPercentage = (realHeight * 100 / this.$refs.elScroll.$refs.wrap.scrollHeight)
this.$refs.elScroll.sizeHeight = (heightPercentage < 100) ? (heightPercentage + '%') : ''
// 这里必须延迟执行,不然覆盖不了原来的高度
setTimeout(() => {
this.$set(this.$refs.elScroll.$el.childNodes[2].children[0].style, 'height', ((heightPercentage < 100) ? (heightPercentage + '%') : ''))
}, 500)
this.$refs.elScroll.$refs.wrap.style.display = 'none'
this.$refs.elScroll.$refs.wrap.style.width = this.$refs.elScroll.$el.offsetWidth + 17 + 'px'
this.$refs.elScroll.$refs.wrap.style.display = '-webkit-box'
})
},
watch: {
screenWidth (val) {
this.screenWidth = val
// 根据父容器宽度动态调整el-scrollbar的warp容器的宽度
this.$refs.elScroll.$refs.wrap.style.display = 'none'
this.$refs.elScroll.$refs.wrap.style.width = this.$refs.elScroll.$el.offsetWidth + 17 + 'px'
this.$refs.elScroll.$refs.wrap.style.display = '-webkit-box'
}
}
更多推荐
已为社区贡献4条内容
所有评论(0)