uniapp显示富文本效果demo（整理）

<template>
  <view class="rtfBox">
    <view class="margin-left30 margin-right30 margin-top20 margin-bottom20">
      <rich-text :nodes="content"></rich-text>
    </view>
  </view>
</template>
<script>
  export default {
    components: {
    },
    data() {
      return {
        content: '',
      }
    },
    // 页面加载
    onLoad(e) {
      //uni.hideTabBar(); //不让底部显示tab选项
      console.log(e,'eeee');
      uni.setNavigationBarTitle({
        title: e.title
      })
      // var data = this.$.get_data('contentTxt');
      var data = '<p>隐私政策11</p><p><img src="https://public.haotiku.com/haotiku/videos/20220216/1644974733576.png" alt="" width="571" height="337" /></p><p>应用内集成的第三方SDK以及插件：<br />1.cn.jpush.android: 用来给用户推送应用内资讯信息以及消息通知。<br />2.com.alipay：用于app内会员支付信息费<br />3.com.umeng.commonsdk：用于微信 qq等第三方登录授权以及分享。<br />4.com.amap.api：高德地图用于发布职位定位，已经用户入职导航。</p>';
      data = data.replace(/\<img/g, "<img style='width: 100%;'");
      this.content = data;
    },
    // 页面显示
    onShow() {
    },
    // 方法
    methods: {
    },
    // 计算属性
    computed: {
    },
    // 侦听器
    watch: {
    },
    // 页面隐藏
    onHide() {
    },
    // 页面卸载
    onUnload() {
    },
    // 触发下拉刷新
    onPullDownRefresh() {},
    // 页面上拉触底事件的处理函数
    onReachBottom() {},
  }
</script>
<style lang="scss" scoped>
  .rtfBox {}
</style>

<!-- 主要代码 -->
<rich-text :nodes="content"></rich-text>
<script>
  export default {
    data() {
      return {
        content:''
      }
    },
    onLoad(){
      var data = '<p>隐私政策11</p><p><img src="https://public.haotiku.com/haotiku/videos/20220216/1644974733576.png" alt="" width="571" height="337" /></p><p>应用内集成的第三方SDK以及插件：<br />1.cn.jpush.android: 用来给用户推送应用内资讯信息以及消息通知。<br />2.com.alipay：用于app内会员支付信息费<br />3.com.umeng.commonsdk：用于微信 qq等第三方登录授权以及分享。<br />4.com.amap.api：高德地图用于发布职位定位，已经用户入职导航。</p>';
      data = data.replace(/\<img/g, "<img style='width: 100%;'")
      this.content= data;
    },
    methods: {
    }
  }
</script>