這篇文章主要為大家展示了“Vue2x如何實(shí)現(xiàn)響應(yīng)式自適應(yīng)輪播組件插件VueSliderShow功能”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Vue2x如何實(shí)現(xiàn)響應(yīng)式自適應(yīng)輪播組件插件VueSliderShow功能”這篇文章吧。

創(chuàng)新互聯(lián)公司不只是一家網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司；我們對(duì)營(yíng)銷、技術(shù)、服務(wù)都有自己獨(dú)特見解，公司采取“創(chuàng)意+綜合+營(yíng)銷”一體化的方式為您提供更專業(yè)的服務(wù)！我們經(jīng)歷的每一步也許不一定是最完美的，但每一步都有值得深思的意義。我們珍視每一份信任，關(guān)注我們的成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站質(zhì)量和服務(wù)品質(zhì)，在得到用戶滿意的同時(shí)，也能得到同行業(yè)的專業(yè)認(rèn)可，能夠?yàn)樾袠I(yè)創(chuàng)新發(fā)展助力。未來將繼續(xù)專注于技術(shù)創(chuàng)新，服務(wù)升級(jí)，滿足企業(yè)一站式全網(wǎng)整合營(yíng)銷推廣需求，讓再小的品牌網(wǎng)站設(shè)計(jì)也能產(chǎn)生價(jià)值！

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

1、支持瀏覽器任意放縮，兼容移動(dòng)端，

2、支持自動(dòng)切換，鼠標(biāo)經(jīng)過停止切換，分頁/任意頁點(diǎn)擊切換，左右切換，

3、支持文字介紹（超過一行自動(dòng)省略）

本文講述的是從開發(fā)一款基于Vue2x的響應(yīng)式自適應(yīng)輪播組件插件的一個(gè)全過程，包含發(fā)布到npm，構(gòu)建自己的npm包，供下載安裝使用的技巧，閱讀本文需要些Vue的語法糖（自定義標(biāo)簽、計(jì)算屬性、父子組件通信等），以及ES6、npm等基礎(chǔ)知識(shí)。先來看下Demo

示例源碼地址

Install

npm i vueslideshow

使用示例

in vue2.x:

（2）在components文件夾里，創(chuàng)建index.vue，sliderShow.vue（因?yàn)槭鞘纠?xiàng)目，規(guī)范上欠佳）讓router文件夾里的index.js啟動(dòng)頁指向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
 }
 ]
})

開發(fā)項(xiàng)目：

（1）index.vue作為父組件,通過es6的方式引用輪播組件，聲明使用輪播sliderShow組件，然后給sliderShow組件傳遞兩個(gè) invTime、slides屬性參數(shù)，分別是輪播切換時(shí)間和數(shù)據(jù)傳遞，我們這里slides數(shù)組，用的是靜態(tài)模擬數(shù)據(jù)，正式環(huán)境是通過請(qǐng)求接口請(qǐng)求的數(shù)據(jù)。

ES6邏輯段代碼解讀，sliderShow.vue通過props方式接受父組件里傳遞過來的數(shù)據(jù)

props: {
 slides: {
 type: Array,
 default: []
 },
 inv: {
 type: Number,
 default: 1000
 }
 },

計(jì)算屬性，前一頁，這里就控制nowIndex,在當(dāng)前數(shù)據(jù)索引里減一，當(dāng)是第一條數(shù)據(jù)的時(shí)候，我們要跳到最后一條，所以當(dāng)?shù)谝粭l數(shù)據(jù)的時(shí)候我們這里判斷它并讓他賦值最后一條數(shù)據(jù)，后一頁和前一頁相似，判斷最后一頁數(shù)據(jù)，跳到第一頁。

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值,從而改變具體數(shù)據(jù)

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

當(dāng)頁面加載完后直接執(zhí)行runInv()方法，然后自動(dòng)切換，setInterval（）/ clearInterval()是js內(nèi)置的定時(shí)器，setInterval()里按照父組件里傳的時(shí)間來調(diào)用函數(shù)的方法，clearInterval()是結(jié)束定時(shí)器的循環(huán)調(diào)用函數(shù)

runInv () {
 this.invId = setInterval(() => {
 this.goto(this.nextIndex)
 }, this.inv)
 },
 clearInv () {
 clearInterval(this.invId)
 }
 },
 mounted () {
 this.runInv();
 }

輪播組件插件就基本上ok了，下面講解一下把這個(gè)輪播組件插件放到npm里，構(gòu)建自己的npm包。

分割線 npm?。。。?！

構(gòu)建npm包：

0、在https://www.npmjs.com創(chuàng)建自己的賬號(hào)

1、新建一個(gè)項(xiàng)目文件夾VueSliderShow，把上面的sliderShow.vue文件復(fù)制文件。打開cmd進(jìn)入到VueSliderShow目錄，然后命令行執(zhí)行：npm init(按流程填寫相關(guān)信息，都可以按照自己的實(shí)際情況寫)，然后會(huì)生成一個(gè)package.json，例如下面是我這個(gè)組件的基本信息

{
 "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、創(chuàng)建一個(gè)index.js

var sliderShow = require('./sliderShow')
module.exports = sliderShow

3、創(chuàng)建一個(gè)README.md，描述一下這個(gè)組件，可以參考一下我寫的

# vueslidershow
> a slider implement by vuejs

>一個(gè)vue的響應(yīng)式自適應(yīng)輪播圖組件

[Demo](https://github.com/HongqingCao/My-Code/tree/master/VueSliderShow)
###### ![實(shí)例效果](https://github.com/HongqingCao/My-Code/blob/master/VueSliderShow/VueSlider.gif)
## Install
``` bash
npm i vueslideshow
```
## 應(yīng)用案例
#### in vue2.x:
```html