wxParseTemplate7.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. <template>
  2. <!--判断是否是标签节点-->
  3. <block v-if="node.node == 'element'">
  4. <!--button类型-->
  5. <button
  6. v-if="node.tag == 'button'"
  7. type="default"
  8. size="mini"
  9. :class="node.classStr"
  10. :style="node.styleStr"
  11. >
  12. <wx-parse-template :node="node" />
  13. </button>
  14. <!--a类型-->
  15. <view
  16. v-else-if="node.tag == 'a'"
  17. @click="wxParseATap(node.attr, $event)"
  18. :class="node.classStr"
  19. :data-href="node.attr.href"
  20. :style="node.styleStr"
  21. >
  22. <block v-for="(node, index) of node.nodes" :key="index">
  23. <wx-parse-template :node="node" />
  24. </block>
  25. </view>
  26. <!--li类型-->
  27. <view
  28. v-else-if="node.tag == 'li'"
  29. :class="node.classStr"
  30. :style="node.styleStr"
  31. >
  32. <block v-for="(node, index) of node.nodes" :key="index">
  33. <wx-parse-template :node="node" />
  34. </block>
  35. </view>
  36. <!--table类型-->
  37. <wx-parse-table
  38. v-else-if="node.tag == 'table'"
  39. :class="node.classStr"
  40. :style="node.styleStr"
  41. :node="node"
  42. />
  43. <!--br类型-->
  44. <!-- #ifndef H5 -->
  45. <text v-else-if="node.tag == 'br'">\n</text>
  46. <!-- #endif -->
  47. <!-- #ifdef H5 -->
  48. <br v-else-if="node.tag == 'br'" />
  49. <!-- #endif -->
  50. <!--video类型-->
  51. <wx-parse-video :node="node" v-else-if="node.tag == 'video'" />
  52. <!--audio类型-->
  53. <wx-parse-audio :node="node" v-else-if="node.tag == 'audio'" />
  54. <!--img类型-->
  55. <wx-parse-img
  56. :node="node"
  57. v-else-if="node.tag == 'img'"
  58. :style="node.styleStr"
  59. />
  60. <!--其他标签-->
  61. <view v-else :class="node.classStr" :style="node.styleStr">
  62. <block v-for="(node, index) of node.nodes" :key="index">
  63. <wx-parse-template :node="node" />
  64. </block>
  65. </view>
  66. </block>
  67. <!--判断是否是文本节点-->
  68. <block v-else-if="node.node == 'text'">{{ node.text }}</block>
  69. </template>
  70. <script>
  71. import wxParseTemplate from "./wxParseTemplate8";
  72. import wxParseImg from "./wxParseImg";
  73. import wxParseVideo from "./wxParseVideo";
  74. import wxParseAudio from "./wxParseAudio";
  75. import wxParseTable from "./wxParseTable";
  76. export default {
  77. name: "wxParseTemplate7",
  78. props: {
  79. node: {},
  80. },
  81. components: {
  82. wxParseTemplate,
  83. wxParseImg,
  84. wxParseVideo,
  85. wxParseAudio,
  86. wxParseTable,
  87. },
  88. methods: {
  89. wxParseATap(attr, e) {
  90. const { href } = e.currentTarget.dataset;
  91. if (!href) return;
  92. let parent = this.$parent;
  93. while (!parent.preview || typeof parent.preview !== "function") {
  94. parent = parent.$parent;
  95. }
  96. parent.navigate(href, e, attr);
  97. },
  98. },
  99. };
  100. </script>