vue3 响应式 tsx 组件

版本1：不支持响应式

import { getFileInfo } from '@/api/common/index.js'
import { ImagePreview } from '@arco-design/web-vue'
import { ref, computed, defineComponent } from 'vue'

export default defineComponent({
  name: 'PreviewImgBtn',
  props: {
    value: {
      type: [String, Number],
      required: true,
    },
    file: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '点击查看',
    },
  },
  setup(props) {
    const { value: imgValue, file, title } = props
    if (!imgValue) {
      return () => <span>-</span>
    }

    const _visible = ref(false)
    const imgUrl = `${import.meta.env.VITE_BASE_PATH}/uploadFile/image/${imgValue}`

    const visible = computed({
      get: () => _visible.value,
      set: (val) => {
        _visible.value = val
      },
    })
    const show = () => {
      // 传入的是附件
      if (file !== false) {
        getFileInfo({ id: imgValue }).then((res) => {
          const result = res.result
          if (result) {
            const fileName = result.originalFileName
            const fileExt = fileName.split('.').pop().toLowerCase()
            // 图片预览
            if (['jpg', 'jpeg', 'png'].includes(fileExt)) {
              visible.value = true
            } else {
              window.open(imgUrl)
            }
          }
        })
      } else {
        visible.value = true
      }
    }

    return () => (
      <div>
        <a-link type="text" onClick={() => show()} style="text-decoration: underline;text-underline-offset: 4px;color: #1890FF">
          {title}
        </a-link>
        <ImagePreview
          src={imgUrl}
          visible={visible}
          onClose={() => {
            visible.value = false
          }}
        />
      </div>
    )
  },
})

版本2：支持响应式

import { getFileInfo } from '@/api/common/index.js'
import { ImagePreview } from '@arco-design/web-vue'
import { ref, toRefs, computed, defineComponent } from 'vue'

export default defineComponent({
  name: 'PreviewImgBtn',
  props: {
    value: {
      type: [String, Number],
      required: true,
    },
    file: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '点击查看',
    },
  },
  setup(props) {
    const propsRefs = toRefs(props)
    const imgValue = propsRefs.value
    const file = propsRefs.file
    const title = propsRefs.title

    const _visible = ref(false)

    // ✅ 响应式 imgUrl
    const imgUrl = computed(() => {
      return `${import.meta.env.VITE_BASE_PATH}/uploadFile/image/${imgValue.value}`
    })

    const visible = computed({
      get: () => _visible.value,
      set: (val) => {
        _visible.value = val
      },
    })

    const show = () => {
      if (file.value) {
        getFileInfo({ id: imgValue.value }).then((res) => {
          const result = res.result
          if (result) {
            const fileName = result.originalFileName
            const fileExt = fileName.split('.').pop().toLowerCase()
            if (['jpg', 'jpeg', 'png'].includes(fileExt)) {
              visible.value = true
            } else {
              window.open(imgUrl.value)
            }
          }
        })
      } else {
        visible.value = true
      }
    }

    // ✅ 判断是否为空
    const hasValue = computed(() => !!imgValue.value)

    return () => (
      <div>
        <div v-show={hasValue.value}>
          <a-link type="text" onClick={() => show()} style="text-decoration: underline;text-underline-offset: 4px;color: #1890FF">
            {title.value || '点击查看'}
          </a-link>
          <ImagePreview
            src={imgUrl.value}
            visible={visible.value}
            onClose={() => {
              visible.value = false
            }}
          />
        </div>
        <span v-show={!hasValue.value}>-</span>
      </div>
    )
  },
})