从头开始开发一个vue幻灯片组件

首先新建项目

vue init webpack projectName

安装依赖包

npm i

这些就不说了

接下来就是构建我们的swiper组件

因为我写的代码不规范, 通不过eslint的检测, 会频繁报警告, 所以不愿意看警告的可以打开\build\webpack.base.conf.js的32行到41行注释掉


接下来才开始正式的构建组件

我直接把脚手架工具

\src\components\HelloWorld.vue

下的HelloWorld组件修改为Swiper, 然后把ruter\router的HelloWorld都修改成Swiper

src\router\index.js

import Vue from 'vue'
import Router from 'vue-router'
import Swiper from '@/components/Swiper'

Vue.use(Router)

export default new Router({
routes: [
{
path: '/',
name: 'Swiper',
component: Swiper
}
]
})

\src\components\Swiper.vue

<template>
<div class="hello">
<p>测试</p>
</div>
</template>

<script>
export default {
name: 'Swiper',
data () {
return {

}
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

npm run dev

之后看到这样页面就是创建成功, 可以开始

swiper的基本样式(凑合可以看)

<template>
<div class="hello">
<div class="swiper">
<img :src="imgArr[0].src" alt="" >
// 绑定的属性一定要用v-bind指令 : 是简写
<div>
<p>{{imgArr[0].title}}</p>
<span><</span>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<span>></span>
</div>
</div>
</div>
</template>

JS部分

<script>
export default {
name: 'Swiper',
props: {
imgArr: {
// 接受一个数组类型imgArr参数, 默认值是空数组
type: Array,
default: []
}
},
data () {
return {

}
}
}
</script>

app.vue代码

<template>
<div id="app">
<Swiper :imgArr="imgArr"></Swiper>
// 把imgArr传递给swipr组件
</div>
</template>

js部分

<script>
import Swiper from './components/Swiper.vue'
// 引用swiper组件
export default {
name: 'app',
components : {
Swiper
// 声明使用Swiper组件
},
data() {
return {
imgArr: [
{
src:require("./images/1.jpg"), // js中引用图片路径一定要用require关键字, html和css部分不需要
title: '1.jpg'
},
{
src:require("./images/2.jpg"),
title: '2.jpg'
},
{
src:require("./images/3.jpg"),
title: '3.jpg'
},
{
src:require("./images/4.jpg"),
title: '4.jpg'
},
]
}
}
}
</script>

现在的页面应该是


接下来我们该去写切换逻辑部分

首先是把图片标号改成图片数组的长度, 不能写死

我们修改swiper.vue内的代码



接下来是点击编号跳转到相应的图片, 通过switchImg函数进行跳转

函数就是修改当前组件的currentNum, 达到显示哪一张图片

<template>
<div class="hello">
<div class="swiper">
<img :src="imgArr[currentNum].src" alt="" >

<div>
<p>{{imgArr[currentNum].title}}</p>
<span><</span>
<ul>
<li v-for="(item, index) in imgArr">
<a @click="switchImg(index)" href="javascripe:;">{{ index + 1 }}</a>
</li>
</ul>
<span>></span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Swiper',
props: {
imgArr: {
type: Array,
default: []
}
},
data () {
return {
currentNum:0
}
},
methods: {
switchImg(index) {
this.currentNum = index;
}
}
}
</script>

接下来就是左右切换按钮跳转, 我们使用vue的计算属性特性

computed: {
nextNum() {
if (this.currentNum === 0) {
return this.imgArr.length-1
} else {
return this.currentNum - 1
}
},
preNum() {
if (this.currentNum  === this.imgArr.length-1) {
return 0
} else {
return this.currentNum + 1
}
}
}

只需上一页下一页的按钮添加同样的事件, 把以上两个计算属性传入函数即可

<span @click="switchImg(nextNum)"><a href="javascripe:;"><</a></span>
<ul>
<li @click="switchImg(index)" v-for="(item, index) in imgArr">
<a href="javascripe:;">{{ index + 1 }}</a>
</li>
</ul>
<span @click="switchImg(preNum)"><a href="javascripe:;">></a></span>

接下来就是加入定时切换的功能, 我们只需要添加一个定时器即可, 再组件构建完毕就开始执行

interval() {
this.inv = setInterval(() => {
this.switchImg(this.preNum);
},this.time)
}

再添加一个传入的参数, 默认值是1000(1秒)

time: {
type: Number,
default: 1000
}

再组件初始化完毕后开始执行

created() {
this.interval();
}

再一个功能就是, 再移入的时候清空计数器, 移除之后再重启计时器

// 清除定时器
clearTime() {
clearInterval(this.inv)
},
// 重启定时器
setTime() {
this.interval();
}

再最外层的div加上两个出发函数

<div class="hello" @mouseover="clearTime" @mouseout="setTime">

最后一个功能就是, 是否自动播放

加入一个可传入参数autoPlay

autoPlay: {
type: Boolean,
default: true
}

然后处理一下刚才定义好的重启定时器和初始化完毕钩子函数

setTime() {
if(this.autoPlay) {
this.interval();
}
}
created() {
if(this.autoPlay) {
this.interval();
}
}

此时一个简单的swiper组件就构建完毕, 可传入一个图片地址数组, 一个自动播放事件, 是否自动播放三个参数

项目地址