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

<template>
  <!-- 聊天消息内容的文本展示 -->

  <van-popover
    teleport="images"
    theme="dark"
    placement="bottom"
    actions-direction="horizontal"
    v-model:show="showPopover"
    @select="select"
  >
    <div class="flex my-16 mx-10">
      <div v-for="(item, index) in actions" :key="index" @click="" class="mx-10 text-center">
        <span :class="`iconfont ${item.icon} text-white   mb-4`" style="font-size: 24px"></span>
        <p class="text-white text-base">{{ item.text }}</p>
      </div>
    </div>
    <template #reference>
      <img
        class="w-full images h-full object-contain"
        :src="itemData?.url"
        @touchstart="doTouchstart"
        alt=""
      />
    </template>
  </van-popover>
</template>

<script setup>
import { useClipboard } from '@vueuse/core'
const { copy, isSupported } = useClipboard()

const showPopover = ref(false)

defineProps({
  itemData: {
    type: String,
    default: ''
  }
})

defineEmits(['onDelete'])

const actions = [
  { text: '引用', icon: 'icon-quote' },
  { text: '复制', icon: 'icon-copy' },
  { text: '删除', icon: 'icon-delete-three' }
]

function doTouchstart() {
  showPopover.value = true
}

function select(action, index) {
  console.log(action, index)

  if (action.text == '复制') {
    copy(itemData.text)
    showToast('已复制')
  }
  if (action.text == '删除') {
    $emit('onDelete')
    showToast('已复制')
  }
  showPopover.value = false
}
</script>

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