Skip to content

liqin1059/vue-picture-tools

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-picture-tools

NPM version

  • 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端

avatar

移动端

avatar

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

About

npm packages for vue picture preview tools🏜🐈 图片查看插件

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published