vue element 菜单滚动

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue element 菜单滚动相关的知识,希望对你有一定的参考价值。

参考技术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
    })
  },

 

以上是关于vue element 菜单滚动的主要内容,如果未能解决你的问题,请参考以下文章

Vue+element使用table实现树形菜单

Vue element-ui:滚动条 分页 禁用选项

前端学习(3025):vue+element今日头条管理-侧边导航菜单

vue-element(四) el-table滚动加载

elementUI + vue + 直接引用vue和element css和js 菜单组件递归

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