封装一个简单的超出部分隐藏的公共组件

实现功能：组件默认展示一行，超出部分用展示 ...， 点击右边箭头展示全部内容，当内容未超出盒子时，右边箭头不展示。

父组件

// 位置调整以及是否展示可以在父组件内进行控制
 <div class="desc-finance-ellispsis-box">    
   // text文本内容，bgColor：背景颜色，不传，默认css中的 #F8F8F8；
     <ellispsis-desc :text="text"></ellispsis-desc> 
 </div>

data() {
  return {
     text: "测试测试文本测试文本测试文本测试文本本文本测试文本测试文本本文本测试文本测试文本本文本测试文本测试文本本文本测试文本测试文本本"
   }
}

展示效果  

html部分代码

<template> 
    // 为了方便点击，事件写在p元素上，当然也可以写在icon标签上   
  <p class="channel-yeild-show-box" 
       :style="{'background-color': bgColor}" 
        v-if="text"
        @click.stop="isShowEllispsis=false">     
       <span class="text"    
        :class="{'ellispsis-syle': isShowEllispsis}"    
        ref="ellispsisBox">{{text}}</span>  
       <span class="ellispsis-icon" 
         v-if="isShowEllispsis&&isIsOverflowBox"></span> 
   </p>
</template>

js部分代码

export default { 
 name: "EllispsisDesc",  
 props: {   
    // 展示文本   
     text: {     
       type: String,   
       default: '' 
      },    
   // 背景颜色 
    bgColor: {    
      type: String, 
      default: '' 
    } 
 }, 
 data() {  
   return {   
     isShowEllispsis: true, 
     isIsOverflowBox: false, 
   };
},
 watch: {  
  // 主要用于处理异步查询接口数据造成无法查询到元素scrollHeight和offsetHeight的问题 
    text(val) {   
      if (val) {      
        this.getHtml();  
       }  
    } 
   }, 
  mounted() { 
   this.getHtml(); 
 }, 
 methods: { 
      getHtml() { 
         this.$nextTick(() => {  
          let box = this.$refs.ellispsisBox;  
          if (box && box.scrollHeight > box.offsetHeight) {
            this.isIsOverflowBox = true;
          } else { 
            this.isIsOverflowBox =  false;
          }   
        })
      }
  }
};

css部分

<style lang="less" scoped>
@import "./style/common.less";
.channel-yeild-show-box { 
  .font(12px, #959595, SourceHanSansCN-Regular, 400);
   text-align: justify;
   position: relative; 
   background: #F8F8F8;
   border-radius: 2px;
   min-height: 19px;
   padding: 3px 5px; 
   box-sizing: border-box;
   display: flex; 
   span {
      display: inline-block;
    } 
   .text {   
       flex: 1; 
       box-sizing: border-box; 
       display: inline-block;
        &.ellispsis-syle { 
           .multilineEllipsis(1); 
       }  
  }   
 .ellispsis-icon {
        height: 15px;
        width: 15px;
        position: relative;
        &::after { 
        .triangle(#9E9E9E, 0,);
        } 
   }
}
</style>

style/common.less

.font(@s, @c, @f-f, @f-w) {
    font-family: @f-f;
    font-size: @s;
    color: @c;
    letter-spacing: 0;
    font-weight: @f-w;
}
.multilineEllipsis(@line: 2) {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: @line; 
   -webkit-line-clamp: @line;
    -webkit-box-orient: vertical;
}
.ellipsis() {
    overflow: hidden;
    white-space: nowrap; 
    text-overflow: ellipsis;
}
.triangle(@color, @right: 0, @width: 5px, @heigth: 4px) { 
   position: absolute;
    display: inline-block; 
    content: ''; 
    height: 0; 
    width: 0;
    border-top: @width solid @color;
    border-left: @heigth solid transparent;
    border-bottom: @heigth solid transparent;
    border-right: @heigth solid transparent;
    right: @right;
    top: 50%;
    transform: translateY(-25%);}