一个简单的vue图片预览组件

一个简单地图片预览组件vue-img-previewer

github页面

一个简单的vue图片预览组件_第1张图片
组件展示

使用方式

  1. 安装
yarn add vue-img-previewer
npm i vue-img-previewer --save
  1. 然后在要使用的组件里按照下面的类似格式书写



上面为了简单测试,直接用了require,这里可以是从后端拿到的base64数据

图片数据的格式需为
{ title: 'xxx', url: 'xxxxxx.xxx', id: x }
  1. 运行
yarn serve
npm run serve

参数

名称 功能 默认值 可选值
viewerVisible vue-previewer的可见性,必填值 null false
imgIndex 图片的索引,必填值 null 0-~
imgDataList 图片的数据 null 数组类型按照{ title: 'xxx', url: 'xxxxxx.xxx', id: x }

组件简单,注释详细,易于第二次开发

刚学了点ts和vue做了这个组件,主要是vue的组件有点少,我搜索的时候,只看见v-viewer这个封装了 viewer.js的组件和一些功能较少的组件,不易于维护和二次开发,于是我做了这个组件,我是刚入前端的新手,希望各位指点,如果可以献上你的star和fork,小生感激不尽

你可能感兴趣的:(一个简单的vue图片预览组件)