Demand background

Achieve several large screen pages of 3D rotation of the target effect;

The UI framework adopted by the project is Element-UI. The carousel effect of the frame supports similar card-based effect, which is close, but fails to achieve the target effect:So instead of the UI framework’s carousel-3D component, we chose a third-party carousel-3D component to achieve the effect.

Carousel – 3 d plugin

The installation

`npm install -S vue-carousel-3d`
Copy the code

Introduced the global

import Vue from 'vue';
import Carousel3d from 'vue-carousel-3d';
Vue.use(Carousel3d);
----main.js
Copy the code

Local introduction

import { Carousel3d, Slide } from 'vue-carousel-3d';

export default {
  ...
  components: {
    Carousel3d,
    Slide
  }
  ...
};
----xxx.vue
Copy the code

HTML template

<carousel-3d>
    <slide :index="0">
      Slide 1 Content
    </slide>
    <slide :index="1">
      Slide 2 Content
    </slide>
</carousel-3d>
Copy the code

carousel-3d api

Due to the limited documentation of Carousel-3D plug-in, there is no detailed API interface description, so I stripped the API provided by the source code and combed it as follows:

The props attribute and callback functions are:

  1. Count — display the length of the paging page, that is, the length of the slide to control the paging. If not, the length of the slide is used to dynamically adjust the paging page length
 count: {
      type: [Number, String],
      default: 0
    },
Copy the code

2. Display — The thumbnail of the cast list shows several pages

display: {
      type: [Number, String],
      default: 5
    },
Copy the code

3. Loop — Whether to display in a loop

   loop: {
      type: Boolean,
      default: true
    },
Copy the code

4. AnimationSpeed — Polling animation execution time, the longer the animation is, the slower it is

animationSpeed: {
      type: [Number, String],
      default: 500
    }
Copy the code
  1. Width, height — The width and height of the main page of rotation
    width: {
      type: [Number, String],
      default: 360
    },
    height: {
      type: [Number, String],
      default: 270
    },
Copy the code

6. Border — Border of the child page

border: {
      type: [Number, String],
      default: 1
    },
Copy the code

7. StartIndex — What page do you start rotation

startIndex: {
      type: [Number, String],
      default: 0
    },
Copy the code

Disable3d — Whether to enable 3D effect

disable3d: {
      type: Boolean,
      default: false
    },
Copy the code

9. Autoplay — Whether to enable automatic rotation

autoplay: {
            type: Boolean,
            default: false
        },
Copy the code

10. OnLastSlide () — Callback function, the hook function that fires when the last subpage is rotated

    onLastSlide: {
      type: Function,
      default: noop
    },
Copy the code

11. OnSlideChange () — A callback function that is triggered every time the page switches

onSlideChange: {
      type: Function,
      default: noop
    },

Copy the code

12. OnMainSlideClick () — a callback function that is triggered when the middle page of the wheel is clicked

    onMainSlideClick: {
      type: Function,
      default: noop
    },
Copy the code

Mouse hover effect implementation

The above API does not provide a mouse slide to pause the rotation, the mouse left to continue the rotation API, need to implement their own;

Vue supports mouse in, mouse out, and mouse over events. Add the following three events

@mouseenter="stopAutoplay" 
@mousemove="stopAutoplay" 
@mouseout="startAutoplay"
Copy the code

The attribute for pausing and starting auto rotation is autoplay, which is implemented in conjunction with mouse events

isAutoplay:true

stopAutoplay() {
      this.isAutoplay = false
    },
    startAutoplay() {
      this.isAutoplay = true
    },
Copy the code

The resources

Vue carousel – 3 d (github.com/Wlada/vue-c…).