标签：监听 没有 屏幕宽度 width eventbus 布局 解决办法 判断 为什么
项目中header用的element的meun菜单，由于项目中header的布局，使用layout布局也没法实现屏幕的宽度变化 菜单的每个题目的间距适当缩小，就想到用监听屏幕宽度来让他们之间的间距大小变化
<el-col :class="screenWidth <= 1350 ? screenWidth <= 1200? ‘meunStyle menuItem‘:‘meunStyle menuItems‘ : ‘meunStyle‘"></el-col>
data(){ return{ screenWidth: 1920 } }, mounted() {// header头部监听 let that = this window.addEventListener(‘resize‘, function() { return (() => { window.screenWidth = document.body.clientWidth that.screenWidth = window.screenWidth })() }) // 若屏幕宽度变化 就实时派发 this.$EventBus.$emit(‘screenWidth‘, { Width: that.screenWidth }) },
开始是在mouted里监听 屏幕的宽度直接赋给screenWidth变量，但在html中classs名始终没变化，在监听的方法里打印，这个变量是实时变化的，后来在watch里打印这个变量也只有刷新页面的时候打印一次，后来想虽然屏幕宽度始终有打印，但他在mouted中 也只有刷新页面的时候会调用 就在网上搜了下，网上有一个解决办法 是要在watch里边加个延时器，不太明白为什么可以，但确实可以了，但我最后没有用 因为当屏幕有变化的时候 因为延时器的问题header导航总会闪烁，最终用了$emit,$on实时派发，接收值即可
后来发现 存在有个问题，也就是当刷新页面的时候，这个屏幕宽度没有进行操作的时候是不会走addEventListener方法的，所以他会在data里直接取这个screenWidth变量的值去判断class类名，这样肯定不行，万一我打开的是控制台，此时的屏幕宽度不是最大宽，所以 在mouted里边先让他获取屏幕宽度直接赋值给screenWidth，这样就没有问题了，下边这个才是最完整的mouted
mounted() { this.screenWidth = document.body.clientWidth //这样一刷新页面 依旧可以先获取获取此时的屏幕宽 this.user = localStorage.getItem(‘username‘) // header头部监听 let that = this window.addEventListener(‘resize‘, function() { return (() => { window.screenWidth = document.body.clientWidth that.screenWidth = window.screenWidth })() }) // 若屏幕宽度变化 就实时派发 this.$EventBus.$emit(‘screenWidth‘, { Width: that.screenWidth }) },
标签：监听 没有 屏幕宽度 width eventbus 布局 解决办法 判断 为什么
原文地址：https://www.cnblogs.com/yanyanliu/p/12794058.html
