dati/components/uc-parse/uc-parse.vue

<template>
	<view>
		<view >
			<rich-text :nodes="getnodes" :preview="true"></rich-text>
		</view>
	</view>
</template>

<script>
	import htmlParser from '@/common/html-parser';
	
	export default {
		name: 'timuJiexi',
		props: {
			node: {
				type: String,
				default: '',
			},
			from:{
				type:Number,
				default:1
			},
			display_type:{
				type:Number,
				default:1
			}
		},
		data(){
			return{
				imageWidth:0,
				imageHeight:0,
				myNode:'',
			}
		},
		created() {
		},
		computed:{
			getnodes(){
				if(this.node != ''){
					this.myNode = this.node
					let nodes = [];
					try{
						nodes = htmlParser("<p>&nbsp;"+this.myNode.trim()+"&nbsp;</p>");
					}catch{
						return ''
						// 解析错误，请联系管理员！
					}
					return this.parseImgs(nodes) || ''
				}
			},
			
		},
		methods:{
			parseImgs(nodes) {
				nodes.forEach(node => {
					if (node.name === 'img') {
						node.attrs.style = `max-width:100%;vertical-align:middle;`
						// let width = '',that = this;
						// uni.getSystemInfo({
						// 	success: function (res) {
						// 		if(that.from == 1){
						// 			width = res.windowWidth - 20*2
						// 		}else{
						// 			if(that.display_type == 1){
						// 				width = res.windowWidth - (3+2)*2*0.01*res.windowWidth -30 -16
						// 			}else{
						// 				width = res.windowWidth*0.45 -30 -16
						// 			}
						// 		}
						// 	}
						// });
					 //    node.attrs.style = `width:${width}px; vertical-align:middle;`
					}else{
						node.style = `vertical-align:middle;`
					}
					// node.style = `vertical-align:middle;`
					if (Array.isArray(node.children)) {
						this.parseImgs(node.children);
					}
				});
				
				return nodes;
			}
		}
	}
</script>

<style>
	img {
		max-width: 100px;
	}
</style>