vue-picture-tools

• vue picture preview tools👫

• 支持pc端，移动端

• 支持放大

• 图片链接属性自定义

• 支持键盘事件

🙋 单击关闭查看图片窗口 🙋 双击放大

npm

# npm install
npm install vue-picture-tools --save

引入

在main.js中引入

import preview from 'vue-picture-tools'
Vue.use(preview)

使用

包含图片列表&&展示

删除图标样式可以自定义，可以引申为自己需要的点击的功能图标，回调参数为当前点击图片的index

<picture-list
  :box-style="{}"
  :list-style="{}"
  :urlName="'url'"
  :img-urls="[]"
  :is-delete="false"
  :dele-style="deleStyle"
  :zoom="false"
  :speed="200"
  @delete-picture="deletePicture">
</picture-list>

参数	类型	备注	默认值
boxStyle	Object	图片列表盒子样式 （驼峰命名：backgroundColor）	{}
listStyle	Object	图片样式 （驼峰命名：backgroundColor）	{}
urlName	String	图片链接属性名称	'url'
imgUrls	Array	图片数组	[]
isDelete	Boolean	是否显示删除按钮	false
deleStyle	Boolean	删除按钮样式 （驼峰命名：backgroundColor）	{}
zoom	Boolean	是否双击放大	true
speed	Number	图片浏览切换速度	800
deletePicture	event	删除事件回调（参数：index）

仅做图片查看

<picture-preview
  :urlName="'url'"
  :picture-index="0"
  :picture-data="[]"
  :is-delete="false"
  :dele-style="{}"
  :zoom="false"
  :speed="200"
  @picture-out="pictureOut"
  @delete-picture="deletePicture">
</picture-preview>

参数	类型	备注	默认值
urlName	String	图片链接属性名称	'url'
pictureIndex	Number	当前点击图片的index	0
pictureData	Array	图片数组	[]
isDelete	Boolean	是否显示删除按钮	false
deleStyle	Object	删除按钮样式 （驼峰命名：backgroundColor）	{}
zoom	Boolean	是否双击放大	true
speed	Number	图片浏览切换速度	800
picture-out	event	图片单击回调事件（我用来做展示关闭事件回调）
deletePicture	event	删除事件回调（参数：index）

图片数组格式

boxStyle: {
  width: '100%'
}

listStyle: {
  boxWidth: '100%',
  width: '200px',
  height: '200px',
  margin: '10px 0 0 10px',
}

[
  {
    url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3345425463,2829351688&fm=26&gp=0.jpg',
    desc: '图片一'
  },
  {
    url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2820343167,442028568&fm=26&gp=0.jpg',
    desc: '图片二'
  },
  {
    url: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3885463997,795370374&fm=26&gp=0.jpg',
    desc: '图片三'
  }
]

效果展示

pc端

移动端

源码地址：https://github.com/liqin1059/vue-picture-tools