js实现文字折叠展开、收起效果

<div @click="open('open','jianjie_text')" v-if="isShow" id="open" style="color:#6EC4F2;font-size:14px;cursor: pointer;">展开</div>
  <p style="margin:8px 0;font-size:14px;line-height:30px;text-indent:10px;" class="many-txt" id="jianjie_text">
              {{doctorDetial.DoctDesc == ''? '暂无': doctorDetial.DoctDesc}}
            </p>

//判断是否显示展开按钮
    isShowBtn(){
      setTimeout(() => {
         if(this.active == 1){
          console.log(document.getElementById('zye_text').offsetHeight/parseFloat(document.getElementById('jianjie_text').style.lineHeight))
              console.log("333",parseFloat(document.getElementById('jianjie_text').style.lineHeight))
              if(Math.round(document.getElementById('jianjie_text').offsetHeight/parseFloat(document.getElementById('jianjie_text').style.lineHeight))==3){
                this.isShow=true
              }else{
                this.isShow=false;
              }
              
            }
      }, 300);



    },
 open(val, text) {
      let open = document.getElementById(val);
      let p = document.getElementById(text);
      if (open.innerHTML == "展开") {
        p.classList.remove("many-txt");
        p.classList.add("all-txt");
        open.innerHTML = "收起";
      } else {
        p.classList.remove("all-txt");
        p.classList.add("many-txt");
        open.innerHTML = "展开";
      }
    },

.many-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.all-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 100;
  -webkit-box-orient: vertical;
}