【vue】页面缩放获取屏幕宽度、多个按钮根据屏幕宽度合并成一个按钮

最新推荐文章于 2024-08-29 14:51:10 发布

栀妹儿

最新推荐文章于 2024-08-29 14:51:10 发布

阅读量1.1k

点赞数 2

文章标签： javascript html5 html

本文链接：https://blog.csdn.net/weixin_38990605/article/details/120432217

版权

本文介绍了如何在Vue应用中通过JavaScript获取页面宽度，并在屏幕尺寸变化时，将多个按钮合并为一个‘更多’按钮。利用document.body.clientWidth获取窗口宽度，并通过window.onresize监听窗口变化，实现响应式布局。

摘要由CSDN通过智能技术生成

获取页面宽度高度

方法来自：小讴

1、监听窗口变化
获取窗口宽度：document.body.clientWidth
监听窗口变化：window.onresize
2、JS方法
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth(包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)

将document.body.clientWidth赋值给data中自定义的变量：

data:{
   
    screenWidth: document.body.clientWidth
}

在页面mounted时，挂载window.onresize方法：

mounted () {
   
    const that = this
    window.onresize = () => {
   
        return (() => {
   
            window.screenWidth = document.body.clientWidth
            that.screenWidth = window.screenWidth
        })()
    }
}

监听screenWidth属性值的变化，打印并观察screenWidth发生变化的值：

watch:{
   
    screenWidth(val){
   
        // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
        if(!this.timer){
   
            // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
            this.screenWidth = val
            this.timer = true
            let that = this
            setTimeout(function()