机遇屋-uniapp 富文本折叠展开组件

uniapp 富文本折叠展开组件

作者：ych

#### 组件代码
```
<template>
  <view>
    <view style="position: relative" v-if="isHide">
      <view class="dt-content" :style="'-webkit-line-clamp:'+line">
        <rich-text class="content" v-html="dt"></rich-text>
      </view>
      <view class="button-show" @tap="isHide = false" v-if="enableButton && lines > line">
        <text style="color: #4388fd">{{ expandText }}</text>
      </view>
    </view>
    <view v-else>
      <view>
        <rich-text class="content" v-html="dt"></rich-text>
      </view>
      <view class="fold-hint" v-if="foldHint">
        <view @tap="isHide = true">
          {{ foldHint }}
        </view>
      </view>
    </view>
    <view>
      <text class="placeholder">
        {{ placeholder }}
      </text>
    </view>
  </view>
</template>

watch:{
    dt(){
      let that = this
      setTimeout(() => {
        let query = uni.createSelectorQuery().in(that);
        // 获取所有文本在html中的高度
        query.select('.content').boundingClientRect(data => {
          that.textHeight = data.height
        }).exec();
      }, 100)
    }
  },

mounted() {
    if (this.enableButton) {
      let query = uni.createSelectorQuery().in(this);
      // 获取所有文本在html中的高度
      query.select('.content').boundingClientRect(data => {
        this.textHeight = data.height
      }).exec();

// 通过占位元素获取单行文本的高度
      query.select('.placeholder').boundingClientRect(data => {
        this.lineHeight = data.height
      }).exec();

}
    // 获取单行文本高度后，置空占位元素，使其释放占位
    this.placeholder = ''
  },
  computed: {
    // 全文本所占总行数
    lines() {
      if (!this.enableButton) {
        return this.line
      }
      return Math.floor(this.textHeight > 0 && this.lineHeight > 0 ? this.textHeight / this.lineHeight : 0)
    }
  }
}
</script>

.button-show {
  width: 70rpx;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  text-align: right;
  background-image: linear-gradient(-180deg, rgba(233, 236, 239, 0) 50%, #FFF 80%);
  padding-top: 2rem;
}

.fold-hint {
  color: #4388fd;
  text-align: right;
}
</style>
```
#### 调用
```
<template>
	<view class="page">
		<MoteLinesDivide :dt="replacePtag(context)" :line="5" expandText="展开" foldHint="收起"
			style="text-align: justify;font-size: 30rpx;" />
	</view>
</template>

```

评论区

先去登录

uniapp 富文本折叠展开组件

相关推荐

评论区