基于vue.js的图像预览组件
Overview
基于vue.js图像预览组件
更多的手势操作还是开发中
Demo
Github
安装
npm install vue-fancybox --save
import fancyBox from vue-fancybox;
基础用法
<div class="list" v-for="(n, index) in imageList" :data-index="index"> <img @click="open($event)" :src="n.url"> </div>
export default {
data () {
return {
imageList: [
{ width: 900, height: 675, url: http://ocm0knkb1.bkt.clouddn.com/1-1.jpg },
{ width: 601, height: 1024, url: http://ocm0knkb1.bkt.clouddn.com/1-2.jpg },
{ width: 1024, height: 700, url: http://ocm0knkb1.bkt.clouddn.com/1-3.jpg }
]
}
},
methods: {
open (e) {
fancyBox(e.target, this.imageList);
}
}
}
选项
fancyBox Parameter:
this.imageList Options:
例子
$ cd example $ npm install $ npm run dev
注意
需要 配合
