摘要：基于圖像預(yù)覽組件更多的手勢操作還是開發(fā)中安裝基礎(chǔ)用法選項(xiàng)當(dāng)前點(diǎn)擊的圖片所有的圖片列表圖片的寬度圖片的高度圖片的的地址例子注意需要配合原文
Overview
基于vue.js圖像預(yù)覽組件
更多的手勢操作還是開發(fā)中
Demo
vue-fancybox
Github
github
安裝
npm install vue-fancybox --save
import fancyBox from "vue-fancybox";
基礎(chǔ)用法
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);
}
}
}
選項(xiàng)
fancyBox Parameter:
| Parameter |
Description |
| e.target |
當(dāng)前點(diǎn)擊的圖片 |
| this.imageList |
所有的圖片列表 |
this.imageList Options:
| Option |
Description |
Type |
| width |
圖片的寬度 |
Number |
| height |
圖片的高度 |
Number |
| url |
圖片的的地址 |
String |
例子
$ cd example
$ npm install
$ npm run dev
注意
需要 postcss-salad 配合
原文： https://xiecg.github.io/2016/...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91282.html
