image-preview-vue

image-preview-vue

易于使用的PC端图片浏览组件，编程式的调用方式

Example

live demo

Install

npm i image-preview-vue --save

global

// main.js
import imagePreview from 'image-preview-vue'
import 'image-preview-vue/lib/imagepreviewvue.css'

Vue.use(imagePreview)

// your some.vue
export default {
  // ...
  methods:{
    foo(){
    const preview = this.$imagePreview({
        initIndex:0,
        images:['https://yinodimage.oss-cn-hangzhou.aliyuncs.com/20200229004202.jpg'],
      })
    }
  }
}

import

// main.js
import 'image-preview-vue/lib/imagepreviewvue.css'

// other.js
import imagePreview from 'image-preview-vue'

const preview = imagePreview({
  initIndex:0,
  images:['https://yinodimage.oss-cn-hangzhou.aliyuncs.com/20200229004202.jpg'],
})

Feature

• 鼠标拖拽缩放图片
• 高斯模糊背景
• 图片预加载
• 分页信息显示
• 自定义contain缩放
• 增加实例方法与回调
• 增加图片水平镜像功能
• 增加常用快捷键
• 增加图片下载功能

Config

参数名	类型	描述	可选值	默认值
initIndex	Number	初始化展示图片索引	-	0
images	[String]	图片URL数组	-	[]
isEnableBlurBackground	Boolean	是否开启高斯模糊背景	-	false
maskBackgroundColor	String	半透明遮罩层背景色 只生效于关闭高斯模糊的情况	任何合法的css background-color值	'rgba(0,0,0,0.4)'
isEnableLoopToggle	Boolean	是否开启循环切换模式	-	true
initViewMode	String	初始化图片展示模式(等于与Object-fit)	'contain'/'cover'	'contain'
containScale	Number	contain模式下的缩放比例，只在contain模式下生效	合法区间 [0.1,5]	1
shirnkAndEnlargeDeltaRatio	Number	缩放点击强度系数	-	0.2
wheelScrollDeltaRatio	Number	鼠标滚轮缩放图片强度系数	-	0.2
isEnableImagePageIndicator	Boolean	是否显示分页	-	true
onClose	Function	关闭回调	-	()=>{}
zIndex	Number	预览弹窗的 z-index 值	-	100
isEnableKeyboardShortcuts	Boolean	是否开启常用快捷键	-	false
isEnableDownloadImage	Boolean	是否开启图片下载功能	-	true
getImageFileName	Function	下载时图片的文件名获取函数,可以自己实现正则来获取文件名，默认是时间戳	-	(url) => String(Date.now())

viewMode

内置两个基本模式 contain 和 cover

对应下方全屏切换按钮

• contain 默认单轴撑满屏幕 维持比例不裁切，如果希望整体缩小，可以修改 containScale 参数
• cover 默认双轴撑满屏幕 维持比例，长轴裁切。

快捷键 shortcuts

• Esc 关闭
• UP 放大
• Down 缩小
• Left 向左切换
• Right 向右切换
• Ctrl + s 下载图片，开启图片下载功能下生效

instance

get instance

const preview = this.$imagePreview({...})

方法名	参数	描述
close	-	关闭预览

Contributing

如果有发现bug或者希望加入一些功能，请积极提issues，我会尽快回复

License

MIT

灵感来自ElementUI中的Image组件，但是可惜没有编程式的调用方式，所以催生了这个库