vue-swipe-3d
基于Vue的图片3d轮播
安装
$ npm install vue-swipe-3d -S
使用
在 main.js
文件中引入插件并注册
# main.jsimport 'vue-swipe-3d/src/swipe-3d.css'import swipe3d from 'vue-swipe-3d'Vue.use(swipe3d)
在项目中使用 vue-swipe-3d
<template> <div> <swipe-3d :data="data" @click="handleClick" @change="handleChange"/> </div></template> <script>export default { data () { return { data: [ 'http://dev-public-bucket.oss-cn-shanghai.aliyuncs.com/webapp/temp/WechatIMG1.jpeg', 'http://dev-public-bucket.oss-cn-shanghai.aliyuncs.com/webapp/temp/WechatIMG2.jpeg', 'http://dev-public-bucket.oss-cn-shanghai.aliyuncs.com/webapp/temp/WechatIMG3.jpeg' ] } }, methods:{ //点击当前显示时触发 handleClick(activeItem){ console.log(activeItem) }, //当前显示的图片切换时触发 handleChange(activeItem){ console.log(activeItem) }, }}</script>
特点
- 简单易用 3D轮播效果
- 提供以
npm
的形式安装提供全局组件
选项
暂时支持以下事件
click
:点击当前显示的图片时触发change
:当图片切换时触发