基於vue.js的影象預覽元件
阿新 • • 發佈:2019-02-15
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:
Parameter | Description |
---|---|
e.target | 當前點選的圖片 |
this.imageList | 所有的圖片列表 |
this.imageList Options:
Option | Description | Type |
---|---|---|
width | 圖片的寬度 | Number |
height | 圖片的高度 | Number |
url | 圖片的的地址 | String |
例子
$ cd example
$ npm install
$ npm run dev