uniapp 富文本图片查看器实现步骤

因为uni-app的 <rich-text> 组件并不支持点击事件

所以这里就引入了 mp-html插件
插件地址：https://ext.dcloud.net.cn/plugin?id=805
文档地址：https://jin-yufeng.gitee.io/mp-html/#/overview/quickstart

在使用插件的过程中遇到一个问题，我们上传的富文本中的图片，是 <img />标签，但是在手机上，会被uni-app默认的图片大小影响

这里尝试过不少解决方案之后，是通过修改mp-html的代码来解决的

如图：
1、将<img /> 标签改成了 <image />
2、添加了 mode 判断 :mode="n.h?'':'widthFix'"
3、修改了 _img 样式

/* 图片默认效果 */
._img {
  width: 100%;
  max-width: 100%;
  -webkit-touch-callout: none;
}

图片的预览和下载都是使用的这个插件，只不过做了部分调整

/**
     * @description 图片点击事件
     * @param {Event} e
     */
    imgTap(e) {
      var attrs = this.childs[e.currentTarget.dataset.i].attrs
      if (attrs.ignore)
        return
      attrs.src = attrs['data-src'] || attrs.src
      this.root.$emit('imgtap', attrs)
      // 自动预览图片
      if (this.root.previewImg) {
        uni.previewImage({
          current: parseInt(attrs.i),
          indicator: 'default',
          urls: this.root.imgList,
          longPressActions: {
            itemList: ['保存到相册'],
            success: (e) => {
              this.authorityJudgment();
              uni.downloadFile({
                url: this.root.imgList[e.index],
                success: (res) => {
                  console.log('[ 文件的临时路径 ]', res);
                  uni.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath,
                    success() {
                      uni.showToast({
                        title: '保存成功'
                      })
                    },
                    fail: (err) => {
                      console.log('[ saveImageToPhotosAlbum 异常 ]', err);
                    }
                  })
                },
                fail: () => {
                  console.log('[ downloadFile 异常 ]')
                }
              })
            }
          }
        })
      }
    },

    /**
     * 权限弹窗
     */
    async authorityJudgment() {
      switch (uni.getSystemInfoSync().platform) {
        case 'android':
          const isHave = await permision.requestAndroidPermission('android.permission.WRITE_EXTERNAL_STORAGE');
          if (isHave == 1) {
            console.log('有权限')
          } else if (isHave == 0) {
            // 未授权
            uni.showModal({
              title: '提示',
              content: '请先打开APP读写手机存储权限',
              showCancel: true,
              success: function(res) {
                if (res.confirm) {
                  permision.gotoAppPermissionSetting()
                }
              }
            });
            return;
          } else {
            // 永久拒绝
            uni.showModal({
              title: '提示',
              content: '请先打开APP读写手机存储权限',
              showCancel: true,
              success: function(res) {
                if (res.confirm) {
                  permision.gotoAppPermissionSetting()
                }
              }
            });
            return;
          }
          break;
        case 'ios':

          break;
      }
    },