动态内容不同分辨率展开收起效果实现

需求，不同分辨率下，都显示三行文字内容，超出三行显示展开按钮，

组件封装TextOverflow.vue

<template>
  <div :class="{'overflow-hidden': toggleShow}"
       style="position:relative">
    <slot></slot>
    <span class="link showbtn"
          @click="handleHideMoreClick">
      {{toggleShow ? '...展开' :'收起'}}</span>
  </div>
</template>

<script>
export default {
  name: 'TextOverflow',
  data() {
    return {
      toggleShow: true
    }
  },
  methods: {
    handleHideMoreClick() {
      this.toggleShow = !this.toggleShow
    }
  }
}
</script>

<style>
.overflow-hidden {
  position: relative;
  overflow: hidden;
  max-height: 80px;
}

.showbtn {
  position: absolute;
  display: block;
  right: 3px;
  bottom: -1px;
  width: 50px;
  text-align: right;
}
.link {
  color: #409eff;
  cursor: pointer;
  padding: 0;
  padding-left: 4px;
  background: #fff;
  font-size: 14px;
}
</style>

组件调用：

         <TextOverflow class="content"
                        v-if="remarkLength>winWidthLength"
                        :showBtn="showBtn"
                        style="font-size: 16px;
    line-height: 26px;">
            <p>{{ about.remark }}</p>
          </TextOverflow>
          <p v-else>{{ about.remark }}</p>
          <p v-if="!about.remark">
            <a-empty />
          </p>

关键点-根据屏幕判断winWidth数值，尝试过用refs获取dom数值，也增加了$nextTick(),获取到的值均为0，所以尝试笨的办法，获取屏幕宽度