sen-preview-photo

"基于vue的sen-preview-photo图片预览插件"

说明

1.有放大缩小功能
2.图片列表展示
3.下载按钮需要与后端协商
4.简化了html结构

使用

# 安装
npm install sen-preview-photo --save

# 引入
import preview from 'sen-preview-photo'
Vue.use(preview)
//或者 
//var option={....} option配置请查看
//Vue.use(preview,option)
let imgUrl: [
	'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
	'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
],
let index:0
组件调用this.viewImage(imgUrl, index) 
事件监听
this.$preview.onEvent('viewImage',(data)=>{
      console.log(data)

})

# umd
暂不支持
<link rel="stylesheet" type="text/css" href="路径/dist/sen-preview-list.css"/>

<script src="路径/dist/sen-preview-list.umd.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var options={
		apiHost:'127.0.0.1' //你的服务器host
	}
	
	Vue.use(senPreviewList,options)
	
	new Vue({
		el:'#app'
	})
</script>

# html

2022-09-08更新

新增事件监控回调函数onEvent。

2022-09-07更新

修复打开和关闭弹出框show赋值。

调用案例