摘要：基于图像预览组件更多的手势操作还是开发中安装基础用法选项当前点击的图片所有的图片列表图片的宽度图片的高度图片的的地址例子注意需要配合原文
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/...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/91282.html
