码迷,mamicode.com
首页 > 其他好文 > 详细

vue element的meun菜单自适应屏幕宽度

时间:2020-04-28 15:28:28      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:监听   没有   屏幕宽度   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 }) },
 watch: {
    screenWidth(val) {
      this.screenWidth = val
    }
  },
 

开始是在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
    })
  },

 

vue element的meun菜单自适应屏幕宽度

标签:监听   没有   屏幕宽度   width   eventbus   布局   解决办法   判断   为什么   

原文地址:https://www.cnblogs.com/yanyanliu/p/12794058.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!