這篇文章主要講解了“Vue2x怎么實現響應式自適應輪播組件插件VueSliderShow功能”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Vue2x怎么實現響應式自適應輪播組件插件VueSliderShow功能”吧！

創新互聯公司客戶idc服務中心，提供托管服務器、成都服務器、成都主機托管、成都雙線服務器等業務的一站式服務。通過各地的服務中心，我們向成都用戶提供優質廉價的產品以及開放、透明、穩定、高性價比的服務，資深網絡工程師在機房提供7*24小時標準級技術保障。

VueSliderShow故名思意，vue的輪播圖組件插件，該插件：

1、支持瀏覽器任意放縮，兼容移動端，

2、支持自動切換，鼠標經過停止切換，分頁/任意頁點擊切換，左右切換，

3、支持文字介紹（超過一行自動省略）

使用示例

in vue2.x:

（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數組，用的是靜態模擬數據，正式環境是通過請求接口請求的數據。

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