一键搞定！ElementUI 图片预览组件 el-image-viewer 封装教程

2023-11-21 04:18:09

ElementUI 图片预览组件 el-image-viewer 的封装

简介

ElementUI 的 el-image-viewer 组件是一个强大的图片预览工具，可轻松实现图片查看、缩放、旋转等功能。通过封装此组件，开发者可以简化其使用，并在项目中灵活地调用。

封装步骤

1. 安装 ElementUI

在项目中安装 ElementUI：

npm install element-ui

2. 导入 ElementUI

在项目文件中导入 ElementUI：

import Vue from 'vue'
import ElementUI from 'element-ui'

Vue.use(ElementUI)

3. 创建封装组件

创建名为 ImagePreview.vue 的组件文件，并编写以下代码：

<template>
  <el-image-viewer
    :src="src"
    :index="index"
    @close="handleClose"
  />
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true
    },
    index: {
      type: Number,
      required: true
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    }
  }
}
</script>

4. 注册封装组件

在 main.js 文件中注册封装组件：

import ImagePreview from './components/ImagePreview.vue'

Vue.component('image-preview', ImagePreview)

使用封装组件

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

<template>
  <div>
    <img :src="src" @click="handleImageClick" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      src: 'https://example.com/image.jpg'
    }
  },
  methods: {
    handleImageClick() {
      this.$refs.imagePreview.open()
    }
  },
  components: {
    ImagePreview
  }
}
</script>

代码示例

<template>
  <div>
    <el-image-viewer
      :src="src"
      :index="index"
      @close="handleClose"
    />
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true
    },
    index: {
      type: Number,
      required: true
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    }
  }
}
</script>