vue监听窗口大小发生变化 实现自适应

首先在data定义变量：

data() {return {screenWidth: document.body.clientWidth};},

监听窗口大小变化：

mounted() {const that = this;window.onresize = () => (() => {window.screenWidth = document.body.clientWidth;that.screenWidth = window.screenWidth;})();},watch: {screenWidth(val) {// 为了避免频繁触发resize函数导致页面卡顿，使用定时器if (!this.timer) {// 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidththis.screenWidth = val;this.timer = true;const that = this;setTimeout(function () {that.sjcount(that.screenWidth);//窗口大小变化后执行的方法that.reload();//窗口大小变化后执行的方法that.timer = false;}, 10);}}}methods: {reload() {this.isAlive = false;this.$nextTick(function () {this.isAlive = true;});},sjcount(screewidth) {if (screewidth >= 1920) {this.numeral = 8;} else if (screewidth >= 1680) {this.numeral = 7;} else if (screewidth >= 1600) {this.numeral = 5;} else if (screewidth >= 1280) {this.numeral = 5;} else if (screewidth >= 1024) {this.numeral = 4;}},}