123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228 |
- <template>
-
-
- <div class="wxParse" :class="className" :style="'user-select:' + userSelect">
- <block v-for="(node, index) of nodes" :key="index" v-if="!loading">
- <wxParseTemplate :node="node" />
- </block>
- </div>
- </template>
- <script>
- import HtmlToJson from './libs/html2json';
- import wxParseTemplate from './components/wxParseTemplate0';
-
- export default {
- name: 'wxParse',
- props: {
-
- userSelect: {
- type: String,
- default: 'text'
- },
- imgOptions: {
- type: [Object, Boolean],
- default: function() {
- return {
- loop: false,
- indicator: 'number',
- longPressActions: false
-
-
-
-
-
-
-
-
-
-
- }
- }
- },
- 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: ''
- };
- }
- }
- },
- components: {
- wxParseTemplate
- },
- data() {
- return {
- nodes: {},
- imageUrls: [],
- wxParseWidth: {
- value: 0
- }
- };
- },
- computed: {},
- mounted() {
- this.setHtml()
- },
- methods: {
- setHtml() {
- this.getWidth().then((data) => {
- this.wxParseWidth.value = data;
- })
- let {
- content,
- noData,
- imageProp,
- startHandler,
- endHandler,
- charsHandler
- } = this;
- let parseData = content || noData;
- let customHandler = {
- start: startHandler,
- end: endHandler,
- chars: charsHandler
- };
- let results = HtmlToJson(parseData, customHandler, imageProp, this);
- this.imageUrls = results.imageUrls;
-
-
-
- this.nodes = [];
- results.nodes.forEach((item) => {
- setTimeout(() => {
- this.nodes.push(item)
- }, 0);
- })
- },
- getWidth() {
- return new Promise((res, rej) => {
-
- uni.createSelectorQuery()
- .in(this)
- .select('.wxParse')
- .fields({
- size: true,
- scrollOffset: true
- },
- data => {
- res(data.width);
- }
- ).exec();
-
-
- const query = swan.createSelectorQuery();
- query.select('.wxParse').boundingClientRect();
- query.exec(obj => {
- const rect = obj[0]
- if (rect) {
- res(rect.width);
- }
- });
-
-
- my.createSelectorQuery()
- .select('.wxParse')
- .boundingClientRect().exec((ret) => {
- res(ret[0].width);
- });
-
- });
- },
- navigate(href, $event, attr) {
- console.log(href, attr);
- this.$emit('navigate', href, $event);
- },
- preview(src, $event) {
- if (!this.imageUrls.length || typeof this.imgOptions === 'boolean') {
- } else {
- uni.previewImage({
- current: src,
- urls: this.imageUrls,
- loop: this.imgOptions.loop,
- indicator: this.imgOptions.indicator,
- longPressActions: this.imgOptions.longPressActions
- });
- }
- this.$emit('preview', src, $event);
- },
- removeImageUrl(src) {
- const {
- imageUrls
- } = this;
- imageUrls.splice(imageUrls.indexOf(src), 1);
- }
- },
-
- provide() {
- return {
- parseWidth: this.wxParseWidth,
- parseSelect: this.userSelect
-
- };
- },
- watch: {
- content(){
- this.setHtml()
- }
-
-
-
-
-
-
-
-
- }
- };
- </script>
|