rtim/pages_im/pages/conversation/chating1/components/MessageItem/TextMessageRender.vue

<template>
  <view class="text_message_container bg_container" style="position: relative; overflow: visible; font-size: 20px;">
	<view class="msg_arrow" :class="isSender ? 'msg_arrow_right' : 'msg_arrow_left'"></view>
    <mp-html
		  containerStyle="font-size: 20px; line-height: 1.5; word-break: break-word;"
		  @linktap="navigate"
		  @ready="onHtmlReady"
		  :previewImg="false"
		  :showImgMenu="false"
		  :lazyLoad="true"
		  :copyLink="false"
		  :selectable="false"
		  :content="getContent">
           <!-- 纯文本占位：在 mp-html 完成解析前，先展示可读内容 -->
          <text class="plain_text">{{ getPlainText }}</text>
    </mp-html>
	<!-- {{getContent}} -->
    <!-- <u-parse :imgOptions="false" @navigate="navigate" :content="getContent" /> -->
  </view>
</template>

<script>
import { parseBr } from "../../../../../util/common";
import { parseAt, parseLink } from "../../../../../util/imCommon";
import { MessageType } from "openim-uniapp-polyfill";

export default {
  name: "TextMessageRender",
  components: {},
  props: {
    message: Object,
	isSender: {
		type: Boolean,
		default: false
	}
  },
  computed: {
    getContent() {
      if (this.message.contentType === MessageType.QuoteMessage) {
        return this.message.quoteElem.text;
      }
      if (this.message.contentType === MessageType.AtTextMessage) {
        return parseAt(this.message.atTextElem);
      }
      return parseLink(parseBr(this.message.textElem?.content));
    },
    // 纯文本占位内容：不做富文本解析，保证首屏立即可见
    getPlainText() {
      if (this.message.contentType === MessageType.QuoteMessage) {
        return this.message.quoteElem.text || '';
      }
      if (this.message.contentType === MessageType.AtTextMessage) {
        // 第二个参数设为 true，返回纯文本而非链接
        return parseAt(this.message.atTextElem, true) || '';
      }
      return this.message.textElem?.content || '';
    }
  },
  data() {
    return {};
  },
  methods: {
    navigate(link) {
      // console.log(link);
      if (link.innerText.includes("@")) {
        this.$emit("showInfo", link.href);
      }
    },
    onHtmlReady() {
       this.$emit('htmlReady', this.message?.clientMsgID);
    }
  },
};
</script>

<style lang="scss" scoped>
.plain_text {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 17px;
  
}

.msg_arrow {
	width: 0;
	height: 0;
	border-top: 10rpx solid transparent;
	border-bottom: 10rpx solid transparent;
	position: absolute;
	top: 22rpx;
}

.msg_arrow_left {
	left: -14rpx;
	border-right: 16rpx solid #ffffff;
}

.msg_arrow_right {
	right: -14rpx;
	border-left: 16rpx solid #95EC69;
}

</style>