HeVue-img-preview: Vue 图片预览组件

想象一下，你在一个电子商务网站上浏览产品时，你看到了一张产品图片，但图片很小，你无法看清细节。这时，你会希望有一个图片预览功能，让你可以放大图片，仔细查看产品。

这就是 HeVue-img-preview 的用武之地。它是一个 Vue 图片预览组件，允许你轻松地为你的 Vue 应用添加图片预览功能。

使用 HeVue-img-preview 非常简单。只需在你的 Vue 模板中添加以下代码：

<template>
  <hevue-img-preview :src="imageSrc" />
</template>

<script>
import HeVueImgPreview from 'hevue-img-preview';

export default {
  components: { HeVueImgPreview },
  data() {
    return {
      imageSrc: 'path/to/your/image.jpg',
    };
  },
};
</script>

现在，当你点击图片时，HeVue-img-preview 将打开一个模态框，显示图片的放大版本。你可以使用鼠标或触控手势来放大、缩小和移动图片。

HeVue-img-preview 还提供了许多配置选项，允许你自定义预览功能的外观和行为。例如，你可以设置背景颜色、边框样式、缩放级别和过渡效果。

除了基本功能外，HeVue-img-preview 还支持一些高级功能，例如：

• 手势缩放和拖动
• 键盘导航
• 旋转和裁剪图片
• 查看 EXIF 数据
• 下载图片

HeVue-img-preview 是一款轻量级、易于使用且功能丰富的图片预览组件。它可以显著改善你的 Vue 应用的用户体验，让他们能够更轻松地查看和交互图片。

安装

npm install hevue-img-preview

使用

<template>
  <hevue-img-preview :src="imageSrc" />
</template>

<script>
import HeVueImgPreview from 'hevue-img-preview';

export default {
  components: { HeVueImgPreview },
  data() {
    return {
      imageSrc: 'path/to/your/image.jpg',
    };
  },
};
</script>

配置选项

选项	类型	默认值
src	string	必填	要预览的图片的 URL 或文件路径
show	boolean	false	是否显示预览
zIndex	number	9999	预览模态框的 z-index
backgroundColor	string	'rgba(0, 0, 0, 0.8)'	预览模态框的背景颜色
borderColor	string	'#fff'	预览模态框的边框颜色
borderWidth	number	1	预览模态框的边框宽度（像素）
borderRadius	number	0	预览模态框的边框圆角（像素）
animationDuration	number	300	预览模态框的打开/关闭动画持续时间（毫秒）
minScale	number	0.1	图片的最小缩放比例
maxScale	number	10	图片的最大缩放比例
enableRotation	boolean	true	是否允许旋转图片
enableCrop	boolean	true	是否允许裁剪图片
showExifData	boolean	false	是否显示 EXIF 数据
downloadButton	boolean	true	是否显示下载按钮

事件

事件
show	预览打开时触发
hide	预览关闭时触发
scale	图片缩放时触发
rotate	图片旋转时触发
crop	图片裁剪时触发
download	图片下载时触发

SEO 关键词