页面中分页使用fixed定位到页面底部，分页容器宽度设置

最新推荐文章于 2024-07-01 16:02:19 发布

Fighting_p

最新推荐文章于 2024-07-01 16:02:19 发布

阅读量299

点赞数

分类专栏： JavaScript 文章标签： css 前端 html javascript

本文链接：https://blog.csdn.net/m0_53562074/article/details/131123609

版权

JavaScript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

由于分页容器设置 fixed 定位，fixed 定位是相对 windows 定位的，所以fixed 定位的容器如果宽度设置 100% 的话就是 windows 的宽度，很不友好。
想设置分页的宽度为指定的宽度，但是这个宽度又不固定

mounted() {
  this.setPaginationWidth()
  window.addEventListener('resize', this.setPaginationWidth)
  // 以下 this.$once() 代码其实也没有必要写
  this.$once('hook:beforeDestroy', () => {
  	window.removeEventListener('resize', this.setPaginationWidth)
  })
},
methods() {
  setPaginationWidth() {
    const rightDom = document.querySelector('.risk-detail-content-table') // 想要设置的分页的宽度的容器的dom
    const paginationDom = document.querySelector('.el-pagination') // 分页dom
    paginationDom.style.width = rightDom.offsetWidth + 'px'
  },
}