一個基於Vue的圖片輪播組件的實現

1. 在線DEMO

va-carousel.xiaoshang.online

Github

2. 首先是一張思惟導圖

3. 而後是以上屬性的標註說明

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'

以上