从头开始开发一个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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <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的基本样式(凑合可以看)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <template>
    <div class="hello">
    <div class="swiper">
    <img :src="imgArr[0].src" alt="" >
    // 绑定的属性一定要用v-bind指令 : 是简写
    <div>
    <p>{{imgArr[0].title}}</p>
    <span>&lt;</span>
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    </ul>
    <span>&gt;</span>
    </div>
    </div>
    </div>
    </template>
  • JS部分

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <script>
    export default {
    name: 'Swiper',
    props: {
    imgArr: {
    // 接受一个数组类型imgArr参数, 默认值是空数组
    type: Array,
    default: []
    }
    },
    data () {
    return {

    }
    }
    }
    </script>
  • app.vue代码

    1
    2
    3
    4
    5
    6
    <template>
    <div id="app">
    <Swiper :imgArr="imgArr"></Swiper>
    // 把imgArr传递给swipr组件
    </div>
    </template>
  • js部分

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <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, 达到显示哪一张图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<template>
<div class="hello">
<div class="swiper">
<img :src="imgArr[currentNum].src" alt="" >

<div>
<p>{{imgArr[currentNum].title}}</p>
<span>&lt;</span>
<ul>
<li v-for="(item, index) in imgArr">
<a @click="switchImg(index)" href="javascripe:;">{{ index + 1 }}</a>
</li>
</ul>
<span>&gt;</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的计算属性特性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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
}
}
}

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

1
2
3
4
5
6
7
<span @click="switchImg(nextNum)"><a href="javascripe:;">&lt;</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:;">&gt;</a></span>

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

    1
    2
    3
    4
    5
    interval() {
    this.inv = setInterval(() => {
    this.switchImg(this.preNum);
    },this.time)
    }

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

    1
    2
    3
    4
    5

    time: {
    type: Number,
    default: 1000
    }

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

1
2
3
created() {
this.interval();
}

  • 再一个功能就是, 再移入的时候清空计数器, 移除之后再重启计时器
    1
    2
    3
    4
    5
    6
    7
    8
    // 清除定时器
    clearTime() {
    clearInterval(this.inv)
    },
    // 重启定时器
    setTime() {
    this.interval();
    }

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

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

  • 最后一个功能就是, 是否自动播放
    加入一个可传入参数autoPlay
    1
    2
    3
    4
    autoPlay: {
    type: Boolean,
    default: true
    }

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

1
2
3
4
5
6
7
8
9
10
setTime() {
if(this.autoPlay) {
this.interval();
}
}
created() {
if(this.autoPlay) {
this.interval();
}
}

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

坚持原创技术分享,您的支持将鼓励我继续创作!