1***@qq.com
1***@qq.com
  • 发布:2022-10-18 22:48
  • 更新:2022-10-18 22:48
  • 阅读:346

骚操作,nvue/weex获取文字行数,实现展开收起

分类:nvue

HTML部分
一行text组件,一行textarea组件,共用一个class 这个class里很简单,只有字体大小和颜色

<text class="content"  :style="`lines:${lines};text-overflow: ellipsis;`">{{overview}}</text>  
<textarea class="content" :value="overview" style="height: 0rpx;" disabled @linechange = "linechange" ></textarea>  
<view class="showmore"  @click="showMoreing" v-if="showMore">  
                        <text class="topic-content" style="color: #303133;" >展开</text>  

                    </view>  
<view class="closemore" v-if="!showMore&& lineCount>3">  
                        <text class="topic-content" style="color: #303133;" >收起</text>  

                    </view>  

给textarea高度设为0 实现了display:none的效果 组件不显示,但是@linechange事件 却接收到了行数

linechange(event){  
                console.log(event)  

                const  lineCount = event.detail.lineCount //行数  
                this.lineCount = lineCount   
                if(lineCount>3){ //如果大于3行,显示展开阅读  
                    this.showMore = true  
                }  
},  
 showMoreing(){  
                                this.lines = 1000  
                this.showMore =false  

},  
 closeMoreing(){  
                this.lines = 3  
                this.showMore =true  

 }  

点击展开按钮,把lines改为1000 或者是 this.lineCount 然后把按钮隐藏。
点击收齐按钮,把lines改为3行,显示收起按钮

0 关注 分享

要回复文章请先登录注册