vue计算宽度_Vue监听屏幕宽度

Vue监听屏幕宽度

首先在data中定义要监听的属性，因为watch侦听器监听的是data中的属性,不能直接监听window

在mouted当中调用window.onresize()事件，onresize事件会在窗口或框架被调整大小时触发

最后在watch监听data中的screenWidth属性就可以了

export default {

name: "dormInfo",

props: {},

components: {},

computed: {},

data() {

return {

screenWidth: document.body.clientWidth,

}

},

methods: {},

mounted() {

const that = this

window.οnresize= () => {

return (() => {

window.screenWidth = document.body.clientWidth;

that.screenWidth = window.screenWidth;

})();

}

},

created() {

},

watch: {

/* 监听*/

screenWidth(val) {

this.screenWidth = val;

console.log("this.screenWidth",this.screenWidth)

}

}

}