Vue全屏预览组件image-preview-full

前言

如果觉得对您有用可以点个Star吧，相关的内容在上篇文章已经做了一些简单的描述。如果您还不了解，不妨去看一下。如果觉得缺失了某些您中意的需求，不妨在评论区或者ius中提供给我。

• npm地址直达
• Github源码直达
• 一起来用typescript实现图片的全屏浏览组件

使用方式

1.安装

npm install image-preview-full --save

2.在vue项目中注册

import ImagePreview from 'image-preview-full'
import 'image-preview-full/lib/image-preview-full.css'
Vue.use(ImagePreview)

3.组件中使用

 <ImagePreview :path="defaultImagePath" :isVisible.sync="visible"></ImagePreview>

export default {
  data: () => ({
    // 数组方式
    defaultImagePath: ['url1', 'url2'],
    // 单个图片
    // defaultImagePath: 'url',
    // 是否显示 true为是，false为否
    visible: false
  })
}

当前的props

更新日志

• 2/7: 修复切换箭头的异常BUG