vue-preview-picture-l
v1.0.1
Published
vue picture preview tools
Downloads
3
Readme
vue-picture-preview
vue picture preview tools👫
支持pc端,移动端
支持放大
支持键盘事件
🙋
🙋 单击关闭查看图片窗口
🙋
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
npm
# npm install
npm install vue-picture-preview --save
引入
在main.js中引入
import preview from 'picture-list'
Vue.use(preview)
在组件中使用
包含图片列表&&展示
<picture-list
:box-width="boxWidth" // 图片列表盒子宽
:width="width" // 图片宽度
:height="height" // 图片高度
:margin="margin" // 图片边距
:img-urls="imgUrls"> // 图片数组
</picture-list>
仅做图片查看
<picture-preview
:picture-index="pictureIndex" // 当前点击图片的index
:picture-data="pictureData" // 图片数组
:is-delete="isDelete"> // 删除事件
</picture-preview>
图片数组格式
[
{
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: '图片三'
}
]
效果展示
源码地址:https://github.com/liqin1059/vue-preview-picture For detailed explanation on how things work, consult the docs for vue-loader.