從開發到釋出一款基於Vue2x的響應式自適應輪播元件外掛VueSliderShow

codercao發表於2018-05-16
Vue元件IDE

    VueSliderShow故名思意，vue的輪播圖元件外掛，該外掛：1、支援瀏覽器任意放縮，相容移動端，2、支援自動切換，滑鼠經過停止切換，分頁/任意頁點選切換，左右切換，3、支援文字介紹（超過一行自動省略）

本文講述的是從開發一款基於Vue2x的響應式自適應輪播元件外掛的一個全過程，包含釋出到npm，構建自己的npm包，供下載安裝使用的技巧，閱讀本文需要些Vue的語法糖（自定義標籤、計算屬性、父子元件通訊等），以及ES6、npm等基礎知識。先來看下Demo

從開發到釋出一款基於Vue2x的響應式自適應輪播元件外掛VueSliderShow


示例原始碼地址


Install

npm i vueslideshow複製程式碼


使用示例

in vue2.x:

<template>
 //輪播元件的位置
   <div>
     <slider-show :slides="slides" :inv="invTime"></slider-show>
   </div>
</template>

<script>
import sliderShow from 'vueslidershow'
export default {
  components: {
      sliderShow
  },
  data () {
    return {
      invTime: 2000,
      slides: [
        {
          src: require('../assets/1.jpg'),
          title: '測試測試測試1',
          href: 'detail/analysis'
       }
    ]
   }
 }
}複製程式碼


引數說明：

1.invTime：控制輪播速度

2.slides：具體的輪播資料陣列形式，包含圖片，文字，連結三個引數

3.注意：由於是響應式自適應所以推的圖片必須高度一致




                                           分割線，下面開始上路                                                                




寫在前面：vue官網提供了開發外掛的介紹，感興趣的老鐵可以先移步官網開發外掛，


建立專案

0、想必各位老鐵都是有vue和前端經驗的了，這些基礎專案環境和搭建專案，改造初始化的vue專案都是睜眼閉眼的事情了，所以這裡都一筆帶過：

1、vue環境配備，(node、vue-cli）

2、初始化專案，Vue init webpack vueslideshow。安裝依賴npm install(安裝的時候把vue-router預設一起安裝上去)


改造初始化專案：

（0）改造前分析一下我們的需求：一個響應式自適應輪播元件，之所以是元件，是我們希望可以公用的程式碼段，支援可動態配置，輪播元件無非就說圖片文字，自動切換，可選擇切換。

（1）app.vue裡清空到如下就好

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
複製程式碼

（2）在components資料夾裡，建立index.vue，sliderShow.vue（因為是示例專案，規範上欠佳）讓router資料夾裡的index.js啟動頁指向index.vue

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/index'

Vue.use(Router)

export default new Router({
  routes: [
    {
	path: '/',
	component: Index
    }
  ]
})
複製程式碼


開發專案：

（1）index.vue作為父元件,通過es6的方式引用輪播元件，宣告使用輪播sliderShow元件，然後給sliderShow元件傳遞兩個 invTime、slides屬性引數，分別是輪播切換時間和資料傳遞，我們這裡slides陣列，用的是靜態模擬資料，正式環境是通過請求介面請求的資料。

<template>
   <div>
     <slider-show :slides="slides" :inv="invTime"></slider-show>
   </div>
</template>

<script>
import sliderShow from './sliderShow'
export default {
components: {
    sliderShow
},
  data () {
    return {
      invTime: 2000,
      slides: [
          {
          src: require('../assets/1.jpg'),
          title: '測試測試測試1',
          href: 'detail/analysis'
        },
        {
          src: require('../assets/2.jpg'),
          title: '測試測試測試2',
          href: 'detail/count'
        }
     ]
   }
 }
}複製程式碼

（2）sliderShow.vue

模板段程式碼讀解（佈局這裡就略講了），最外層分別有兩個滑鼠經過clearInv事件，主要是希望在滑鼠經過焦點圖的時候不進行切換方便點圖片跳轉，滑鼠移出執行runInv事件繼續自動切換，transition分別去控制兩張圖的出現和消失，左右切換，和點選具體的分頁切換這裡用通用的一個goto()方法轉遞不同值，去判斷具體要展示的資料頁，這個值的計算可以通過vue裡的計算屬性。

<template>
  <div class="slide-show" @mouseover="clearInv" @mouseout="runInv">
    <div class="slide-img">
      <a :href="slides[nowIndex].href">
        <transition name="slide-fade">
          <img v-if="isShow" :src="slides[nowIndex].src">
        </transition>
        <transition name="slide-fade-old">
          <img v-if="isShows" :src="slides[nowIndex].src">
        </transition>
      </a>
    </div>
    <div class="slide-title"><a>{{ slides[nowIndex].title }}</a></div>
    <ul class="slide-pages">
      <li v-for="(item, index) in slides"
      @click="goto(index)"
      >
        <a :class="{on: index === nowIndex}"></a>
      </li>
   </ul>
   <a @click="goto(prevIndex)" class="callbacks-nav">＜</a>
   <a @click="goto(nextIndex)" class="callbacks-nav next">＞</a>
  </div>
</template>
<script>
export default {
  props: {
    slides: {
      type: Array,
      default: []
    },
    inv: {
      type: Number,
      default: 1000
    }
  },
  data () {
    return {
      nowIndex: 0,
      isShow: true,
      isShows:false
    }
  },
  computed: {
    prevIndex () {
      if (this.nowIndex === 0) {
        return this.slides.length - 1
      }
      else {
        return this.nowIndex - 1
      } 
    },
    nextIndex () {
      if (this.nowIndex === this.slides.length - 1) {
        return 0
      }
      else {
        return this.nowIndex + 1
      }
    }
  },
  methods: {
    goto (index) {
      this.isShow = false
      setTimeout(() => {
        this.nowIndex = index
        this.isShows = true
      }, 10)

    },
    runInv () {
      this.invId = setInterval(() => {
        this.goto(this.nextIndex)
      }, this.inv)
    },
    clearInv () {
      clearInterval(this.invId)
    }
  },
  mounted () {
    this.runInv();
  }
}
</script>複製程式碼


ES6邏輯段程式碼解讀，sliderShow.vue通過props方式接受父元件裡傳遞過來的資料

 props: {
    slides: {
      type: Array,
      default: []
    },
    inv: {
      type: Number,
      default: 1000
    }
  },
複製程式碼

計算屬性，前一頁，這裡就控制nowIndex,在當前資料索引裡減一，當是第一條資料的時候，我們要跳到最後一條，所以當第一條資料的時候我們這裡判斷它並讓他賦值最後一條資料，後一頁和前一頁相似，判斷最後一頁資料，跳到第一頁。

  computed: {
    prevIndex () {
      if (this.nowIndex === 0) {
        return this.slides.length - 1
      }
      else {
        return this.nowIndex - 1
      } 
    },
    nextIndex () {
      if (this.nowIndex === this.slides.length - 1) {
        return 0
      }
      else {
        return this.nowIndex + 1
      }
    }
  },複製程式碼

通過Index值,從而改變具體資料

 goto (index) {
      this.isShow = false
      setTimeout(() => {
        this.nowIndex = index
        this.isShows = true
      }, 10)

    },複製程式碼

當頁面載入完後直接執行runInv()方法，然後自動切換，setInterval（）/ clearInterval()是js內建的定時器，setInterval()裡按照父元件裡傳的時間來呼叫函式的方法，clearInterval()是結束定時器的迴圈呼叫函式

    runInv () {
      this.invId = setInterval(() => {
        this.goto(this.nextIndex)
      }, this.inv)
    },
    clearInv () {
      clearInterval(this.invId)
    }
  },
  mounted () {
    this.runInv();
  }複製程式碼



輪播元件外掛就基本上ok了，下面講解一下把這個輪播元件外掛放到npm裡，構建自己的npm包。


                                                          分割線 npm                                                                


構建npm包：

0、在https://www.npmjs.com建立自己的賬號

1、新建一個專案資料夾VueSliderShow，把上面的sliderShow.vue檔案複製檔案。開啟cmd進入到VueSliderShow目錄，然後命令列執行：npm init(按流程填寫相關資訊，都可以按照自己的實際情況寫)，然後會生成一個package.json，例如下面是我這個元件的基本資訊

{
  "name": "vueslideshow",
  "version": "1.0.2",
  "description": "a slider implement by vuejs",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/HongqingCao/My-Code/tree/master/VueSliderShow"
  },
  "author": "HongqingCao",
  "license": "ISC"
}
複製程式碼

2、建立一個index.js

var sliderShow = require('./sliderShow')
module.exports = sliderShow
複製程式碼

3、建立一個README.md，描述一下這個元件，可以參考一下我寫的

# vueslidershow

> a slider implement by vuejs
>一個vue的響應式自適應輪播圖元件

[Demo](https://github.com/HongqingCao/My-Code/tree/master/VueSliderShow)

###### ![例項效果](https://github.com/HongqingCao/My-Code/blob/master/VueSliderShow/VueSlider.gif)

## Install
``` bash
npm i vueslideshow
```


## 應用案例

#### in vue2.x:

```html
<template>
   <div>
     <slider-show :slides="slides" :inv="invTime"></slider-show>
   </div>
</template>

<script>
import sliderShow from './sliderShow'
export default {
  components: {
      sliderShow
  },
  data () {
    return {
      invTime: 2000,
      slides: [
        {
          src: require('../assets/1.jpg'),
          title: '測試測試測試1',
          href: 'detail/analysis'
       }
    ]
   }
 }
}
```
<br>

### 引數說明：

 1.invTime,控制輪播速度
 
 2.slides,具體的輪播資料陣列形式，包含圖片，文字，連結三個引數
 
 3.由於是響應式自適應所以推的圖片必須高度一致，更友好

## License

[MIT](LICENSE)
複製程式碼


4、命令列npm login，登入自己的賬號和密碼

從開發到釋出一款基於Vue2x的響應式自適應輪播元件外掛VueSliderShow

5、釋出到npm執行命令列： npm publish，成功後你會發現你的npm裡已經有一個包了

從開發到釋出一款基於Vue2x的響應式自適應輪播元件外掛VueSliderShow

你可以點選進入詳情看看

從開發到釋出一款基於Vue2x的響應式自適應輪播元件外掛VueSliderShow

6、嘗試下載安裝在自己專案裡：npm i vueslideshow，安裝完後在node_modules就可以看到自己的外掛啦

從開發到釋出一款基於Vue2x的響應式自適應輪播元件外掛VueSliderShow


7、應用就如一開始的外掛介紹一樣，可以往上看


最後總結

從開發到釋出一款基於Vue2x的響應式自適應輪播元件外掛VueSliderShow，到這裡就已經開發完畢，當然裡面肯定也有一定的bug在裡面，我用了transition去包裹兩個img其實目前是沒用到這個過渡屬性，後期可以各位老鐵自己補一些絢麗的切換動畫，最後再次附上github示例原始碼(碼字不易，歡迎★star)


相關文章