vue-preview-pictures

0.1.7 • Public • Published

一款基于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

  • 完成基础版提交

Package Sidebar

Install

npm i vue-preview-pictures

Weekly Downloads

9

Version

0.1.7

License

MIT

Unpacked Size

1.19 MB

Total Files

18

Last publish

Collaborators

  • chenkl