118 lines
2.2 KiB
Vue
118 lines
2.2 KiB
Vue
<template>
|
|
<!--基础元素-->
|
|
|
|
<view class="parse" :class="className" v-if="!loading">
|
|
<template v-for="(node,index) of nodes" :key="index">
|
|
<parseTemplate :node="node" />
|
|
</template>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import HtmlToJson from './libs/html2json';
|
|
import parseTemplate from './parseTemplate.vue';
|
|
|
|
export default {
|
|
name: 'wxParse',
|
|
components: {
|
|
parseTemplate,
|
|
},
|
|
props: {
|
|
loading: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
className: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
content: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
noData: {
|
|
type: String,
|
|
default: '<div style="color: red;">数据不能为空</div>',
|
|
},
|
|
startHandler: {
|
|
type: Function,
|
|
default () {
|
|
return (node) => {
|
|
node.attr.class = null;
|
|
node.attr.style = null;
|
|
};
|
|
},
|
|
},
|
|
endHandler: {
|
|
type: Function,
|
|
default: null,
|
|
},
|
|
charsHandler: {
|
|
type: Function,
|
|
default: null,
|
|
},
|
|
imageProp: {
|
|
type: Object,
|
|
default () {
|
|
return {
|
|
mode: 'aspectFit',
|
|
padding: 0,
|
|
lazyLoad: false,
|
|
domain: '',
|
|
};
|
|
},
|
|
},
|
|
},
|
|
emits: ['navigate', 'preview'],
|
|
data() {
|
|
return {
|
|
imageUrls: [],
|
|
};
|
|
},
|
|
computed: {
|
|
nodes() {
|
|
const {
|
|
content,
|
|
noData,
|
|
imageProp,
|
|
startHandler,
|
|
endHandler,
|
|
charsHandler,
|
|
} = this;
|
|
const parseData = content || noData;
|
|
const customHandler = {
|
|
start: startHandler,
|
|
end: endHandler,
|
|
chars: charsHandler,
|
|
};
|
|
const results = HtmlToJson(parseData, customHandler, imageProp, this);
|
|
this.imageUrls = results.imageUrls;
|
|
console.log('result', results, customHandler)
|
|
return results.nodes;
|
|
},
|
|
},
|
|
methods: {
|
|
navigate(href, $event) {
|
|
this.$emit('navigate', href, $event);
|
|
},
|
|
preview(src, $event) {
|
|
if (!this.imageUrls.length) return;
|
|
wx.previewImage({
|
|
current: src,
|
|
urls: this.imageUrls,
|
|
});
|
|
this.$emit('preview', src, $event);
|
|
},
|
|
removeImageUrl(src) {
|
|
const {
|
|
imageUrls
|
|
} = this;
|
|
imageUrls.splice(imageUrls.indexOf(src), 1);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
// @import url("@/components/parse/style.scss");
|
|
</style> |