index.vue 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  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.renderDom=parseText(newVal)
  31. // this.setData({
  32. // renderDom: parseText(newVal)
  33. // });
  34. },
  35. immediate: true,
  36. deep: true
  37. }
  38. },
  39. beforeMount() {
  40. // 在组件实例进入页面节点树时执行
  41. },
  42. destroyed() {
  43. // 在组件实例被从页面节点树移除时执行
  44. },
  45. methods: {}
  46. };
  47. </script>
  48. <style>
  49. @import './index.css';
  50. </style>