xiaobu-img-preview

xiaobu-img-preview 简介

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

安装

使用npm进行安装

npm install xiaobu-img-preview

在main.js进行全局引入

// vue2.x
import xiaobuImgPreview from 'xiaobu-img-preview'
Vue.use(xiaobuImgPreview)

// vue3.x
import xiaobuImgPreview from 'xiaobu-img-preview'
const app = createApp(App)
app.use(xiaobuImgPreview)
app.mount('#app')

在组件中进行使用

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

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

使用

this.$xiaobuImgPreview() 方法可以接收一个字符串类型的 url，或者对象类型的配置，具体使用方法如下

• 接收一个地址字符串this.$xiaobuImgPreview(url)

this.$xiaobuImgPreview('https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg') // 线上地址
this.$xiaobuImgPreview('./img/logo.jpeg') // 本地地址

• 接收一个对象this.$xiaobuImgPreview(options)

# 单图预览
this.$xiaobuImgPreview({
    url: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
})

# 多图预览
this.$xiaobuImgPreview({
    multiple: true, // 开启多图预览模式
    nowImgIndex: 1, // 多图预览，默认展示第二张图片
    imgList: ['1.png', '2.png', '3.png'], // 需要预览的多图数组
})

配置项

字段	类型	默认值	备注
url	String	无	预览的图片地址，多图预览时省略
multiple	Boolean	false	是否多图预览
nowImgIndex	Number	0	多图预览时默认显示的图片下标
imgList	Array	无	多图预览时传入的图片数组
keyboard	Boolean	false	是否开启键盘控制
clickMaskCLose	Boolean	false	是否可以点击遮罩层关闭
controlBar	Boolean	true	是否显示控制条及页码
closeBtn	Boolean	true	是否显示关闭按钮
arrowBtn	Boolean	true	是否显示左右翻页按钮

全局配置

对于某些配置，例如开启键盘事件，点击遮罩层关闭，我们可能要全局保持统一，但却需要在每一次调用时重复配置，为了解决这个问题，我们提供了全局配置项，您可以在引入插件的时候，将全局配置项作为第二个参数传入即可，以免再每次调用的时候重复配置。

// main.js

// vue2.x
import xiaobuImgPreview from 'xiaobuImgPreview'
Vue.use(xiaobuImgPreview, {
  keyboard: true,
  clickMaskCLose: true
  ...
})

// vue3.x
const app = createApp(App)
app.use(xiaobuImgPreview, {
  keyboard: true,
  clickMaskCLose: true
  ...
})
app.mount('#app')

如开启键盘控制事件后，相对应功能控制按键如下

按键	功能
w	放大
s	缩小
a	上一张
d	下一张
q	逆时针旋转
e	顺时针旋转
r	图片复位
esc	关闭图片预览

更新日志