jybvue-img-preview 简介

安装

使用 npm 进行安装

npm install jyb-img-preview

在 main.js 进行全局引入

import jybvueImgPreview from "jyb-img-preview";
Vue.use(jybvueImgPreview);

在组件中进行使用

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

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

使用

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

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

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

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

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

# 多图预览
this.$jybvueImgPrevieww({
    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
import jybvueImgPreview from 'jyb-img-preview'
Vue.use(jybvueImgPreview, {
  keyboard: true,
  clickMaskCLose: true
  ...
})

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

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

如不考虑兼容性问题，上述的背景颜色均可接收渐变色

作者注

本人前端小白一枚，工作经验较少，所写东西尽量保证没 bug，但性能界面什么的可能没办法做到最优，如果您有什么使用中的建议或意见，欢迎反馈给我，可以加联系方式，也可以直接回复，或者到GitHub提个issue[建议此方法]，如果对您有所帮助，万分期待您能给个赞并且到GitHub给个小星星