Image-preview-vue NPM

image-preview-vue

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

Example

npm.io npm.io npm.io

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())