实现一个vue的图片预览插件
2018-12-18 19:09
459 查看
vue-image-swipe
基于photoswipe实现的vue图片预览组件
安装
1 第一步
npm install vue-image-swipe -D
2 第二步
vue 入口文件引入
import Vue from 'vue' import VueImageSwipe from 'vue-image-swipe' import 'vue-image-swipe/dist/vue-image-swipe.css' Vue.use(VueImageSwipe)
使用
<template> <div> hello world <div> <ul> <li :key="index" @click="preview(index)" v-for="(l, index) in images"> <img :src="l" alt=""> </li> </ul> </div> </div> </template> <script> export default { name: 'app', data() { return { images: [ 'http://oayhezji6.bkt.clouddn.com/preview1.jpg', 'http://oayhezji6.bkt.clouddn.com/preview2.jpg', 'http://oayhezji6.bkt.clouddn.com/preview3.jpg', 'http://oayhezji6.bkt.clouddn.com/preview9.jpg', 'http://oayhezji6.bkt.clouddn.com/preview10.jpg', 'http://oayhezji6.bkt.clouddn.com/preview6.jpg' ] } }, created() { }, methods: { preview(index) { this.$imagePreview({ images: this.images, index: index, }) } } } </script>
methods
只暴露了一个方法this.$imagePreview,并绑定到vue的原型上
使用
this.$imagePreview(options = {})
options有三个参数
参数 | 默认值 | 说明 |
---|---|---|
images | 空数组 | 图片的url数组 |
index | 0 | 预览图片的索引值, 默认是0 |
defaultOpt | {} | 配置项 |
defaultOpt 的配置项请参考photoswipe配置项,
注意:不能保证所有配置项都是可用的
列举一些常用的配置
defaultOpt: { fullscreenEl: true, shareEl: false, arrowEl: true, preloaderEl: true, loop: false, bgOpacity: 0.85, showHideOpacity: true, errorMsg: '<div class="pswp__error-msg">图片加载失败</div>', }
demo
相关文章推荐
- Vue实现一个图片懒加载插件
- uploadify插件实现多个图片上传并预览
- vue插件draggable实现拖拽移动图片顺序
- 实现一个3D图片轮播插件 —— 更新版
- jQuery插件imgPreviewQs实现上传图片预览
- 简单获取input file 选中的图片,并在一个div的img里面赋值src实现预览图片
- JS实现的图片预览插件与用法示例【不上传图片】
- 利用vue-cropper做的关于图片裁剪、压缩、上传、预览等做的一个公共组件
- js实现一个图片 懒加载插件
- Jcrop插件+Canvas实现图片上传预览+图片裁剪上传
- jquery.uploadify插件实现图片上传和预览效果
- 实现一个简单的Vue插件
- 推荐一个图片预览的插件
- jquery.uploadify插件实现图片上传和预览效果
- vue2.0 使用element-ui里的upload组件实现图片预览效果方法
- 如何用HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
- 简单获取input file 选中的图片,并在一个div的img里面赋值src实现预览图片(可实现多张图片上传和预览移除)
- vue实现图片预览组件的封装与使用
- Filter实现的一个基于url的图片处理插件
- vue+node实现图片上传+预览