1. The online DEMO

va-carousel.xiaoshang.online

Github

2. Start with a mind map

3. Then annotate the above attributes

4. The code layer

4.1 Apart from the attributes that can be received from the parent component, the component itself has the following attributes:

data() {
    return {
      list: [].// A list of images currently displayed
      hover: false.// Whether the mouse hovers over the component
      timer: null.// Automatically toggle setInterval
      itemWidth: ' '.// The width of each element
      isReverse: false // Whether the switch is reversed. When prev is triggered, this property is true}}Copy the code

4.2 Components Before Mounting

  1. Calculates the width of each element, the value of itemWidth
  2. Initialize the list of images to display, that is, list. The data stored here is what will actually be rendered on the page. Every time you switch, you’re actually modifying the data in that list, and the corresponding view is automatically updated, so data-driven views.
beforeMount() {
    this.itemWidth = 100 / this.total + The '%'
    this.list = this.items.slice(0.this.total)
  },

Copy the code

4.3 After the component hangs, check the autoplay property. If it is true, a timer is generated

mounted() {
    if (this.autoplay) {
      this.startTimer()
    }
  },
Copy the code

4.4 The startTimer function is very simple. It triggers a next(backward) switch at regular intervals

// Start timer
startTimer() {
    if (!this.interval || this.interval <= 0) {
        return
    }
    this.timer = setInterval(this.next, this.interval)
}
Copy the code

4.5 the next function

    / / the next
    next() {
      // If the list of images is smaller than the number to display, no scrolling is performed
      if (this.items.length < this.total) {
        return
      }

      // Append a element backwards:
      // Displays the element after the last element in the list
      // If it is already the last element, the first element is used

      let indexOfItems = this.items.findIndex(
        item= > item.id === this.list[this.list.length - 1].id
      )

      if (indexOfItems === this.items.length - 1) {
        // Use the first element
        this.list.push(this.items[0])}else {
        // Use the latter element
        this.list.push(this.items[indexOfItems + 1])}// Remove the first image in the current display
      this.list.shift()
      this.isReverse = false
    },
Copy the code

4.6 also has a corresponding prev function, contrary to the logic of the next function, the code is not shown here

4.7 When an image is clicked, the event selectedItem is released to the parent component and the two parameters item and index are respectively the clicked object and the position of the object in the list

    // Click the image
    selectedItem(item, index) {
      this.$emit('selectedItem', item, index)
    },
Copy the code

4.8 Stop the automatic switchover (if autoPlay is true) when the mouse hover over the component, and continue the switchover when the mouse leaves

    handleMouseEnter() {
      this.hover = true
      this.pauseTimer()
    },

    handleMouseLeave() {
      this.hover = false
      if (this.autoplay) {
        this.startTimer()
      }
    },
Copy the code

4.9 Then the realization of transition effect

If arrow= ‘hover’, the display and hiding of arrow will trigger the hook function. If arrow= ‘hover’, we need to check which element triggers the hook function. This is done by checking the className. Then set different styles for both forward and backward cases

 beforeEnter(el) {
      // Use transitions only for image-item
      let isImageItem = el.className.indexOf('image-item') > - 1
      if (isImageItem) {
        el.style.opacity = 0
        if (this.isReverse) {
          el.style.transform = 'translateX(-100%)'
        } else {
          el.style.transform = 'translateX(100%)'}}}Copy the code

4.10 Velocity is used here, which is a JS library for animation effects. The reason for using this library is that the expected effect EMM has not been achieved after trying n schemes

enter(el, done) {
      // Use transitions only for image-item
      let isImageItem = el.className.indexOf('image-item') > - 1
      if (isImageItem) {
        Velocity(el, { opacity: 1.translateX: '0px' }, { complate: done })
      } else {
        done()
      }
    }
Copy the code

Then there are the corresponding beforeLeave and leave functions, which are not shown here

That’s basically all the JS parts, the overall feeling is that once the implementation logic is clear, the code is fairly easy to implement, and then the familiarity of the framework.

5. Release the NPM package

This is a functional requirement in the business of the company, because failed to find ready-made wheels on the Internet, looking for a similar effect of the leadership is not satisfied, so can only write, do not send out to do not write in vain..

The NPM release process is simply summarized

1. Register

Go to the NPM website to register an account

The package.json file in the package.json folder is an NPM package

3. After the terminal uses the NPM publish package, all files in the project folder will be uploaded to the NPM official website. After the user uses NPM install, the whole folder will be downloaded to the node_modules folder. Is a vue generated using the vue – cli project, component paths SRC/components/VaCarousel vue, so use NPM install va – carousel after installation, Just import it in your project like this (if your project is also generated using vue-CLI, some errors may occur for projects built in other ways) : import VaCarousel from ‘va-carousel/src/components/VaCarousel.vue’

The above