u-parse.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <!--**
  2. * forked from:https://github.com/F-loat/mpvue-wxParse
  3. *
  4. * github地址: https://github.com/dcloudio/uParse
  5. *
  6. * for: uni-app框架下 富文本解析
  7. */-->
  8. <template>
  9. <!--基础元素-->
  10. <div class="wxParse" :class="className" v-if="!loading">
  11. <block v-for="(node,index) of nodes" :key="index">
  12. <wxParseTemplate :node="node" />
  13. </block>
  14. </div>
  15. </template>
  16. <script>
  17. import HtmlToJson from './libs/html2json';
  18. import wxParseTemplate from './components/wxParseTemplate0';
  19. export default {
  20. name: 'wxParse',
  21. props: {
  22. loading: {
  23. type: Boolean,
  24. default: false,
  25. },
  26. className: {
  27. type: String,
  28. default: '',
  29. },
  30. content: {
  31. type: String,
  32. default: '',
  33. },
  34. noData: {
  35. type: String,
  36. default: '<div style="color: red;">数据不能为空</div>',
  37. },
  38. startHandler: {
  39. type: Function,
  40. default() {
  41. return (node) => {
  42. node.attr.class = null;
  43. node.attr.style = null;
  44. };
  45. },
  46. },
  47. endHandler: {
  48. type: Function,
  49. default: null,
  50. },
  51. charsHandler: {
  52. type: Function,
  53. default: null,
  54. },
  55. imageProp: {
  56. type: Object,
  57. default() {
  58. return {
  59. mode: 'aspectFit',
  60. padding: 0,
  61. lazyLoad: false,
  62. domain: '',
  63. };
  64. },
  65. },
  66. },
  67. components: {
  68. wxParseTemplate,
  69. },
  70. data() {
  71. return {
  72. imageUrls: [],
  73. };
  74. },
  75. computed: {
  76. nodes() {
  77. const {
  78. content,
  79. noData,
  80. imageProp,
  81. startHandler,
  82. endHandler,
  83. charsHandler,
  84. } = this;
  85. const parseData = content || noData;
  86. const customHandler = {
  87. start: startHandler,
  88. end: endHandler,
  89. chars: charsHandler,
  90. };
  91. const results = HtmlToJson(parseData, customHandler, imageProp, this);
  92. this.imageUrls = results.imageUrls;
  93. console.log(results)
  94. return results.nodes;
  95. },
  96. },
  97. methods: {
  98. navigate(href, $event) {
  99. this.$emit('navigate', href, $event);
  100. },
  101. preview(src, $event) {
  102. if (!this.imageUrls.length) return;
  103. wx.previewImage({
  104. current: src,
  105. urls: this.imageUrls,
  106. });
  107. this.$emit('preview', src, $event);
  108. },
  109. removeImageUrl(src) {
  110. const { imageUrls } = this;
  111. imageUrls.splice(imageUrls.indexOf(src), 1);
  112. },
  113. },
  114. };
  115. </script>