rich-text 富文本

rich-text 富文本

普通的text文件不能显示格式，富文本格式rtf文件可以显示出很多格式信息，比如可以在一个文本包含不同颜色、不同字号的文本
官方

<rich-text :nodes="content"></rich-text>
content: {`<span style='color:red;'>展开</span>关闭`,}

<template>
  <view>
    <view class="u-content" :style="{ 
      height: isLongContent && !showRead ? showHeight + 'rpx' : 'auto',textIndent: '2em'}" >
      <rich-text :nodes="content"></rich-text>
    </view>
    <view class="showmore-wrap" @click="toggleRead" :style="[ showRead ? {} : shadowStyle]">
      <text> {{ showRead ? openText : closeText }} </text>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        content: `<div style='color:black;'>展开关闭</div>
        展开关闭展开关闭展开关闭展开关闭展开关闭展开关闭展开关闭展开关闭展开关闭
        展开关闭展开关闭展开关闭展开关闭展开关闭展开关闭展开关闭展开关闭展开关闭
        展开关闭展开关闭展开关闭展开关闭展开关闭展开关闭展开关闭展开关闭展开关闭
        展开关闭展开关闭展开关闭展开关闭展开关闭展开关闭展开关闭展开关闭展开关闭
        展开关闭展开关闭展开关闭展开关闭展开关闭展开关闭展开关闭展开关闭展开关闭`,
        showHeight:400,
        isLongContent:true,
        showRead:false, // 当前隐藏显示的状态
        openText:"关闭",
        closeText:"展开",
        shadowStyle:{
          backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
          paddingTop: "300rpx",
          marginTop: "-300rpx"
        }
      }
    },
    methods: {
      toggleRead(){
        this.showRead = !this.showRead 
      },
    
    }
  }
</script>

<style>
  .u-content{
    font-size: 30rpx;
    color: #606266;
    text-align: left;
    line-height: 1.8;
    overflow: hidden;
    width: 80%;
    margin: 0 auto;
  }
  .showmore-wrap{
    position: relative;
    width: 100%;
    padding-bottom: 26rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

待续。。。