dengjie commit :首页和详情页样式初步完成
This commit is contained in:
27
components/u-parse/components/wxParseAudio.vue
Normal file
27
components/u-parse/components/wxParseAudio.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<!--增加audio标签支持-->
|
||||
<audio
|
||||
:id="node.attr.id"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
:src="node.attr.src"
|
||||
:loop="node.attr.loop"
|
||||
:poster="node.attr.poster"
|
||||
:name="node.attr.name"
|
||||
:author="node.attr.author"
|
||||
controls></audio>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'wxParseAudio',
|
||||
props: {
|
||||
node: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
86
components/u-parse/components/wxParseImg.vue
Normal file
86
components/u-parse/components/wxParseImg.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<image
|
||||
:mode="node.attr.mode"
|
||||
:lazy-load="node.attr.lazyLoad"
|
||||
:class="node.classStr"
|
||||
:style="newStyleStr || node.styleStr"
|
||||
:data-src="node.attr.src"
|
||||
:src="node.attr.src"
|
||||
@tap="wxParseImgTap"
|
||||
@load="wxParseImgLoad"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'wxParseImg',
|
||||
data() {
|
||||
return {
|
||||
newStyleStr: '',
|
||||
preview: true,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
node: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
wxParseImgTap(e) {
|
||||
if (!this.preview) return;
|
||||
const { src } = e.currentTarget.dataset;
|
||||
if (!src) return;
|
||||
let parent = this.$parent;
|
||||
while(!parent.preview || typeof parent.preview !== 'function') {// TODO 遍历获取父节点执行方法
|
||||
parent = parent.$parent;
|
||||
}
|
||||
parent.preview(src, e);
|
||||
},
|
||||
// 图片视觉宽高计算函数区
|
||||
wxParseImgLoad(e) {
|
||||
const { src } = e.currentTarget.dataset;
|
||||
if (!src) return;
|
||||
const { width, height } = e.mp.detail;
|
||||
const recal = this.wxAutoImageCal(width, height);
|
||||
const { imageheight, imageWidth } = recal;
|
||||
const { padding, mode } = this.node.attr;
|
||||
const { styleStr } = this.node;
|
||||
const imageHeightStyle = mode === 'widthFix' ? '' : `height: ${imageheight}px;`;
|
||||
this.newStyleStr = `${styleStr}; ${imageHeightStyle}; width: ${imageWidth}px; padding: 0 ${+padding}px;`;
|
||||
},
|
||||
// 计算视觉优先的图片宽高
|
||||
wxAutoImageCal(originalWidth, originalHeight) {
|
||||
// 获取图片的原始长宽
|
||||
const { padding } = this.node.attr;
|
||||
const windowWidth = this.node.$screen.width - (2 * padding);
|
||||
const results = {};
|
||||
|
||||
if (originalWidth < 60 || originalHeight < 60) {
|
||||
const { src } = this.node.attr;
|
||||
let parent = this.$parent;
|
||||
while(!parent.preview || typeof parent.preview !== 'function') {
|
||||
parent = parent.$parent;
|
||||
}
|
||||
parent.removeImageUrl(src);
|
||||
this.preview = false;
|
||||
}
|
||||
|
||||
// 判断按照那种方式进行缩放
|
||||
if (originalWidth > windowWidth) {
|
||||
// 在图片width大于手机屏幕width时候
|
||||
results.imageWidth = windowWidth;
|
||||
results.imageheight = windowWidth * (originalHeight / originalWidth);
|
||||
} else {
|
||||
// 否则展示原来的数据
|
||||
results.imageWidth = originalWidth;
|
||||
results.imageheight = originalHeight;
|
||||
}
|
||||
|
||||
return results;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
107
components/u-parse/components/wxParseTemplate0.vue
Normal file
107
components/u-parse/components/wxParseTemplate0.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<view>
|
||||
<!--判断是否是标签节点-->
|
||||
<block v-if="node.node == 'element'">
|
||||
<block v-if="node.tag == 'button'">
|
||||
<button type="default" size="mini">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</button>
|
||||
</block>
|
||||
|
||||
<!--li类型-->
|
||||
<block v-else-if="node.tag == 'li'">
|
||||
<view :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--video类型-->
|
||||
<block v-else-if="node.tag == 'video'">
|
||||
<wx-parse-video :node="node" />
|
||||
</block>
|
||||
|
||||
<!--audio类型-->
|
||||
<block v-else-if="node.tag == 'audio'">
|
||||
<wx-parse-audio :node="node" />
|
||||
</block>
|
||||
|
||||
<!--img类型-->
|
||||
<block v-else-if="node.tag == 'img'">
|
||||
<wx-parse-img :node="node" />
|
||||
</block>
|
||||
|
||||
<!--a类型-->
|
||||
<block v-else-if="node.tag == 'a'">
|
||||
<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--table类型-->
|
||||
<block v-else-if="node.tag == 'table'">
|
||||
<view :class="node.classStr" class="table" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--br类型-->
|
||||
<block v-else-if="node.tag == 'br'">
|
||||
<text>\n</text>
|
||||
</block>
|
||||
|
||||
<!--其他标签-->
|
||||
<block v-else>
|
||||
<view :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
</block>
|
||||
|
||||
<!--判断是否是文本节点-->
|
||||
<block v-else-if="node.node == 'text'">{{node.text}}</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import wxParseTemplate from './wxParseTemplate1';
|
||||
import wxParseImg from './wxParseImg';
|
||||
import wxParseVideo from './wxParseVideo';
|
||||
import wxParseAudio from './wxParseAudio';
|
||||
|
||||
export default {
|
||||
name: 'wxParseTemplate0',
|
||||
props: {
|
||||
node: {},
|
||||
},
|
||||
components: {
|
||||
wxParseTemplate,
|
||||
wxParseImg,
|
||||
wxParseVideo,
|
||||
wxParseAudio,
|
||||
},
|
||||
methods: {
|
||||
wxParseATap(e) {
|
||||
const {
|
||||
href
|
||||
} = e.currentTarget.dataset;// TODO currentTarget才有dataset
|
||||
if (!href) return;
|
||||
let parent = this.$parent;
|
||||
while(!parent.preview || typeof parent.preview !== 'function') {// TODO 遍历获取父节点执行方法
|
||||
parent = parent.$parent;
|
||||
}
|
||||
parent.navigate(href, e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
99
components/u-parse/components/wxParseTemplate1.vue
Normal file
99
components/u-parse/components/wxParseTemplate1.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<view :class="(node.tag == 'li' ? node.classStr : (node.node==='text'?'text':''))">
|
||||
<!--判断是否是标签节点-->
|
||||
<block v-if="node.node == 'element'">
|
||||
<block v-if="node.tag == 'button'">
|
||||
<button type="default" size="mini">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</button>
|
||||
</block>
|
||||
|
||||
<!--li类型-->
|
||||
<block v-else-if="node.tag == 'li'">
|
||||
<!-- <view :class="node.classStr" :style="node.styleStr"> -->
|
||||
<view :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--video类型-->
|
||||
<block v-else-if="node.tag == 'video'">
|
||||
<wx-parse-video :node="node" />
|
||||
</block>
|
||||
|
||||
<!--audio类型-->
|
||||
<block v-else-if="node.tag == 'audio'">
|
||||
<wx-parse-audio :node="node" />
|
||||
</block>
|
||||
|
||||
<!--img类型-->
|
||||
<block v-else-if="node.tag == 'img'">
|
||||
<wx-parse-img :node="node" />
|
||||
</block>
|
||||
|
||||
<!--a类型-->
|
||||
<block v-else-if="node.tag == 'a'">
|
||||
<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--br类型-->
|
||||
<block v-else-if="node.tag == 'br'">
|
||||
<text>\n</text>
|
||||
</block>
|
||||
|
||||
<!--其他标签-->
|
||||
<block v-else>
|
||||
<view :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
</block>
|
||||
|
||||
<!--判断是否是文本节点-->
|
||||
<block v-else-if="node.node == 'text'">{{node.text}}</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import wxParseTemplate from './wxParseTemplate2';
|
||||
import wxParseImg from './wxParseImg';
|
||||
import wxParseVideo from './wxParseVideo';
|
||||
import wxParseAudio from './wxParseAudio';
|
||||
|
||||
export default {
|
||||
name: 'wxParseTemplate1',
|
||||
props: {
|
||||
node: {},
|
||||
},
|
||||
components: {
|
||||
wxParseTemplate,
|
||||
wxParseImg,
|
||||
wxParseVideo,
|
||||
wxParseAudio,
|
||||
},
|
||||
methods: {
|
||||
wxParseATap(e) {
|
||||
const {
|
||||
href
|
||||
} = e.currentTarget.dataset;
|
||||
if (!href) return;
|
||||
let parent = this.$parent;
|
||||
while(!parent.preview || typeof parent.preview !== 'function') {
|
||||
parent = parent.$parent;
|
||||
}
|
||||
parent.navigate(href, e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
97
components/u-parse/components/wxParseTemplate10.vue
Normal file
97
components/u-parse/components/wxParseTemplate10.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<view>
|
||||
<!--判断是否是标签节点-->
|
||||
<block v-if="node.node == 'element'">
|
||||
<block v-if="node.tag == 'button'">
|
||||
<button type="default" size="mini">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</button>
|
||||
</block>
|
||||
|
||||
<!--li类型-->
|
||||
<block v-else-if="node.tag == 'li'">
|
||||
<view :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--video类型-->
|
||||
<block v-else-if="node.tag == 'video'">
|
||||
<wx-parse-video :node="node" />
|
||||
</block>
|
||||
|
||||
<!--audio类型-->
|
||||
<block v-else-if="node.tag == 'audio'">
|
||||
<wx-parse-audio :node="node" />
|
||||
</block>
|
||||
|
||||
<!--img类型-->
|
||||
<block v-else-if="node.tag == 'img'">
|
||||
<wx-parse-img :node="node" />
|
||||
</block>
|
||||
|
||||
<!--a类型-->
|
||||
<block v-else-if="node.tag == 'a'">
|
||||
<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--br类型-->
|
||||
<block v-else-if="node.tag == 'br'">
|
||||
<text>\n</text>
|
||||
</block>
|
||||
|
||||
<!--其他标签-->
|
||||
<block v-else>
|
||||
<view :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
|
||||
<!--判断是否是文本节点-->
|
||||
<block v-else-if="node.node == 'text'">{{node.text}}</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import wxParseTemplate from './wxParseTemplate11';
|
||||
import wxParseImg from './wxParseImg';
|
||||
import wxParseVideo from './wxParseVideo';
|
||||
import wxParseAudio from './wxParseAudio';
|
||||
|
||||
export default {
|
||||
name: 'wxParseTemplate10',
|
||||
props: {
|
||||
node: {},
|
||||
},
|
||||
components: {
|
||||
wxParseTemplate,
|
||||
wxParseImg,
|
||||
wxParseVideo,
|
||||
wxParseAudio,
|
||||
},
|
||||
methods: {
|
||||
wxParseATap(e) {
|
||||
const {
|
||||
href
|
||||
} = e.currentTarget.dataset;
|
||||
if (!href) return;
|
||||
let parent = this.$parent;
|
||||
while(!parent.preview || typeof parent.preview !== 'function') {
|
||||
parent = parent.$parent;
|
||||
}
|
||||
parent.navigate(href, e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
87
components/u-parse/components/wxParseTemplate11.vue
Normal file
87
components/u-parse/components/wxParseTemplate11.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<view>
|
||||
<!--判断是否是标签节点-->
|
||||
<block v-if="node.node == 'element'">
|
||||
<!--button类型-->
|
||||
<block v-if="node.tag == 'button'">
|
||||
<button type="default" size="mini">
|
||||
</button>
|
||||
</block>
|
||||
|
||||
<!--li类型-->
|
||||
<block v-else-if="node.tag == 'li'">
|
||||
<view :class="node.classStr" :style="node.styleStr">
|
||||
{{node.text}}
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--video类型-->
|
||||
<block v-else-if="node.tag == 'video'">
|
||||
<wx-parse-video :node="node" />
|
||||
</block>
|
||||
|
||||
<!--audio类型-->
|
||||
<block v-else-if="node.tag == 'audio'">
|
||||
<wx-parse-audio :node="node" />
|
||||
</block>
|
||||
|
||||
<!--img类型-->
|
||||
<block v-else-if="node.tag == 'img'">
|
||||
<wx-parse-img :node="node" />
|
||||
</block>
|
||||
|
||||
<!--a类型-->
|
||||
<block v-else-if="node.tag == 'a'">
|
||||
<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
|
||||
{{node.text}}
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--br类型-->
|
||||
<block v-else-if="node.tag == 'br'">
|
||||
<text>\n</text>
|
||||
</block>
|
||||
|
||||
<!--其他标签-->
|
||||
<block v-else>
|
||||
<view :class="node.classStr" :style="node.styleStr">
|
||||
{{node.text}}
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
|
||||
<!--判断是否是文本节点-->
|
||||
<block v-else-if="node.node == 'text'">{{node.text}}</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import wxParseImg from './wxParseImg';
|
||||
import wxParseVideo from './wxParseVideo';
|
||||
import wxParseAudio from './wxParseAudio';
|
||||
|
||||
export default {
|
||||
name: 'wxParseTemplate11',
|
||||
props: {
|
||||
node: {},
|
||||
},
|
||||
components: {
|
||||
wxParseImg,
|
||||
wxParseVideo,
|
||||
wxParseAudio,
|
||||
},
|
||||
methods: {
|
||||
wxParseATap(e) {
|
||||
const {
|
||||
href
|
||||
} = e.currentTarget.dataset;
|
||||
if (!href) return;
|
||||
let parent = this.$parent;
|
||||
while(!parent.preview || typeof parent.preview !== 'function') {
|
||||
parent = parent.$parent;
|
||||
}
|
||||
parent.navigate(href, e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
98
components/u-parse/components/wxParseTemplate2.vue
Normal file
98
components/u-parse/components/wxParseTemplate2.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<view>
|
||||
<!--判断是否是标签节点-->
|
||||
<block v-if="node.node == 'element'">
|
||||
<block v-if="node.tag == 'button'">
|
||||
<button type="default" size="mini">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</button>
|
||||
</block>
|
||||
|
||||
<!--li类型-->
|
||||
<block v-else-if="node.tag == 'li'">
|
||||
<view :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--video类型-->
|
||||
<block v-else-if="node.tag == 'video'">
|
||||
<wx-parse-video :node="node" />
|
||||
</block>
|
||||
|
||||
<!--audio类型-->
|
||||
<block v-else-if="node.tag == 'audio'">
|
||||
<wx-parse-audio :node="node" />
|
||||
</block>
|
||||
|
||||
<!--img类型-->
|
||||
<block v-else-if="node.tag == 'img'">
|
||||
<wx-parse-img :node="node" />
|
||||
</block>
|
||||
|
||||
<!--a类型-->
|
||||
<block v-else-if="node.tag == 'a'">
|
||||
<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--br类型-->
|
||||
<block v-else-if="node.tag == 'br'">
|
||||
<text>\n</text>
|
||||
</block>
|
||||
|
||||
<!--其他标签-->
|
||||
<block v-else>
|
||||
<view :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
</block>
|
||||
|
||||
<!--判断是否是文本节点-->
|
||||
<block v-else-if="node.node == 'text'">{{node.text}}</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import wxParseTemplate from './wxParseTemplate3';
|
||||
import wxParseImg from './wxParseImg';
|
||||
import wxParseVideo from './wxParseVideo';
|
||||
import wxParseAudio from './wxParseAudio';
|
||||
|
||||
export default {
|
||||
name: 'wxParseTemplate2',
|
||||
props: {
|
||||
node: {},
|
||||
},
|
||||
components: {
|
||||
wxParseTemplate,
|
||||
wxParseImg,
|
||||
wxParseVideo,
|
||||
wxParseAudio,
|
||||
},
|
||||
methods: {
|
||||
wxParseATap(e) {
|
||||
const {
|
||||
href
|
||||
} = e.currentTarget.dataset;
|
||||
if (!href) return;
|
||||
let parent = this.$parent;
|
||||
while(!parent.preview || typeof parent.preview !== 'function') {
|
||||
parent = parent.$parent;
|
||||
}
|
||||
parent.navigate(href, e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
98
components/u-parse/components/wxParseTemplate3.vue
Normal file
98
components/u-parse/components/wxParseTemplate3.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<view>
|
||||
<!--判断是否是标签节点-->
|
||||
<block v-if="node.node == 'element'">
|
||||
<block v-if="node.tag == 'button'">
|
||||
<button type="default" size="mini">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</button>
|
||||
</block>
|
||||
|
||||
<!--li类型-->
|
||||
<block v-else-if="node.tag == 'li'">
|
||||
<view :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--video类型-->
|
||||
<block v-else-if="node.tag == 'video'">
|
||||
<wx-parse-video :node="node" />
|
||||
</block>
|
||||
|
||||
<!--audio类型-->
|
||||
<block v-else-if="node.tag == 'audio'">
|
||||
<wx-parse-audio :node="node" />
|
||||
</block>
|
||||
|
||||
<!--img类型-->
|
||||
<block v-else-if="node.tag == 'img'">
|
||||
<wx-parse-img :node="node" />
|
||||
</block>
|
||||
|
||||
<!--a类型-->
|
||||
<block v-else-if="node.tag == 'a'">
|
||||
<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--br类型-->
|
||||
<block v-else-if="node.tag == 'br'">
|
||||
<text>\n</text>
|
||||
</block>
|
||||
|
||||
<!--其他标签-->
|
||||
<block v-else>
|
||||
<view :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
</block>
|
||||
|
||||
<!--判断是否是文本节点-->
|
||||
<block v-else-if="node.node == 'text'">{{node.text}}</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import wxParseTemplate from './wxParseTemplate4';
|
||||
import wxParseImg from './wxParseImg';
|
||||
import wxParseVideo from './wxParseVideo';
|
||||
import wxParseAudio from './wxParseAudio';
|
||||
|
||||
export default {
|
||||
name: 'wxParseTemplate3',
|
||||
props: {
|
||||
node: {},
|
||||
},
|
||||
components: {
|
||||
wxParseTemplate,
|
||||
wxParseImg,
|
||||
wxParseVideo,
|
||||
wxParseAudio,
|
||||
},
|
||||
methods: {
|
||||
wxParseATap(e) {
|
||||
const {
|
||||
href
|
||||
} = e.currentTarget.dataset;
|
||||
if (!href) return;
|
||||
let parent = this.$parent;
|
||||
while(!parent.preview || typeof parent.preview !== 'function') {
|
||||
parent = parent.$parent;
|
||||
}
|
||||
parent.navigate(href, e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
98
components/u-parse/components/wxParseTemplate4.vue
Normal file
98
components/u-parse/components/wxParseTemplate4.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<view>
|
||||
<!--判断是否是标签节点-->
|
||||
<block v-if="node.node == 'element'">
|
||||
<block v-if="node.tag == 'button'">
|
||||
<button type="default" size="mini">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</button>
|
||||
</block>
|
||||
|
||||
<!--li类型-->
|
||||
<block v-else-if="node.tag == 'li'">
|
||||
<view :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--video类型-->
|
||||
<block v-else-if="node.tag == 'video'">
|
||||
<wx-parse-video :node="node" />
|
||||
</block>
|
||||
|
||||
<!--audio类型-->
|
||||
<block v-else-if="node.tag == 'audio'">
|
||||
<wx-parse-audio :node="node" />
|
||||
</block>
|
||||
|
||||
<!--img类型-->
|
||||
<block v-else-if="node.tag == 'img'">
|
||||
<wx-parse-img :node="node" />
|
||||
</block>
|
||||
|
||||
<!--a类型-->
|
||||
<block v-else-if="node.tag == 'a'">
|
||||
<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--br类型-->
|
||||
<block v-else-if="node.tag == 'br'">
|
||||
<text>\n</text>
|
||||
</block>
|
||||
|
||||
<!--其他标签-->
|
||||
<block v-else>
|
||||
<view :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
</block>
|
||||
|
||||
<!--判断是否是文本节点-->
|
||||
<block v-else-if="node.node == 'text'">{{node.text}}</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import wxParseTemplate from './wxParseTemplate5';
|
||||
import wxParseImg from './wxParseImg';
|
||||
import wxParseVideo from './wxParseVideo';
|
||||
import wxParseAudio from './wxParseAudio';
|
||||
|
||||
export default {
|
||||
name: 'wxParseTemplate4',
|
||||
props: {
|
||||
node: {},
|
||||
},
|
||||
components: {
|
||||
wxParseTemplate,
|
||||
wxParseImg,
|
||||
wxParseVideo,
|
||||
wxParseAudio,
|
||||
},
|
||||
methods: {
|
||||
wxParseATap(e) {
|
||||
const {
|
||||
href
|
||||
} = e.currentTarget.dataset;
|
||||
if (!href) return;
|
||||
let parent = this.$parent;
|
||||
while(!parent.preview || typeof parent.preview !== 'function') {
|
||||
parent = parent.$parent;
|
||||
}
|
||||
parent.navigate(href, e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
98
components/u-parse/components/wxParseTemplate5.vue
Normal file
98
components/u-parse/components/wxParseTemplate5.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<view>
|
||||
<!--判断是否是标签节点-->
|
||||
<block v-if="node.node == 'element'">
|
||||
<block v-if="node.tag == 'button'">
|
||||
<button type="default" size="mini">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</button>
|
||||
</block>
|
||||
|
||||
<!--li类型-->
|
||||
<block v-else-if="node.tag == 'li'">
|
||||
<view :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--video类型-->
|
||||
<block v-else-if="node.tag == 'video'">
|
||||
<wx-parse-video :node="node" />
|
||||
</block>
|
||||
|
||||
<!--audio类型-->
|
||||
<block v-else-if="node.tag == 'audio'">
|
||||
<wx-parse-audio :node="node" />
|
||||
</block>
|
||||
|
||||
<!--img类型-->
|
||||
<block v-else-if="node.tag == 'img'">
|
||||
<wx-parse-img :node="node" />
|
||||
</block>
|
||||
|
||||
<!--a类型-->
|
||||
<block v-else-if="node.tag == 'a'">
|
||||
<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--br类型-->
|
||||
<block v-else-if="node.tag == 'br'">
|
||||
<text>\n</text>
|
||||
</block>
|
||||
|
||||
<!--其他标签-->
|
||||
<block v-else>
|
||||
<view :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
</block>
|
||||
|
||||
<!--判断是否是文本节点-->
|
||||
<block v-else-if="node.node == 'text'">{{node.text}}</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import wxParseTemplate from './wxParseTemplate6';
|
||||
import wxParseImg from './wxParseImg';
|
||||
import wxParseVideo from './wxParseVideo';
|
||||
import wxParseAudio from './wxParseAudio';
|
||||
|
||||
export default {
|
||||
name: 'wxParseTemplate5',
|
||||
props: {
|
||||
node: {},
|
||||
},
|
||||
components: {
|
||||
wxParseTemplate,
|
||||
wxParseImg,
|
||||
wxParseVideo,
|
||||
wxParseAudio,
|
||||
},
|
||||
methods: {
|
||||
wxParseATap(e) {
|
||||
const {
|
||||
href
|
||||
} = e.currentTarget.dataset;
|
||||
if (!href) return;
|
||||
let parent = this.$parent;
|
||||
while(!parent.preview || typeof parent.preview !== 'function') {
|
||||
parent = parent.$parent;
|
||||
}
|
||||
parent.navigate(href, e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
98
components/u-parse/components/wxParseTemplate6.vue
Normal file
98
components/u-parse/components/wxParseTemplate6.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<view>
|
||||
<!--判断是否是标签节点-->
|
||||
<block v-if="node.node == 'element'">
|
||||
<block v-if="node.tag == 'button'">
|
||||
<button type="default" size="mini">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</button>
|
||||
</block>
|
||||
|
||||
<!--li类型-->
|
||||
<block v-else-if="node.tag == 'li'">
|
||||
<view :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--video类型-->
|
||||
<block v-else-if="node.tag == 'video'">
|
||||
<wx-parse-video :node="node" />
|
||||
</block>
|
||||
|
||||
<!--audio类型-->
|
||||
<block v-else-if="node.tag == 'audio'">
|
||||
<wx-parse-audio :node="node" />
|
||||
</block>
|
||||
|
||||
<!--img类型-->
|
||||
<block v-else-if="node.tag == 'img'">
|
||||
<wx-parse-img :node="node" />
|
||||
</block>
|
||||
|
||||
<!--a类型-->
|
||||
<block v-else-if="node.tag == 'a'">
|
||||
<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--br类型-->
|
||||
<block v-else-if="node.tag == 'br'">
|
||||
<text>\n</text>
|
||||
</block>
|
||||
|
||||
<!--其他标签-->
|
||||
<block v-else>
|
||||
<view :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
</block>
|
||||
|
||||
<!--判断是否是文本节点-->
|
||||
<block v-else-if="node.node == 'text'">{{node.text}}</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import wxParseTemplate from './wxParseTemplate7';
|
||||
import wxParseImg from './wxParseImg';
|
||||
import wxParseVideo from './wxParseVideo';
|
||||
import wxParseAudio from './wxParseAudio';
|
||||
|
||||
export default {
|
||||
name: 'wxParseTemplate6',
|
||||
props: {
|
||||
node: {},
|
||||
},
|
||||
components: {
|
||||
wxParseTemplate,
|
||||
wxParseImg,
|
||||
wxParseVideo,
|
||||
wxParseAudio,
|
||||
},
|
||||
methods: {
|
||||
wxParseATap(e) {
|
||||
const {
|
||||
href
|
||||
} = e.currentTarget.dataset;
|
||||
if (!href) return;
|
||||
let parent = this.$parent;
|
||||
while(!parent.preview || typeof parent.preview !== 'function') {
|
||||
parent = parent.$parent;
|
||||
}
|
||||
parent.navigate(href, e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
98
components/u-parse/components/wxParseTemplate7.vue
Normal file
98
components/u-parse/components/wxParseTemplate7.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<view>
|
||||
<!--判断是否是标签节点-->
|
||||
<block v-if="node.node == 'element'">
|
||||
<block v-if="node.tag == 'button'">
|
||||
<button type="default" size="mini">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</button>
|
||||
</block>
|
||||
|
||||
<!--li类型-->
|
||||
<block v-else-if="node.tag == 'li'">
|
||||
<view :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--video类型-->
|
||||
<block v-else-if="node.tag == 'video'">
|
||||
<wx-parse-video :node="node" />
|
||||
</block>
|
||||
|
||||
<!--audio类型-->
|
||||
<block v-else-if="node.tag == 'audio'">
|
||||
<wx-parse-audio :node="node" />
|
||||
</block>
|
||||
|
||||
<!--img类型-->
|
||||
<block v-else-if="node.tag == 'img'">
|
||||
<wx-parse-img :node="node" />
|
||||
</block>
|
||||
|
||||
<!--a类型-->
|
||||
<block v-else-if="node.tag == 'a'">
|
||||
<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--br类型-->
|
||||
<block v-else-if="node.tag == 'br'">
|
||||
<text>\n</text>
|
||||
</block>
|
||||
|
||||
<!--其他标签-->
|
||||
<block v-else>
|
||||
<view :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
</block>
|
||||
|
||||
<!--判断是否是文本节点-->
|
||||
<block v-else-if="node.node == 'text'">{{node.text}}</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import wxParseTemplate from './wxParseTemplate8';
|
||||
import wxParseImg from './wxParseImg';
|
||||
import wxParseVideo from './wxParseVideo';
|
||||
import wxParseAudio from './wxParseAudio';
|
||||
|
||||
export default {
|
||||
name: 'wxParseTemplate7',
|
||||
props: {
|
||||
node: {},
|
||||
},
|
||||
components: {
|
||||
wxParseTemplate,
|
||||
wxParseImg,
|
||||
wxParseVideo,
|
||||
wxParseAudio,
|
||||
},
|
||||
methods: {
|
||||
wxParseATap(e) {
|
||||
const {
|
||||
href
|
||||
} = e.currentTarget.dataset;
|
||||
if (!href) return;
|
||||
let parent = this.$parent;
|
||||
while(!parent.preview || typeof parent.preview !== 'function') {
|
||||
parent = parent.$parent;
|
||||
}
|
||||
parent.navigate(href, e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
98
components/u-parse/components/wxParseTemplate8.vue
Normal file
98
components/u-parse/components/wxParseTemplate8.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<view>
|
||||
<!--判断是否是标签节点-->
|
||||
<block v-if="node.node == 'element'">
|
||||
<block v-if="node.tag == 'button'">
|
||||
<button type="default" size="mini">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</button>
|
||||
</block>
|
||||
|
||||
<!--li类型-->
|
||||
<block v-else-if="node.tag == 'li'">
|
||||
<view :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--video类型-->
|
||||
<block v-else-if="node.tag == 'video'">
|
||||
<wx-parse-video :node="node" />
|
||||
</block>
|
||||
|
||||
<!--audio类型-->
|
||||
<block v-else-if="node.tag == 'audio'">
|
||||
<wx-parse-audio :node="node" />
|
||||
</block>
|
||||
|
||||
<!--img类型-->
|
||||
<block v-else-if="node.tag == 'img'">
|
||||
<wx-parse-img :node="node" />
|
||||
</block>
|
||||
|
||||
<!--a类型-->
|
||||
<block v-else-if="node.tag == 'a'">
|
||||
<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--br类型-->
|
||||
<block v-else-if="node.tag == 'br'">
|
||||
<text>\n</text>
|
||||
</block>
|
||||
|
||||
<!--其他标签-->
|
||||
<block v-else>
|
||||
<view :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
</block>
|
||||
|
||||
<!--判断是否是文本节点-->
|
||||
<block v-else-if="node.node == 'text'">{{node.text}}</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import wxParseTemplate from './wxParseTemplate9';
|
||||
import wxParseImg from './wxParseImg';
|
||||
import wxParseVideo from './wxParseVideo';
|
||||
import wxParseAudio from './wxParseAudio';
|
||||
|
||||
export default {
|
||||
name: 'wxParseTemplate8',
|
||||
props: {
|
||||
node: {},
|
||||
},
|
||||
components: {
|
||||
wxParseTemplate,
|
||||
wxParseImg,
|
||||
wxParseVideo,
|
||||
wxParseAudio,
|
||||
},
|
||||
methods: {
|
||||
wxParseATap(e) {
|
||||
const {
|
||||
href
|
||||
} = e.currentTarget.dataset;
|
||||
if (!href) return;
|
||||
let parent = this.$parent;
|
||||
while(!parent.preview || typeof parent.preview !== 'function') {
|
||||
parent = parent.$parent;
|
||||
}
|
||||
parent.navigate(href, e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
98
components/u-parse/components/wxParseTemplate9.vue
Normal file
98
components/u-parse/components/wxParseTemplate9.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<view>
|
||||
<!--判断是否是标签节点-->
|
||||
<block v-if="node.node == 'element'">
|
||||
<block v-if="node.tag == 'button'">
|
||||
<button type="default" size="mini">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</button>
|
||||
</block>
|
||||
|
||||
<!--li类型-->
|
||||
<block v-else-if="node.tag == 'li'">
|
||||
<view :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--video类型-->
|
||||
<block v-else-if="node.tag == 'video'">
|
||||
<wx-parse-video :node="node" />
|
||||
</block>
|
||||
|
||||
<!--audio类型-->
|
||||
<block v-else-if="node.tag == 'audio'">
|
||||
<wx-parse-audio :node="node" />
|
||||
</block>
|
||||
|
||||
<!--img类型-->
|
||||
<block v-else-if="node.tag == 'img'">
|
||||
<wx-parse-img :node="node" />
|
||||
</block>
|
||||
|
||||
<!--a类型-->
|
||||
<block v-else-if="node.tag == 'a'">
|
||||
<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--br类型-->
|
||||
<block v-else-if="node.tag == 'br'">
|
||||
<text>\n</text>
|
||||
</block>
|
||||
|
||||
<!--其他标签-->
|
||||
<block v-else>
|
||||
<view :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
</block>
|
||||
|
||||
<!--判断是否是文本节点-->
|
||||
<block v-else-if="node.node == 'text'">{{node.text}}</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import wxParseTemplate from './wxParseTemplate10';
|
||||
import wxParseImg from './wxParseImg';
|
||||
import wxParseVideo from './wxParseVideo';
|
||||
import wxParseAudio from './wxParseAudio';
|
||||
|
||||
export default {
|
||||
name: 'wxParseTemplate9',
|
||||
props: {
|
||||
node: {},
|
||||
},
|
||||
components: {
|
||||
wxParseTemplate,
|
||||
wxParseImg,
|
||||
wxParseVideo,
|
||||
wxParseAudio,
|
||||
},
|
||||
methods: {
|
||||
wxParseATap(e) {
|
||||
const {
|
||||
href
|
||||
} = e.currentTarget.dataset;
|
||||
if (!href) return;
|
||||
let parent = this.$parent;
|
||||
while(!parent.preview || typeof parent.preview !== 'function') {
|
||||
parent = parent.$parent;
|
||||
}
|
||||
parent.navigate(href, e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
15
components/u-parse/components/wxParseVideo.vue
Normal file
15
components/u-parse/components/wxParseVideo.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<!--增加video标签支持,并循环添加-->
|
||||
<view :class="node.classStr" :style="node.styleStr">
|
||||
<video :class="node.classStr" class="video-video" :src="node.attr.src"></video>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'wxParseVideo',
|
||||
props: {
|
||||
node: {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user