wxParseTemplate3.vue 2.3 KB

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