wxParseTemplate0.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  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. <!--table类型-->
  41. <block v-else-if="node.tag == 'table'">
  42. <view :class="node.classStr" class="table" :style="node.styleStr">
  43. <block v-for="(node, index) of node.nodes" :key="index">
  44. <wx-parse-template :node="node" />
  45. </block>
  46. </view>
  47. </block>
  48. <!--br类型-->
  49. <block v-else-if="node.tag == 'br'">
  50. <text>\n</text>
  51. </block>
  52. <!--其他标签-->
  53. <block v-else>
  54. <view :class="node.classStr" :style="node.styleStr">
  55. <block v-for="(node, index) of node.nodes" :key="index">
  56. <wx-parse-template :node="node" />
  57. </block>
  58. </view>
  59. </block>
  60. </block>
  61. <!--判断是否是文本节点-->
  62. <block v-else-if="node.node == 'text'">{{node.text}}</block>
  63. </view>
  64. </template>
  65. <script>
  66. import wxParseTemplate from './wxParseTemplate1';
  67. import wxParseImg from './wxParseImg';
  68. import wxParseVideo from './wxParseVideo';
  69. import wxParseAudio from './wxParseAudio';
  70. export default {
  71. name: 'wxParseTemplate0',
  72. props: {
  73. node: {},
  74. },
  75. components: {
  76. wxParseTemplate,
  77. wxParseImg,
  78. wxParseVideo,
  79. wxParseAudio,
  80. },
  81. methods: {
  82. wxParseATap(e) {
  83. const {
  84. href
  85. } = e.currentTarget.dataset;// TODO currentTarget才有dataset
  86. if (!href) return;
  87. let parent = this.$parent;
  88. while(!parent.preview || typeof parent.preview !== 'function') {// TODO 遍历获取父节点执行方法
  89. parent = parent.$parent;
  90. }
  91. parent.navigate(href, e);
  92. },
  93. },
  94. };
  95. </script>