【自适应】向来是前端工程师需要解决的一大问题——即便作为当今非常火热的vue框架,也无法摆脱——虽然elementui、iview等开源UI组件库层出不穷,但官方库毕竟不可能满足全部需求,因此我们可以通过【监听窗口变化】达到想要的绝大部分自适应效果。

获取窗口宽度:document.body.clientWidth
监听窗口变化:window.onresize

同时回顾一下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(){
// 打印screenWidth变化的值
console.log(that.screenWidth)
that.timer = false
},400)
}
}

}

好!既然可以监听到窗口screenWidth值的变化,就可以根据这个值设定不同的自适应方案了!

【举个例子:div或img图片高度随宽度自适应】

div或img的宽度自适应很简单——设定css里width属性为百分比即可——但是高度呢?父级元素的高度并不是固定的(通常都是子级元素撑开的)

如上图,一个类似【图片库】的功能,当屏幕放大缩小时,我们可以设置外层边框(也就是灰色框框)的宽度为100%,以达到自适应——但高度无法设置,因此我们需要:
1.数据加载完后,获取图片(或外层框)的宽度
2.根据这个宽度,设置外层框的高度(如:宽度的60%)
3.监听窗口screenWidth值的变化,每次变化都重新获取宽度,并重新设置高度

所以,我们只需在前文代码的基础上,添加以下代码,以确保屏幕缩放时,每次监听宽度变化:

mounted() {


// 1、数据首次加载完后 → 获取图片(或外层框)宽度,并设置其高度
this.$nextTick(() => {
// 获取图片(或外层框)
let imgBox = this.$refs.imgBox
// 获取其宽度
let wImgbox = imgBox[0].getBoundingClientRect().width
// 设置其高度(以宽度的60%为例)
this.imgBox.height = 0.6 * wImgbox + 'px'
})
// 2、挂载 reisze 事件 → 屏幕缩放时监听宽度变化
const that = this
window.onresize = () => {
return (() => {
// window.screenWidth = document.body.clientWidth
// that.screenWidth = window.screenWidth
// console.log(that.screenWidth)
this.$nextTick(() => {
let imgBox = this.$refs.imgBox
let wImgbox = imgBox[0].getBoundingClientRect().width
this.imgBox.height = 0.6 * wImgbox + 'px'
})
})()
}

},

最终实现效果如下:

来源:https://segmentfault.com/a/1190000016512967

vue项目如何监听窗口变化,达到页面自适应?的更多相关文章

  1. 009——VUE中watch监听属性变化实现类百度搜索栏功能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. vue 如何通过监听路由变化给父级路由菜单添加active样式

    1.项目需求:在项目开发中,多级菜单的情况下,勾选子菜单时,需要在父级菜单添加active样式. 2.遇到的问题:一级路由菜单的话,点击当前路由会自动在路由标签上添加router-link-exact ...

  3. vue项目中监听sessionStorage值发生变化

    首先在main.js中给Vue.protorype注册一个全局方法, 其中,我们约定好了想要监听的sessionStorage的key值为’watchStorage’, 然后创建一个StorageEv ...

  4. React监听窗口变化事件

    功能说明:本例子采用MUI table组件 + React实现. 需求描述:固定表头,列表高度随浏览器窗口的改变而改变.(本例中当窗口高度小于472像素后,便不作限制) 实现简介:1.监听浏览器窗口, ...

  5. Python窗口学习之监听窗口变化触发函数

    在窗口大小发生变化后,往往组件也需要调整 代码: #空间适应屏幕 def window_resiz(self,event=None): print(window.winfo_height()) pri ...

  6. js 监听窗口变化

    window.onresize = function () {.....}jquery $(window).resize(function)

  7. 监听窗口大小变化,改变画面大小-[Three.js]-[onResize]

    如果没有监听窗口变化,将会出现一下情况: ![](https://img2018.cnblogs.com/blog/1735896/202001/1735896-20200102081845027-2 ...

  8. React和Vue中,是如何监听变量变化的

    React 中事件监听 本地调试React代码的方法 先将React代码下载到本地,进入项目文件夹后yarn build 利用create-react-app创建一个自己的项目 把react源码和自己 ...

  9. vue.js之过滤器,自定义指令,自定义键盘信息以及监听数据变化

    一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...

随机推荐

  1. HTML5测试(二)

    HTML5测试(四) 1.input 元素中,下列哪个类型属性定义了输入电话号码的控件? A.mob B.tel C.mobile D.telephone 答案:B 具有 type 属性的 input ...

  2. centos7下open--v!(p/n)部署

    一,client-server 路由模式 使用tun,openssl,lzo压缩,启用转发,生成证书,关闭selinux 同步下时间 #1安装 yum -y install openvpn easy- ...

  3. JPA学习(三、JPA_API)

    框架学习之JPA(三) JPA是Java Persistence API的简称,中文名Java持久层API,是JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中 ...

  4. [BZO3572][HNOI2014]世界树:虚树+倍增

    分析 思维难度几乎为\(0\)的虚树码农(并不)题. 代码 #include <bits/stdc++.h> #define rin(i,a,b) for(register int i=( ...

  5. 7.Python编码规范(PEP 8)

    在讲解具体的 Python 编码规范之前,先来看看图 1 中的代码: 图 1 两段功能相同的 Python 代码 对比图 1 中的两段代码你会发现,它们所包含的代码时完全相同的,但很明显,右侧的代码编 ...

  6. sqli-labs(18)

    开始挑战第十八关(Header Injection - Uagent field - Error based) 常见的HTTP注入点产生位置为[Referer].[X-Forwarded-For].[ ...

  7. [LeetCode]-DataBase-Customers Who Never Order

    Suppose that a website contains two tables, the Customers table and the Orders table. Write a SQL qu ...

  8. HTTPS 证书制作及使用

    一 证书的制作 进入jdk/bin,使用keytools.exe制作证书. 1.创建keystore 创建一个别名为serverkeystore的证书,该证书存放在名为server.keystore的 ...

  9. Quartz最佳实践

    本文来自对http://www.quartz-scheduler.org/documentation/best-practices.html的翻译. 表示还没用过Quartz,正准备用的,然后在官网上 ...

  10. (转)使用NMAP工具扫描端口

    原文:http://www.linuxde.net/2013/02/12354.html nmap 是一个用于网络探索或安全评测的工具.它支持 ping 扫描(判定哪些主机在运行),多端口扫描技术(判 ...