https://github.com/kailong321200875/vue-preview-pictures
基于vue的PC端图片预览组件
https://github.com/kailong321200875/vue-preview-pictures
Last synced: 6 months ago
JSON representation
基于vue的PC端图片预览组件
- Host: GitHub
- URL: https://github.com/kailong321200875/vue-preview-pictures
- Owner: kailong321200875
- License: mit
- Created: 2019-11-17T04:12:31.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-07-17T01:15:14.000Z (over 5 years ago)
- Last Synced: 2024-03-23T13:01:49.910Z (over 1 year ago)
- Language: Vue
- Homepage:
- Size: 789 KB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## 一款基于VUE的图片预览插件
### 大多数图片预览都是基于子元素为img标签来实现，感觉有点太死板了。所以自己就搞了一个在JS中调用图片预览，只需要传入对应的参数就能实现图片预览，不在关注与HTML长什么样子。
## 导入
> npm install vue-preview-pictures
## 全局引入
在 main.js 中引入
```
import PreviewPic from 'vue-preview-pictures'
Vue.prototype.$PreviewPic = PreviewPic
可以直接挂在到VUE的原型上，作为全局使用
```
## 局部引入
```
import PreviewPic from 'vue-preview-pictures'
也可以单独在VUE文件中使用
```
## 使用方式
```
this.$PreviewPic({
zIndex: 2000, // 组件的zIndex值 默认为2000
index: 2, // 展示第几张图片 默认为0
list: list, // 需要展示图片list
onClose: (i) => { // 关闭时的回调
console.log(i)
},
onSelect: (i) => { // 点击某张图片的回调
console.log(i)
}
})
```
## 全局方法
另外还提供一个全局方法来关闭组件
```
this.$PreviewPic.close(() => {
console.log('我是全局关闭方法')
})
```
## 更新日志
### 0.1.7
*2020-07-17*
- 重新打包并上传
==============================================
### 0.1.6
*2020-07-17*
- 修复1:1按钮操作在IE上的兼容问题
==============================================
### 0.1.5
*2019-11-27*
- 解决第一次打开按空格会在此弹出预览组件的BUG
- 修复已知BUG
==============================================
### 0.1.3
*2019-11-17*
- 优化打开组件时不显示滚动条
==============================================
### 0.1.1
*2019-11-17*
- 完成基础版提交