Vue 监控元素大小的变化

背景: 产品的需求是：搜索列表页面从后台请求到前台的多个规格属性，摆成一行进行多选，一行摆不下就显示更多按钮。点击更多，就换行显示全部的。

问题：我们怎么才能判断这一行摆不下呢。
解决办法:

element-resize-detector

1. yarn add element-resize-detector 或者 npm install element-resize-detector --save

2. 在页面 import elementresizeDetector from element-resize-detector

3. 在页面mounted里面
  mounted（）{
  // 创建实例
  var erd = elementresizeDetector();
  //监听id为test的元素 大小变化
  const el = this.$refs['test']   // 这个是你要监听的元素
  erd.listenTo(el, function(element) {
    console.log(element.offsetWidth)
    this.width = element.offsetWidth
   // 这样就可以监听width,然后写你的计算属性拉
  });
  }