记录一个vue监控屏幕宽度的问题

因为今天有查询过如何用vue监控屏幕宽度的问题，搜到的很多都是这样的写法：

 data() {return {screenWidth: null, //屏幕尺寸};},watch: {screenWidth: {handler: function (val) {console.log("屏幕宽度等于"+val+"px");},immediate: true,},},mounted() {this.screenWidth = document.body.clientWidth;window.onresize = () => {//屏幕尺寸变化就重新赋值return (() => {this.screenWidth = document.body.clientWidth;})();};},

这个确实是可以监控到屏幕宽度，不过呢最终会导致一个问题，只能监控到1200px后就不能再继续往下监控了

就像这样，往上是可以，但是往下就不行了。而真正的解决方式是：

window.onresize = ()=>{var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;};

下面是修改过后的代码：

  data() {return {screenWidth: null, //屏幕尺寸};},watch: {screenWidth: {handler: function (val) {console.log("屏幕宽度等于" + val + "px");},immediate: true,},},mounted() {this.screenWidth = document.body.clientWidth;window.onresize = () => {this.screenWidth =window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth;};},

测试：

这个问题就解决了。

记录一个vue监控屏幕宽度的问题相关推荐

vue 监控元素宽度_Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
jquery实时监控屏幕宽度
方法1: $(window).resize(function(){ // 监控窗口宽度变化if( $(window).width() < 1330 ) { // 屏宽1330触发$(" ...
记录一个vue项目报错UnhandledPromiseRejectionWarning: Unhandled promise rejection.
使用vue-cli创建vue项目,加入一些之前的代码,然后打包运行报错: (node:4892) UnhandledPromiseRejectionWarning: Unhandled promise ...
记录一个vue使用的打印插件
优点: 1.使用方法简单,只需要两行代码,一行引入,一行调用打印 2.改造起来简单,只需要在在需要打印的标签上增加 ref即可使用方法: 1.新建,并复制下面的代码到print.js中 2.在需要打 ...
基于vue手写一个分屏器，通过鼠标控制屏幕宽度。
基于vue手写一个分屏器,通过鼠标控制屏幕宽度. 先来看看实现效果: QQ录屏20220403095856 下面是实现代码: <template><section class=&qu ...
菜鸟运行第一个vue项目记录
近期打算着手重构现有的测试平台,由于现在用的平台是layui+flask+uwsgi+nginx框架大家都已经比较熟悉了.所以在新平台选型时本着让大家多接触新东西.新挑战的原则.平台重构选用的框架为v ...
使用CSS定义一个和屏幕宽度一样正方形容器
使用CSS定义一个和屏幕宽度一样正方形容器介绍一下如何使用CSS定义一个和屏幕宽度一样正方形容器. 问题有时候,我们在移动端需要做一个商品展示页面,一打开页面,屏幕的上面一半展示为商品的图 ...
antv/G6使用记录，vue组件实现节点、边的动态增减、右键事件等功能
antv/G6使用记录,vue组件实现节点.边的动态增减.右键事件等功能基本展示功能点: 特性: ==完整代码== ==示例数据== 补充说明: 基本展示 antv/G6是蚂蚁金服数据可视化团队 ...
vue 图片引入_一个Vue的时间插件
安装 npm install -S hzqing-vue-timeline 如何引入 main.js: // 全局注册import hzqingVueTimeline from 'hzqing-vue ...

记录一个vue监控屏幕宽度的问题

记录一个vue监控屏幕宽度的问题

记录一个vue监控屏幕宽度的问题相关推荐

最新文章

热门文章