從頭開始開發一個vue幻燈片組件

首先新建項目vue init webpack projectName
安裝依賴包npm i這些就不說了
接下來就是構建我們的swiper組件

因為我寫的代碼不規范, 通不過eslint的檢測, 會頻繁報警告, 所以不願意看警告的可以打開\build\webpack.base.conf.js的32行到41行注釋掉
接下來才開始正式的構建組件

我直接把腳手架工具\src\components\HelloWorld.vue下的HelloWorld組件修改為Swiper, 然后把ruter\router的HelloWorld都修改成Swiper

• src\router\index.js

import Vue from 'vue'
import Router from 'vue-router'
import Swiper from '@/components/Swiper'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Swiper',
      component: Swiper
    }
  ]
})

• \src\components\Swiper.vue

<template>
  <div class="hello">
    <p>測試</p>
  </div>
</template>

<script>
export default {
  name: 'Swiper',
  data () {
    return {
    
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

npm run dev之后看到這樣頁面就是創建成功, 可以開始

• swiper的基本樣式(湊合可以看)

<template>
  <div class="hello">
    <div class="swiper">
      <img :src="imgArr[0].src" alt="" >
      // 綁定的屬性一定要用v-bind指令 : 是簡寫
      <div>
        <p>{{imgArr[0].title}}</p>
        <span>&lt;</span>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
        <span>&gt;</span>
      </div>
    </div>
  </div>
</template>

• JS部分

<script>
export default {
  name: 'Swiper',
  props: {
    imgArr: {
	  // 接受一個數組類型imgArr參數, 默認值是空數組
      type: Array,
      default: []
    }
  },
  data () {
    return {
      
    }
  }
}
</script>

• app.vue代碼

<template>
  <div id="app">
    <Swiper :imgArr="imgArr"></Swiper>
    // 把imgArr傳遞給swipr組件
  </div>
</template>

• js部分

<script>
import Swiper from './components/Swiper.vue'
// 引用swiper組件
export default {
  name: 'app',
  components : {
    Swiper
    // 聲明使用Swiper組件
  },
  data() {
    return {
      imgArr: [
        {
          src:require("./images/1.jpg"), // js中引用圖片路徑一定要用require關鍵字, html和css部分不需要
          title: '1.jpg'
        },
        {
          src:require("./images/2.jpg"),
          title: '2.jpg'
        },
        {
          src:require("./images/3.jpg"),
          title: '3.jpg'
        },
        {
          src:require("./images/4.jpg"),
          title: '4.jpg'
        },
      ]
    }
  }
}
</script>

現在的頁面應該是
接下來我們該去寫切換邏輯部分

• 首先是把圖片標號改成圖片數組的長度, 不能寫死
  我們修改swiper.vue內的代碼
  

• 接下來是點擊編號跳轉到相應的圖片, 通過switchImg函數進行跳轉
  函數就是修改當前組件的currentNum, 達到顯示哪一張圖片

<template>
  <div class="hello">
    <div class="swiper">
      <img :src="imgArr[currentNum].src" alt="" >
      
      <div>
        <p>{{imgArr[currentNum].title}}</p>
        <span>&lt;</span>
        <ul>
          <li v-for="(item, index) in imgArr">
            <a @click="switchImg(index)" href="javascripe:;">{{ index + 1 }}</a>
          </li>
        </ul>
        <span>&gt;</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Swiper',
  props: {
    imgArr: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      currentNum:0
    }
  },
  methods: {
    switchImg(index) {
      this.currentNum = index;
    }
  }
}
</script>

• 接下來就是左右切換按鈕跳轉, 我們使用vue的計算屬性特性

computed: {
    nextNum() {
      if (this.currentNum === 0) {
        return this.imgArr.length-1
      } else {
        return this.currentNum - 1
      }
    },
    preNum() {
      if (this.currentNum  === this.imgArr.length-1) {
        return 0
      } else {
        return this.currentNum + 1
      }
    }
  }

只需上一頁下一頁的按鈕添加同樣的事件, 把以上兩個計算屬性傳入函數即可

 <span @click="switchImg(nextNum)"><a href="javascripe:;">&lt;</a></span>
        <ul>
          <li @click="switchImg(index)" v-for="(item, index) in imgArr">
            <a href="javascripe:;">{{ index + 1 }}</a>
          </li>
        </ul>
        <span @click="switchImg(preNum)"><a href="javascripe:;">&gt;</a></span>

• 接下來就是加入定時切換的功能, 我們只需要添加一個定時器即可, 再組件構建完畢就開始執行

 interval() {
      this.inv = setInterval(() => {
        this.switchImg(this.preNum);
      },this.time)
    }

再添加一個傳入的參數, 默認值是1000(1秒)

    
     time: {
      type: Number,
      default: 1000
    }
    

再組件初始化完畢后開始執行

  created() {
    this.interval();
  }

• 再一個功能就是, 再移入的時候清空計數器, 移除之后再重啟計時器

	// 清除定時器
	clearTime() {
      clearInterval(this.inv)
    },
    // 重啟定時器
    setTime() {
      this.interval();  
    }

再最外層的div加上兩個出發函數

<div class="hello" @mouseover="clearTime" @mouseout="setTime">

• 最后一個功能就是, 是否自動播放
  加入一個可傳入參數autoPlay

autoPlay: {
      type: Boolean,
      default: true
    }

然后處理一下剛才定義好的重啟定時器和初始化完畢鈎子函數

setTime() {
      if(this.autoPlay) {
        this.interval();
      } 
    }
     created() {
    if(this.autoPlay) {
      this.interval();
    }
  }

此時一個簡單的swiper組件就構建完畢, 可傳入一個圖片地址數組, 一個自動播放事件, 是否自動播放三個參數
項目地址