基于 vue 编写的vue图片预览组件，支持单图和多图预览，仅传入一个图片地址，即可实现图片预览效果，可自定义背景、按钮颜色等 |
您所在的位置：网站首页 › 多图上传和预览插件 › 基于 vue 编写的vue图片预览组件，支持单图和多图预览，仅传入一个图片地址，即可实现图片预览效果，可自定义背景、按钮颜色等 |
|
hevue-img-preview 简介
完整版下载地址：基于 vue 编写的vue图片预览组件 本组件是一个基于 vue 编写的 vue 图片预览组件，支持 pc 和手机端，支持单图和多图预览，仅传入一个图片地址，即可实现图片预览效果。手机端支持单指拖拽和双指缩放。 官方文档官方使用文档请访问 https://heyongsheng.github.io/#/ 安装使用npm进行安装 npm install hevue-img-preview在main.js进行全局引入 // vue2.x import hevueImgPreview from 'hevue-img-preview' Vue.use(hevueImgPreview) // vue3.x import hevueImgPreview from 'hevue-img-preview' const app = createApp(App) app.use(hevueImgPreview) app.mount('#app')在组件中进行使用 methods: { previewImg (url) { this.$hevueImgPreview(url) } } 使用this.$hevueImgPreview() 方法可以接收一个字符串类型的 url，或者对象类型的配置，具体使用方法如下 接收一个地址字符串this.$hevueImgPreview(url) this.$hevueImgPreview('https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg') // 线上地址 this.$hevueImgPreview('./img/logo.jpeg') // 本地地址 接收一个对象this.$hevueImgPreview(options) # 单图预览 this.$hevueImgPreview({ url: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg', }) # 多图预览 this.$hevueImgPreview({ multiple: true, // 开启多图预览模式 nowImgIndex: 1, // 多图预览，默认展示第二张图片 imgList: ['1.png', '2.png', '3.png'], // 需要预览的多图数组 }) 配置项 字段类型默认值备注urlString无预览的图片地址，多图预览时省略multipleBooleanfalse是否多图预览nowImgIndexNumber0多图预览时默认显示的图片下标imgListArray无多图预览时传入的图片数组keyboardBooleanfalse是否开启键盘控制clickMaskCLoseBooleanfalse是否可以点击遮罩层关闭controlBarBooleantrue是否显示控制条及页码closeBtnBooleantrue是否显示关闭按钮arrowBtnBooleantrue是否显示左右翻页按钮 全局配置对于某些配置，例如开启键盘事件，点击遮罩层关闭，我们可能要全局保持统一，但却需要在每一次调用时重复配置，为了解决这个问题，我们提供了全局配置项，您可以在引入插件的时候，将全局配置项作为第二个参数传入即可，以免再每次调用的时候重复配置。 // main.js // vue2.x import hevueImgPreview from 'hevueImgPreview' Vue.use(hevueImgPreview, { keyboard: true, clickMaskCLose: true ... }) // vue3.x const app = createApp(App) app.use(hevueImgPreview, { keyboard: true, clickMaskCLose: true ... }) app.mount('#app')如开启键盘控制事件后，相对应功能控制按键如下 按键功能w放大s缩小a上一张d下一张q逆时针旋转e顺时针旋转r图片复位esc关闭图片预览 更新日志 5.0.2组件支持实例化，调用组件将返回组件实例，支持直接通过实例关闭弹窗 const hevueImgPreviewEl = this.$hevueImgPreview(...) hevueImgPreviewEl.close() 6.0.0组件兼容vue3.x 完整版下载地址：基于 vue 编写的vue图片预览组件 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |