基于elementUI实现图片预览组件的示例代码

下面就来详细讲解“基于elementUI实现图片预览组件的示例代码”的完整攻略，攻略分为以下几个步骤：

1. 安装elementUI

首先需要安装elementUI，可以使用npm或者yarn来安装，这里以npm为例：

npm install element-ui --save

2. 导入elementUI插件

在项目中导入elementUI插件，可以选择在main.js中导入，也可以在需要使用的组件中单独导入。这里以在main.js中导入为例：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3. 实现预览组件代码

在需要使用图片预览功能的组件中，引入以下代码：

<template>
  <el-dialog :visible.sync="dialogVisible">
    <img :src="imageURL" :alt="imageDescription" style="width: 100%">
  </el-dialog>
</template>

<script>
export default {
  name: 'PreviewImage',
  props: {
    imageURL: {
      type: String,
      required: true
    },
    imageDescription: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      dialogVisible: false
    }
  },
  methods: {
    openDialog () {
      this.dialogVisible = true
    }
  }
}
</script>

此代码实现了一个名为PreviewImage的组件，该组件接受两个props，一个是imageURL，表示要预览的图片地址，另一个是imageDescription，表示图片的描述信息。组件中包含一个el-dialog组件，用来显示图片预览窗口，并在窗口中显示传入的图片和描述信息。当用户点击图片时，使用openDialog方法打开该窗口。

4. 在需要使用预览组件的页面中使用预览组件

在需要使用预览组件的页面中引入PreviewImage组件，如下所示：

<template>
  <div>
    <img :src="imageURL" :alt="imageDescription" @click="openDialog">
    <preview-image :image-url="imageURL" :image-description="imageDescription" ref="previewImage"></preview-image>
  </div>
</template>

<script>
import PreviewImage from './PreviewImage'

export default {
  name: 'ImagePreviewDemo',
  components: {
    PreviewImage
  },
  data () {
    return {
      imageURL: 'https://xxxxxx.jpg',
      imageDescription: '图片描述信息'
    }
  },
  methods: {
    openDialog () {
      this.$refs.previewImage.openDialog()
    }
  }
}
</script>

在上述代码中，我们使用了一个名为ImagePreviewDemo的组件，该组件包含了一个img标签和一个PreviewImage组件。当用户点击img标签时，调用openDialog方法打开PreviewImage组件中定义的窗口，同时在该窗口中显示传入的图片和描述信息。

示例1：在表格中显示预览组件

下面是一个使用预览组件的示例，该示例展示了如何在表格中使用预览组件，点击表格中的图片即可预览图片：

<template>
  <el-table :data="tableData" style="width: 100%;">
    <el-table-column type="index" width="50"></el-table-column>
    <el-table-column label="图片">
      <template slot-scope="scope">
        <img :src="scope.row.imageUrl" style="width: 100%;max-width: 200px;cursor: pointer;" @click="previewImage(scope.row.imageUrl)">
        <preview-image :image-url="imageUrl" ref="previewImage"></preview-image>
      </template>
    </el-table-column>
    <el-table-column label="描述" prop="description"></el-table-column>
  </el-table>
</template>

<script>
import PreviewImage from '@/components/PreviewImage'

export default {
  name: 'TablePreviewDemo',
  components: {
    PreviewImage
  },
  data () {
    return {
      tableData: [
        {
          imageUrl: 'https://xxxxxx1.jpg',
          description: '图片1描述信息'
        },
        {
          imageUrl: 'https://xxxxxx2.jpg',
          description: '图片2描述信息'
        }
      ],
      imageUrl: '',
      dialogVisible: false
    }
  },
  methods: {
    previewImage (url) {
      this.imageUrl = url
      this.$refs.previewImage.openDialog()
    }
  }
}
</script>

在上述代码中，我们使用了一个名为TablePreviewDemo的组件，该组件包含了一个el-table组件，表格中的列中包含了一个img标签和一个PreviewImage组件。当用户点击img标签时，调用previewImage方法打开PreviewImage组件中定义的窗口，同时在该窗口中显示传入的图片和描述信息。

示例2：实现多图片预览功能

下面是一个使用预览组件的示例，该示例展示了如何实现多图片预览功能，点击某一张图片即可在窗口中预览图片，支持多张图片预览：

<template>
  <div>
    <img v-for="(url, index) in imageURLs" :src="url" :key="index" style="width: 100%;max-width: 200px;cursor: pointer;" @click="previewImage(index)">
    <preview-image :image-url="imageURLs[currentIndex]" ref="previewImage"></preview-image>
  </div>
</template>

<script>
import PreviewImage from '@/components/PreviewImage'

export default {
  name: 'MultiImagePreview',
  components: {
    PreviewImage
  },
  data () {
    return {
      imageURLs: [
        'https://xxxxxx1.jpg',
        'https://xxxxxx2.jpg',
        'https://xxxxxx3.jpg'
      ],
      currentIndex: 0
    }
  },
  methods: {
    previewImage (index) {
      this.currentIndex = index
      this.$refs.previewImage.openDialog()
    }
  }
}
</script>

在上述代码中，我们使用了一个名为MultiImagePreview的组件，该组件包含了多张图片以及一个PreviewImage组件。当用户点击某一张图片时，调用previewImage方法获取该图片的索引值，保存至currentIndex中，并在PreviewImage组件中显示该图片。当用户点击窗口中的左右箭头时，currentIndex会相应地改变，从而达到浏览多张图片的效果。