vue 文本超出隐藏 展开收起_vue div隐藏太长

vue 文本超出隐藏 展开收起

首先在需要设置超出隐藏的内容块写一个固定高度，超出设置隐藏

	<div		
        //class="checkboxHeight"// overflow:hidden;这里可以写文本样式超出几行... 显示
          :style="{height:showMore?'auto':showHeight+'px'}"
        >
        <p ref="ref">文本</p>
     </div> 
      <a-button
          type="link"
          v-show="isLongContent"
          style="float:right;"
          @click.stop="showMore2"
        >
          {{showMore?'收起':'展开'}}
          <a-icon v-if="!showMore" type="down" />
          <a-icon v-else type="up" />
        </a-button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

showMore：false
showHeight: 20//文本默认高度
isLongContent: false//展开收起按钮默认不显示

 this.$nextTick(() => {
          //const contentHeightThreshold = 20;
          let contentHeight = this.$refs.checkbox[3].$el.clientHeight;
          if (contentHeight > showHeight) {
            this.showHeight = showHeight;
            this.isLongContent = true;
          } else {
            this.isLongContent = false;
          }
   });
1
2
3
4
5
6
7
8
9
10

个人vuepress搭建博客链接
在dom加载完成后通过ref获取 div 的真实高度clientHeight