vue项目中实现图片预览的公用组件功能

下面我将为你详细讲解在Vue项目中实现图片预览的公用组件功能的完整攻略。

背景

图片预览是我们在Vue开发中常常需要用到的功能，但很多时候我们需要在多个页面上用到，所以我们需要将其进行封装为公用组件。

实现方式

第一步：安装插件

我们可以使用vue-preview插件来实现图片预览的功能，该插件支持缩小、放大、逆时针旋转、顺时针旋转、删除功能，使用比较方便。

可以通过以下命令来安装该插件：

npm install vue-preview --S

第二步：创建公用组件

在src/components目录下创建一个ImagePreview.vue文件，文件内容如下：

<template>
  <vue-preview :slides="slides" ref="preview"></vue-preview>
</template>

<script>
import VuePreview from 'vue-preview'

export default {
  data () {
    return {
      slides: []
    }
  },
  components: {
    VuePreview
  },
  methods: {
    open (images) {
      // 传入的images格式：[{src: '图片地址', msrc: '缩略图地址', alt: '图片描述'}]
      this.slides = images
      this.$refs.preview.open()
    }
  }
}
</script>

在该组件中，我们引入了vue-preview插件，通过传入的images参数来实现图片预览的功能。

第三步：在页面中使用

在需要使用图片预览功能的页面中，通过以下方式调用该组件：

<template>
  <div>
    <img v-for="(image, index) in images" :src="image.msrc" :key="index" @click="handlePreview(index)" />
    <ImagePreview ref="preview"></ImagePreview>
  </div>
</template>

<script>
import ImagePreview from '@/components/ImagePreview.vue'

export default {
  data () {
    return {
      images: [
        {src: '图片地址1', msrc: '缩略图地址1', alt: '图片描述1'},
        {src: '图片地址2', msrc: '缩略图地址2', alt: '图片描述2'},
        {src: '图片地址3', msrc: '缩略图地址3', alt: '图片描述3'}
      ]
    }
  },
  components: {
    ImagePreview
  },
  methods: {
    handlePreview (index) {
      let images = []
      this.images.forEach(item => {
        images.push({
          src: item.src,
          msrc: item.msrc,
          alt: item.alt
        })
      })
      this.$refs.preview.open(images)
    }
  }
}
</script>

在该页面中，我们引入了ImagePreview组件，并且在需要预览图片的图片上绑定了click事件，当点击图片时调用handlePreview方法。在方法中，我们将所有的图片信息传入到ImagePreview组件中，并通过调用open方法来打开图片预览组件。

示例

下面是一个完整的示例代码：

<template>
  <div>
    <img v-for="(image, index) in images" :src="image.msrc" :key="index" @click="handlePreview(index)" />
    <ImagePreview ref="preview"></ImagePreview>
  </div>
</template>

<script>
import ImagePreview from '@/components/ImagePreview.vue'

export default {
  data () {
    return {
      images: [
        {src: '图片地址1', msrc: '缩略图地址1', alt: '图片描述1'},
        {src: '图片地址2', msrc: '缩略图地址2', alt: '图片描述2'},
        {src: '图片地址3', msrc: '缩略图地址3', alt: '图片描述3'}
      ]
    }
  },
  components: {
    ImagePreview
  },
  methods: {
    handlePreview (index) {
      let images = []
      this.images.forEach(item => {
        images.push({
          src: item.src,
          msrc: item.msrc,
          alt: item.alt
        })
      })
      this.$refs.preview.open(images)
    }
  }
}
</script>

<style>
/* 样式 */
</style>

另外一个示例，更加简单点，如下：

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

<script>
import ImagePreview from '@/components/ImagePreview.vue'

export default {
  data () {
    return {
      image: {src: '图片地址', msrc: '缩略图地址', alt: '图片描述'}
    }
  },
  components: {
    ImagePreview
  },
  methods: {
    handlePreview (image) {
      this.$refs.preview.open([image])
    }
  }
}
</script>

<style>
/* 样式 */
</style>

在该页面中，我们引入了ImagePreview组件，并且将单张图片信息传入到ImagePreview组件中，并通过调用open方法来打开图片预览组件。

好了，以上就是在Vue项目中实现图片预览的公用组件功能的完整攻略。