从头开始开发一个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>&lt;</span>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
        <span>&gt;</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>&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的计算属性特性

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:;">&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>

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

 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组件就构建完毕, 可传入一个图片地址数组, 一个自动播放事件, 是否自动播放三个参数

项目地址