关于一行内按钮数量随屏幕宽度改变适配，剩余隐藏在抽屉展开

大致思路为：首先监听屏幕宽度实时变化，用屏幕宽度减去固定边框类样式，除以每个按钮宽度然后向上取整得到的即为屏幕上要展示的按钮个数。
监听屏幕宽度哪哪都能搜到：

data(){
   return{
      screenWidth: document.body.clientWidth, //将document.body.clientWidth赋值给data中自定义的变量：
   }
}

  //在页面mounted时，挂载window.onresize方法
  mounted() {
    const that = this
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
      })()
    }
  },

  watch: {
    //监听screenWidth属性值的变化，打印并观察screenWidth发生变化的值：
    screenWidth(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenWidth = val
        this.timer = true
        let that = this
        setTimeout(function () {
          // 打印screenWidth变化的值
          console.log(that.screenWidth)
          that.timer = false
        }, 1000)
      }
    },
  },

有一点要说明下，我有两个组件都需要适配，然后如果两个组件都用watch监听的话会不生效，于是另一个用了addEventListener（）不再需要watch

  mounted() {
    let that = this  //要用that，window里的this不是一般的this
    window.addEventListener('resize', function () {  //同样watch监听的话会冲突
      var width = window.innerWidth
      console.log('当前网页宽度为：' + width)
      that.dateNum = (width-900) / 95 
      console.log('kanxia看下', that.dateNum)
      that.nextDays = that.getNextDays()
    })
  },

dataNum可定义可不定义

要说的一点是关于按钮宽度，因为文字长度不同，按钮宽度也不同，其实最好是能获取到每个按钮的宽度，但这个目前不是很会，下去研究下。

然后这么着。
大概就是这样。