一個基於vue的圖片輪播組件的完成

1. 在線DEMO

http://va-carousel.xiaoshang.online

Github

2. 首先是一張頭腦導圖

《一個基於vue的圖片輪播組件的完成》

3. 然後是以上屬性的標註申明

《一個基於vue的圖片輪播組件的完成》

4. 代碼層

4.1 撤除可從父組件吸收的屬性,組件本身有以下屬性:

data() {
    return {
      list: [],     // 當前顯現的圖片列表
      hover: false, // 鼠標是不是懸浮在組件上
      timer: null,  // 自動切換的 setInterval
      itemWidth: '',// 每項元素的寬度
      isReverse: false // 是不是是反向切換,觸發prev時,該屬性為true
    }
  }

4.2 組件掛載之前

  1. 盤算每項元素的寬度,即itemWidth的值
  2. 初始化顯現的圖片列表,即list。這裏存儲的數據才是真正會被在頁面上襯着的。每次切換,實際上就是修正該list中的數據,對應的視圖會自動更新,數據驅動視圖嘛。
beforeMount() {
    this.itemWidth = 100 / this.total + '%'
    this.list = this.items.slice(0, this.total)
  },

4.3 組件掛在後,搜檢autoplay屬性,若該屬性為true,則發生一個計時器

mounted() {
    if (this.autoplay) {
      this.startTimer()
    }
  },

4.4 startTimer函數很簡樸,就是距離肯定時候觸發一次next(向後)切換

// 最先計時器
startTimer() {
    if (!this.interval || this.interval <= 0) {
        return
    }
    this.timer = setInterval(this.next, this.interval)
}

4.5 next函數

    // 下一張
    next() {
      // 假如圖片列表小於須要顯現的數目,則不舉行轉動
      if (this.items.length < this.total) {
        return
      }

      // 向後追加一個元素,該元素為:
      // 顯現列表中末了一個元素在原數組中的后一個元素
      // 假如已經是末了一個元素,則運用第一個元素

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

      if (indexOfItems === this.items.length - 1) {
        // 運用第一個元素
        this.list.push(this.items[0])
      } else {
        // 運用后一個元素
        this.list.push(this.items[indexOfItems + 1])
      }
      // 移除當前顯現圖片中的第一個
      this.list.shift()
      this.isReverse = false
    },

4.6 對應的另有一個prev函數,與next函數邏輯相反,這裏就不展現代碼了

4.7 點擊圖片時,向父組件開釋事宜selectedItem,通報兩個參數 item 和 index 分別為當前點擊的對象,和該對象在list中的位置

    // 點擊圖片
    selectedItem(item, index) {
      this.$emit('selectedItem', item, index)
    },

4.8 鼠標懸浮在組件上時,住手自動切換(若autoplay為ture), 鼠標脫離時,繼承切換

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

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

4.9 然後是過渡結果的完成

由於arrow元素也在transition-group中,所以當arrow=‘hover’時,arrow的顯現、隱蔽也會觸發鈎子函數,然則我們的鈎子函數是針對image-item寫的,所以須要在函數中檢測是哪一個元素觸發的,這裏經由過程搜檢className舉行推斷。
然後針對向前、向後兩種狀況設置差別的款式

 beforeEnter(el) {
      // 只對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%)'
        }
      }
    }

4.10 這裏運用了Velocity,這是一個完成動畫結果的js庫,之所以運用這個庫是由於試了n種計劃都沒能完成預期結果emm

enter(el, done) {
      // 只對image-item運用過渡
      let isImageItem = el.className.indexOf('image-item') > -1
      if (isImageItem) {
        Velocity(el, { opacity: 1, translateX: '0px' }, { complate: done })
      } else {
        done()
      }
    }

4.11 然後是對應的beforeLeave、leave函數,這裏就不展現了

以上基礎就是一切js部份,團體感覺就是,一旦完成邏輯搞清楚,代碼完成起來照樣挺輕易的,然後就是框架的熟習水平。

5. npm包宣布

這本是公司營業中的一個功用需求,由於沒能在網上找到現成的輪子,找個差不多的結果指導不滿意,所以只能本身寫了,做都做了不發出來豈不是白寫了. . .

npm宣布流程簡樸歸納綜合就是

1.註冊

去npm官網註冊個賬號

2.天生npm包 文件夾中有package.json文件就是一個npm包

3.在終端運用npm publish宣布包,勝利以後,該項目文件夾下一切文件都邑上傳至npm官網,當用戶運用npm install裝置后,就會將全部文件夾下載至node_modules文件夾中,關於這個項目,就是一個運用vue-cli天生的vue項目,組件途徑src/components/VaCarousel.vue,所以運用npm install va-carousel裝置以後,只須要在項目中像如許導入即可運用(條件是你的項目也是運用vue-cli天生的,關於其他體式格局豎立的項目可能會湧現一些毛病):import VaCarousel from 'va-carousel/src/components/VaCarousel.vue'

以上

    原文作者:zhangxiaoshang
    原文地址: https://segmentfault.com/a/1190000014660828
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞