摘要：在線首先是一張思維導圖然后是以上屬性的標注說明代碼層除去可從父組件接收的屬性，組件自身有以下屬性當前顯示的圖片列表鼠標是否懸浮在組件上自動切換的每項元素的寬度是否是反向切換，觸發時，該屬性為組件掛載之前計算每項元素的寬度，即的值初始化顯示

http://va-carousel.xiaoshang.online

Github

4.1 除去可從父組件接收的屬性，組件自身有以下屬性：

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

4.2 組件掛載之前

計算每項元素的寬度，即itemWidth的值

初始化顯示的圖片列表，即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部分，整體感受就是，一旦實現邏輯搞清楚，代碼實現起來還是挺容易的，然后就是框架的熟悉程度。

這本是公司業務中的一個功能需求，因為沒能在網上找到現成的輪子，找個差不多的效果領導不滿意，所以只能自己寫了，做都做了不發出來豈不是白寫了. . .

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"

以上