【下载文档:  基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能.txt 】

---

基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
VueSliderShow故名思意，vue的轮播图组件插件，该插件：
1、支持浏览器任意放缩，兼容移动端，
2、支持自动切换，鼠标经过停止切换，分页/任意页点击切换，左右切换，
3、支持文字介绍（超过一行自动省略）
本文讲述的是从开发一款基于Vue2x的响应式自适应轮播组件插件的一个全过程，包含发布到npm，构建自己的npm包，供下载安装使用的技巧，阅读本文需要些Vue的语法糖（自定义标签、计算属性、父子组件通信等），以及ES6、npm等基础知识。先来看下Demo
示例源码地址
Install
npm i vueslideshow
使用示例
in vue2.x:


（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数组，用的是静态模拟数据，正式环境是通过请求接口请求的数据。


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、在http://www.npmjs.com创建自己的账号
1、新建一个项目文件夹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": "http://github.com/HongqingCao/My-Code/tree/master/VueSliderShow"
},
"author": "HongqingCao",
"license": "ISC"
}
2、创建一个index.js
var sliderShow = require('./sliderShow')
module.exports = sliderShow
3、创建一个README.md，描述一下这个组件，可以参考一下我写的
# vueslidershow
> a slider implement by vuejs
>一个vue的响应式自适应轮播图组件
[Demo](http://github.com/HongqingCao/My-Code/tree/master/VueSliderShow)
###### 
## Install
``` bash
npm i vueslideshow
```
## 应用案例
#### in vue2.x:
```html