從開發到發佈一款基於Vue2x的響應式自適應輪播組件插件VueSliderShow

時間 2019-11-06

標籤開發發佈一款基於 vue2x vue 響應自適應組件插件 vueslidershow 欄目 CSS 简体版

原文原文鏈接

VueSliderShow故名思意，vue的輪播圖組件插件，該插件：一、支持瀏覽器任意放縮，兼容移動端，二、支持自動切換，鼠標通過中止切換，分頁/任意頁點擊切換，左右切換，三、支持文字介紹（超過一行自動省略）html

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

示例源碼地址vue

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：控制輪播速度node

2.slides：具體的輪播數據數組形式，包含圖片，文字，連接三個參數webpack

3.注意：因爲是響應式自適應因此推的圖片必須高度一致git

分割線，下面開始上路 es6

寫在前面：vue官網提供了開發插件的介紹，感興趣的老鐵能夠先移步官網開發插件，github

建立項目

0、想必各位老鐵都是有vue和前端經驗的了，這些基礎項目環境和搭建項目，改造初始化的vue項目都是睜眼閉眼的事情了，因此這裏都一筆帶過：web

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

二、初始化項目，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建立本身的帳號

一、新建一個項目文件夾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"
}
複製代碼

二、建立一個index.js

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

三、建立一個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)
複製代碼

四、命令行npm login，登陸本身的帳號和密碼

五、發佈到npm執行命令行： npm publish，成功後你會發現你的npm裏已經有一個包了

你能夠點擊進入詳情看看

六、嘗試下載安裝在本身項目裏：npm i vueslideshow，安裝完後在node_modules就能夠看到本身的插件啦

七、應用就如一開始的插件介紹同樣，能夠往上看

最後總結

從開發到發佈一款基於Vue2x的響應式自適應輪播組件插件VueSliderShow，到這裏就已經開發完畢，固然裏面確定也有必定的bug在裏面，我用了transition去包裹兩個img其實目前是沒用到這個過渡屬性，後期能夠各位老鐵本身補一些絢麗的切換動畫，最後再次附上github示例源碼(碼字不易，歡迎★star)