xyy-m/src/components/Chat/RightItemMessage.vue

<template>
  <div style="width: calc(100vw - 74px)" class="flex justify-end items-start mb-16">
    <!-- 文字消息 -->
    <template v-if="itemData?.messageType == 0 && itemData.messageContent.trim()">
      <div
        class="text-left inline-block min-h-40 max-w-full break-words overflow-auto rounded-[4px] relative bg-white box-border text-base p-5 text-wrap"
      >
        {{ messageContentParse(itemData.messageContent) }}
      </div>
      <div class="inline-block w-0 h-0 mt-10 border-[8px] border-transparent border-l-white"></div>
    </template>
    <!-- 图片消息 -->
    <template v-if="item.messageType == 1">
      <div class="ml-10 max-w-251 border right left">
        <img
          @click="handleimagePreview"
          class="w-full h-full object-contain"
          src="../../assets/img/comment/H5_default.png"
          alt=""
        />
        <!-- <ChatImage :item-data="_default" @on-delete="$emit('onDelete')" /> -->
      </div>
    </template>

    <div class="shrink-0 w-40 h-40 rounded-[4px]">
      <img
        v-if="itemData?.haeadImage"
        class="w-full h-full object-cover"
        :src="itemData.haeadImage"
        alt=""
      />
      <img v-else class="w-full h-full object-cover" src="~/assets/img/default_avatar.png" alt="" />
    </div>
  </div>
</template>

<script setup>
defineProps({
  itemData: {
    type: Object,
    default: () => ({})
  }
})

defineEmits(['onDelete'])

// 图片预览
const handleimagePreview = () => {
  showImagePreview({
    images: [
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg'
    ],
    startPosition: 1
  })
}
</script>

<style lang="scss" scoped></style>