vue 实现多行文本 超出行数后 省略号，出现查看全文按钮，点击 展示全文

• HTML

 
       

         

           
           
         
         

           

             
{{moodEssayDate.essayTitle}}
             {{moodEssayDate.ts}}
           
           

             

               
{{moodEssayDate.essayContent}}
               展开查看全文
               收起
             
             

               
——无心语录
               删除
             
           
         
       
      

• JS部分

 //随笔初始化
      getAllMessages(){
        getAllMessages().then(res=>{
          for(let i=0;i {
            if(this.$refs.articleContent){
              for(let i = 0;i=189){
                  this.$set(this.moodEssayDates[i], 'showAllContentBtn', true)
                }
              }
            }
          }, 200);
        })
      },
      //展开全文
      showAllContent(moodEssayDate,index){
        this.$set(this.moodEssayDates[index], 'isAll', false)
        this.$set(this.moodEssayDates[index], 'showAllContentBtn', false)
        this.$set(this.moodEssayDates[index], 'packUpArticle', true)
      },
      // 收起
      NotShowAllContent(moodEssayDate,index){
        this.$set(this.moodEssayDates[index], 'isAll', true)
        this.$set(this.moodEssayDates[index], 'showAllContentBtn', true)
        this.$set(this.moodEssayDates[index], 'packUpArticle', false)
      },

• 效果图
•