Nurturing Pluto's Martians

    vue-swipe-3d

    0.0.1 • Public • Published

    vue-swipe-3d

    基于Vue的图片3d轮播

    安装

    $ npm install vue-swipe-3d -S

    使用

    main.js 文件中引入插件并注册

    # main.js
    import '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>

    特点

    1. 简单易用 3D轮播效果
    2. 提供以 npm 的形式安装提供全局组件

    选项

    暂时支持以下事件

    1. click:点击当前显示的图片时触发
    2. change:当图片切换时触发

    Install

    npm i vue-swipe-3d

    DownloadsWeekly Downloads

    2

    Version

    0.0.1

    License

    ISC

    Unpacked Size

    8.11 kB

    Total Files

    5

    Last publish

    Collaborators

    • umihome