Vue2x怎么實(shí)現(xiàn)響應(yīng)式自適應(yīng)輪播組件插件VueSliderShow功能

這篇文章主要講解了“Vue2x怎么實(shí)現(xiàn)響應(yīng)式自適應(yīng)輪播組件插件VueSliderShow功能”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“Vue2x怎么實(shí)現(xiàn)響應(yīng)式自適應(yīng)輪播組件插件VueSliderShow功能”吧！

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

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

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

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

使用示例

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: '測(cè)試測(cè)試測(cè)試1',
 href: 'detail/analysis'
 }
 ]
 }
 }
}

參數(shù)說(shuō)明：

1.invTime：控制輪播速度

2.slides：具體的輪播數(shù)據(jù)數(shù)組形式，包含圖片，文字，鏈接三個(gè)參數(shù)

3.注意：由于是響應(yīng)式自適應(yīng)所以推的圖片必須高度一致

分割線，下面開始上路，步入主題??！

寫在前面：vue官網(wǎng)提供了開發(fā)插件的介紹，感興趣的老鐵可以先移步官網(wǎng)開發(fā)插件，

創(chuàng)建項(xiàng)目

0、想必各位老鐵都是有vue和前端經(jīng)驗(yàn)的了，這些基礎(chǔ)項(xiàng)目環(huán)境和搭建項(xiàng)目，改造初始化的vue項(xiàng)目都是睜眼閉眼的事情了，所以這里都一筆帶過(guò)：

1、vue環(huán)境配備，(node、vue-cli）

2、初始化項(xiàng)目，Vue init webpack vueslideshow。安裝依賴npm install(安裝的時(shí)候把vue-router默認(rèn)一起安裝上去)

改造初始化項(xiàng)目：

（0）改造前分析一下我們的需求：一個(gè)響應(yīng)式自適應(yīng)輪播組件，之所以是組件，是我們希望可以公用的代碼段，支持可動(dòng)態(tài)配置，輪播組件無(wú)非就說(shuō)圖片文字，自動(dòng)切換，可選擇切換。

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

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

<script>
export default {
 name: 'App'
}
</script>

（2）在components文件夾里，創(chuàng)建index.vue，sliderShow.vue（因?yàn)槭鞘纠?xiàng)目，規(guī)范上欠佳）讓router文件夾里的index.js啟動(dòng)頁(yè)指向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作為父組件,通過(guò)es6的方式引用輪播組件，聲明使用輪播sliderShow組件，然后給sliderShow組件傳遞兩個(gè) invTime、slides屬性參數(shù)，分別是輪播切換時(shí)間和數(shù)據(jù)傳遞，我們這里slides數(shù)組，用的是靜態(tài)模擬數(shù)據(jù)，正式環(huán)境是通過(guò)請(qǐng)求接口請(qǐng)求的數(shù)據(jù)。

<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: '測(cè)試測(cè)試測(cè)試1',
 href: 'detail/analysis'
 },
 {
 src: require('../assets/2.jpg'),
 title: '測(cè)試測(cè)試測(cè)試2',
 href: 'detail/count'
 }
 ]
 }
 }
}

（2）sliderShow.vue

模板段代碼讀解（布局這里就略講了），最外層分別有兩個(gè)鼠標(biāo)經(jīng)過(guò)clearInv事件，主要是希望在鼠標(biāo)經(jīng)過(guò)焦點(diǎn)圖的時(shí)候不進(jìn)行切換方便點(diǎn)圖片跳轉(zhuǎn)，鼠標(biāo)移出執(zhí)行runInv事件繼續(xù)自動(dòng)切換，transition分別去控制兩張圖的出現(xiàn)和消失，左右切換，和點(diǎn)擊具體的分頁(yè)切換這里用通用的一個(gè)goto()方法轉(zhuǎn)遞不同值，去判斷具體要展示的數(shù)據(jù)頁(yè)，這個(gè)值的計(jì)算可以通過(guò)vue里的計(jì)算屬性。

<template>
 <div class="slide-show" @mouseover="clearInv" @mouseout="runInv">
 <div class="slide-img">
 <a :href="slides[nowIndex].href" rel="external nofollow" >
 <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通過(guò)props方式接受父組件里傳遞過(guò)來(lái)的數(shù)據(jù)

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

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

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
 }
 }
 },

通過(guò)Index值,從而改變具體數(shù)據(jù)

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

當(dāng)頁(yè)面加載完后直接執(zhí)行runInv()方法，然后自動(dòng)切換，setInterval（）/ clearInterval()是js內(nèi)置的定時(shí)器，setInterval()里按照父組件里傳的時(shí)間來(lái)調(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
<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: '測(cè)試測(cè)試測(cè)試1',
 href: 'detail/analysis'
 }
 ]
 }
 }
}
```
<br>
### 參數(shù)說(shuō)明：
 1.invTime,控制輪播速度 
 2.slides,具體的輪播數(shù)據(jù)數(shù)組形式，包含圖片，文字，鏈接三個(gè)參數(shù) 
 3.由于是響應(yīng)式自適應(yīng)所以推的圖片必須高度一致，更友好
## License
[MIT](LICENSE)

4、命令行npm login，登錄自己的賬號(hào)和密碼

5、發(fā)布到npm執(zhí)行命令行： npm publish，成功后你會(huì)發(fā)現(xiàn)你的npm里已經(jīng)有一個(gè)包了

你可以點(diǎn)擊進(jìn)入詳情看看

6、嘗試下載安裝在自己項(xiàng)目里：npm i vueslideshow，安裝完后在node_modules就可以看到自己的插件啦

7、應(yīng)用就如一開始的插件介紹一樣，可以往上看

感謝各位的閱讀，以上就是“Vue2x怎么實(shí)現(xiàn)響應(yīng)式自適應(yīng)輪播組件插件VueSliderShow功能”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)Vue2x怎么實(shí)現(xiàn)響應(yīng)式自適應(yīng)輪播組件插件VueSliderShow功能這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！