jiaoyi-uni/components/msg/m-text.vue

<template>
	<view>
		<view class="quote-names">
			<text v-html="renderTextMessage(value.content)"></text>
		</view>
	</view>
</template>

<script>
import { EmojiDecoder, emojiMap } from '@/utils/EmojiDecoder.js';
const emojiUrl = 'https://imgcache.qq.com/open/qcloud/tim/assets/emoji/';
const decoder = new EmojiDecoder(emojiUrl, emojiMap);
export default {
	name: 'mText',
	props: {
		value: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {};
	},
	// computed: {
	// 	//渲染文本消息，如果包含表情，替换为图片
	// 	//todo:本不需要该方法，可以在标签里完成，但小程序有兼容性问题，被迫这样实现
	// 	renderTextMessage() {
	// 		let text = this.value.content;
	// 		text = text.replace(/\n/g, '');
	// 		if (!text) return '<span>' + '[未知内容]' + '</span>';
	// 		return '<span>' + decoder.decode(text) + '</span>';
	// 	}
	// },
	methods: {
		renderTextMessage(text) {
			console.log('text',text)
			// let text = this.value.content;
			text = text.replace(/\n/g, '');
			if (!text) return '<span>' + '[未知内容]' + '</span>';
			return '<span>' + decoder.decode(text) + '</span>';
		}
	}
};
</script>

<style scoped lang="scss">
.quote-box {
	box-sizing: border-box;
	padding: 12rpx 16rpx;
	border-radius: 10rpx;
	margin-top: 6rpx;
	background-color: #e1e1e1;
	color: #6b6b6b;
}
.quote-name {
}
.quote-content {
}
</style>