摘要：基于圖像預覽組件更多的手勢操作還是開發中安裝基礎用法選項當前點擊的圖片所有的圖片列表圖片的寬度圖片的高度圖片的的地址例子注意需要配合原文
Overview
基于vue.js圖像預覽組件
更多的手勢操作還是開發中
Demo
vue-fancybox
Github
github
安裝
npm install vue-fancybox --save
import fancyBox from "vue-fancybox";
基礎用法
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
注意
需要 postcss-salad 配合
原文： https://xiecg.github.io/2016/...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91282.html
