index.vue 988 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <view :class="'text-message ' + (isMine ? 'my-text' : '')">
  3. <view v-for="(item, index) in renderDom" :key="index" class="message-body-span">
  4. <span class="message-body-span-text" v-if="item.name === 'span'">{{ item.text }}</span>
  5. <image v-if="item.name === 'img'" class="emoji-icon" :src="item.src"></image>
  6. </view>
  7. </view>
  8. </template>
  9. <script>
  10. import { parseText } from '../../../base/message-facade';
  11. export default {
  12. data() {
  13. return {
  14. renderDom: []
  15. };
  16. },
  17. components: {},
  18. props: {
  19. message: {
  20. type: Object
  21. },
  22. isMine: {
  23. type: Boolean,
  24. default: true
  25. }
  26. },
  27. watch: {
  28. message: {
  29. handler: function(newVal) {
  30. this.setData({
  31. renderDom: parseText(newVal)
  32. });
  33. },
  34. immediate: true,
  35. deep: true
  36. }
  37. },
  38. beforeMount() {
  39. // 在组件实例进入页面节点树时执行
  40. },
  41. destroyed() {
  42. // 在组件实例被从页面节点树移除时执行
  43. },
  44. methods: {}
  45. };
  46. </script>
  47. <style>
  48. @import './index.css';
  49. </style>