图片预览组件实战

2023-11-02 15:44:23

在构建复杂的 Web 应用程序时，经常需要显示和预览图像。为了提高开发效率并保持代码整洁，封装一个可复用的图片预览插件是一个明智的选择。本文将带你一步步实现一个 Vue3 中基于 Ant Design Vue3 的图片预览组件。

前提条件

Vue3 及以上版本
Ant Design Vue3
Vite3（可选，用于快速开发）

安装依赖

npm install ant-design-vue3

创建组件

在项目目录中创建 previewImage.js 文件：

import { ref, reactive } from 'vue'
import { Modal, Button } from 'ant-design-vue'

export default {
  components: {
    [Modal.name]: Modal,
    [Button.name]: Button
  },
  setup() {
    const preview = ref(false)
    const srcList = ref([])

    const handlePreview = (src) => {
      srcList.value = [src]
      preview.value = true
    }

    return {
      preview,
      srcList,
      handlePreview
    }
  }
}

组件解析：

preview：用于控制预览模态框的显示状态。
srcList：用于存储要预览的图像 URL。
handlePreview：当点击图像时触发的函数，它将图像 URL 添加到 srcList 并打开预览模态框。

注册组件

在 main.js 文件中，注册 previewImage 组件：

import previewImage from './previewImage.js'

app.component('preview-image', previewImage)

使用组件

在需要预览图像的地方，使用 preview-image 组件：

<template>
  <div>
    <img @click="handlePreview('image.png')" src="image.png" />
  </div>
</template>

<script>
import { ref } from 'vue'
import previewImage from './previewImage.js'

export default {
  components: {
    'preview-image': previewImage
  },
  setup() {
    const preview = ref(false)
    const srcList = ref([])

    const handlePreview = (src) => {
      srcList.value = [src]
      preview.value = true
    }

    return {
      preview,
      srcList,
      handlePreview
    }
  }
}
</script>