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 个评论
要回复文章请先登录或注册