vue项目——插件

最新推荐文章于 2025-03-03 14:31:35 发布

单调的王先森

最新推荐文章于 2025-03-03 14:31:35 发布

阅读量202

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_51198863/article/details/118549540

版权

vue 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一款基于Vue的图片预览组件hevue-img-preview，支持PC和手机端，可用于单图和多图预览。通过简单的安装和引入，开发者可以轻松实现图片点击预览功能，提升用户体验。在移动端还支持单指拖动和双指缩放操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

cv大法提高开发效率！

文章目录

预览大图插件

预览大图插件

hevue-img-preview

简介：本组件是一个基于 vue 编写的 vue 图片预览组件，支持 pc 和手机端，
支持单图和多图预览，仅传入一个图片地址，即可实现图片预览效果。
手机端支持单指拖拽和双指缩放。

# 安装
npm install hevue-img-preview --save

# main.js 引入
import hevueImgPreview from 'hevue-img-preview'
Vue.use(hevueImgPreview)

# 使用
给任意对象添加任意事件，例如
<img :src="src" @click="previewImg(url)">
即可在事件里调用方法进行预览
methods: {
	previewImg (url) {
		this.$hevueImgPreview(url)
	}
}