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
    })
  },