im-uniapp/components/gaoyia-parse/parse.vue

<!--**
 * forked from：https://github.com/F-loat/mpvue-wxParse
 *
 * github地址: https://github.com/dcloudio/uParse
 *
 * for: uni-app框架下 富文本解析
 * 
 * 优化 by gaoyia@qq.com  https://github.com/gaoyia/parse
 */-->

<template>
  <!--基础元素-->
  <div class="wxParse" :class="className" :style="'user-select:' + userSelect">
    <block v-for="(node, index) of nodes" :key="index" v-if="!loading">
      <wxParseTemplate :node="node" />
    </block>
  </div>
</template>

<script>
import HtmlToJson from "./libs/html2json";
import wxParseTemplate from "./components/wxParseTemplate0";

export default {
  name: "wxParse",
  props: {
    // user-select:none;
    userSelect: {
      type: String,
      default: "text", //none |text| all | element
    },
    imgOptions: {
      type: [Object, Boolean],
      default: function () {
        return {
          loop: false,
          indicator: "number",
          longPressActions: false,
          // longPressActions: {
          // 	 itemList: ['发送给朋友', '保存图片', '收藏'],
          // 		success: function (res) {
          // 			console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
          // 		},
          // 		fail: function (res) {
          // 			console.log(res.errMsg);
          // 		}
          // 	}
          // }
        };
      },
    },
    loading: {
      type: Boolean,
      default: false,
    },
    className: {
      type: String,
      default: "",
    },
    content: {
      type: String,
      default: "",
    },
    noData: {
      type: String,
      default: '<div style="color: red;">数据不能为空</div>',
    },
    startHandler: {
      type: Function,
      default() {
        return (node) => {
          node.attr.class = null;
          node.attr.style = null;
        };
      },
    },
    endHandler: {
      type: Function,
      default: null,
    },
    charsHandler: {
      type: Function,
      default: null,
    },
    imageProp: {
      type: Object,
      default() {
        return {
          mode: "aspectFit",
          padding: 0,
          lazyLoad: false,
          domain: "",
        };
      },
    },
  },
  components: {
    wxParseTemplate,
  },
  data() {
    return {
      nodes: {},
      imageUrls: [],
      wxParseWidth: {
        value: 0,
      },
    };
  },
  computed: {},
  mounted() {
    this.setHtml();
  },
  methods: {
    setHtml() {
      this.getWidth().then((data) => {
        this.wxParseWidth.value = data;
      });
      let {
        content,
        noData,
        imageProp,
        startHandler,
        endHandler,
        charsHandler,
      } = this;
      let parseData = content || noData;
      let customHandler = {
        start: startHandler,
        end: endHandler,
        chars: charsHandler,
      };
      let results = HtmlToJson(parseData, customHandler, imageProp, this);

      this.imageUrls = results.imageUrls;
      // this.nodes = results.nodes;

      this.nodes = [];
      results.nodes.forEach((item) => {
        setTimeout(() => {
          this.nodes.push(item);
        }, 0);
      });
    },
    getWidth() {
      return new Promise((res, rej) => {
        // #ifndef MP-ALIPAY || MP-BAIDU
        uni
          .createSelectorQuery()
          .in(this)
          .select(".wxParse")
          .fields(
            {
              size: true,
              scrollOffset: true,
            },
            (data) => {
              res(data.width);
            },
          )
          .exec();
        // #endif
        // #ifdef MP-BAIDU
        const query = swan.createSelectorQuery();
        query.select(".wxParse").boundingClientRect();
        query.exec((obj) => {
          const rect = obj[0];
          if (rect) {
            res(rect.width);
          }
        });
        // #endif
        // #ifdef MP-ALIPAY
        my.createSelectorQuery()
          .select(".wxParse")
          .boundingClientRect()
          .exec((ret) => {
            res(ret[0].width);
          });
        // #endif
      });
    },
    navigate(href, $event, attr) {
      console.log(href, attr);
      this.$emit("navigate", href, $event);
    },
    preview(src, $event) {
      // if (!this.imageUrls.length || typeof this.imgOptions === 'boolean') {
      // } else {
      // 	uni.previewImage({
      // 		current: src,
      // 		urls: this.imageUrls,
      // 		loop: this.imgOptions.loop,
      // 		indicator: this.imgOptions.indicator,
      // 		longPressActions: this.imgOptions.longPressActions
      // 	});
      // }
      // this.$emit('preview', src, $event);
    },
    removeImageUrl(src) {
      const { imageUrls } = this;
      imageUrls.splice(imageUrls.indexOf(src), 1);
    },
  },
  // 父组件中提供
  provide() {
    return {
      parseWidth: this.wxParseWidth,
      parseSelect: this.userSelect,
      // 提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。
    };
  },
  watch: {
    content() {
      this.setHtml();
    },
    // content: {
    // 	handler: function(newVal, oldVal) {
    // 		if (newVal !== oldVal) {
    //
    // 		}
    // 	},
    // 	deep: true
    // }
  },
};
</script>