文本省略号后面加上展开/收起

想要获取省略文本高度来达到是否显示“展开”这个按键

网上很多就说使用ref获取这个文本的dom

然后就开始 this.$refs.isopencontent.clientHeight 和this.$refs.isopencontent.scrollHeight 

我弄了很久，发现这可能不适合我 ？？？

我的文本是动态的，点击别的按钮会变内容

那么就需要 this.$nextTick(()=>{})去包裹我的判断  注意！！这里需要操作dom, 应该是等待 Vue 完成更新 DOM之后

 

watch:{

"我的文本内容":function(){

        this.$nextTick(() => { // <<==这个是解决动态文本的关键，渲染完毕之后才可以获取他的高度

          let multi =  this.$refs.isopencontent //获取这个喜欢动的文本dom

          if (multi.scrollHeight > multi.clientHeight) {

            this.showbtn =true // 展开显示

          }else{

            this.showbtn =false //展开不显示

          }

        })

}

 

 <div class="pannel-show">

                   <div class="title">{{pannelshow.name}}主要服务包括：</div>

                   <div class="content"> <span  ref="isopencontent"  :class="{hide:!isopen}">{{pannelshow.content}}</span>

                   <div class="right" v-show="showbtn" ><span class="sl" v-show="!isopen">...</span>           <span class="open" @click="isopen=!isopen" >{{isopen?'收起':'展开'}}</span></div>

                   </div>

                </div>