安装及使用

简介

本组件是一个基于 vue 编写的 vue 图片预览组件，支持 pc 和手机端，支持单图和多图预览，仅传入一个图片地址，即可实现图片预览效果。手机端支持单指拖拽和双指缩放。页面各组件颜色均可可自定义，实现个性化设计，如果能帮上你，希望可以移步 GitHub (opens new window) ，或者码云 (opens new window) 给个小星星，如果有任何使用意见或建议，也欢迎回复或者提交 issure

兼容性

本插件在Chrome浏览器环境下开发，对于其他浏览器兼容性没有测试，如项目对于浏览器兼容性有较高要求，建议谨慎使用。

插件从6.0开始同时兼容vue2和vue3，使用方法请阅读下文，注意，由于作者对于vue3并不熟悉，所以使用vue3版本请尽量多多测试，确保没有问题，如有问题，欢迎提issue

安装

注意

为了避免打包重复依赖造成的体积过大，本插件采用了直接发布源码的方式进行发布，所以您的项目必须安装的有Vue，否则本插件无法运行。同时由于此原因，您也可以更便捷的对源码进行修改，对功能、样式等进行更好的自定义，您只需要在项目的根目录下，进入 node_modules/hevue-img-preview 文件夹，即可对插件的源码进行查看和修改。

使用npm进行安装

npm install hevue-img-preview

使用

vue2 版本

在main.js进行全局引入
```javascript
import hevueImgPreview from 'hevue-img-preview'
Vue.use(hevueImgPreview)

vue3 版本

在main.js进行全局引入
``` javascript
import hevueImgPreview from 'hevue-img-preview'

const app = createApp(App)
app.use(hevueImgPreview)
app.mount('#app')

在组件中进行使用

<img :src="url" @click="previewImg(url)">

methods: {
	previewImg (url) {
		this.$hevueImgPreview(url)
	}
}

示例

点击下面这张图片试试看吧

点击查看代码

<template>
  <img src="/img/img-1.jpg" @click="showImg('/img/img-1.jpg')">
</template>

<script>
export default {
  methods: {
    showImg(url) {
      this.$hevueImgPreview(url)
    }
  }
}
</script>

提示

本插件用函数调用的方法触发，所以您可以给任何元素添加事件来显示图片，如图片、文字、按钮等，您也可以在任何事件中调用本插件，如页面加载事件、点击事件等。