vue element 菜单滚动

Posted 2023-04-23

参考技术A 1、<el-menu> 标签上加样式类名：sidear_container
2、样式：

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

项目中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
    })
  },