基于Vue2x实现响应式自适应轮播组件插件VueSlide(2)

日期：2021-04-04 栏目：程序人生浏览：次

计算属性，前一页，这里就控制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、在https://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": "https://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](https://github.com/HongqingCao/My-Code/tree/master/VueSliderShow) ###### ![实例效果](https://github.com/HongqingCao/My-Code/blob/master/VueSliderShow/VueSlider.gif) ## Install ``` bash npm i vueslideshow ``` ## 应用案例 #### 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: '测试测试测试1', href: 'detail/analysis' } ] } } } ``` <br> ### 参数说明： 1.invTime,控制轮播速度 2.slides,具体的轮播数据数组形式，包含图片，文字，链接三个参数 3.由于是响应式自适应所以推的图片必须高度一致，更友好 ## License [MIT](LICENSE)

4、命令行npm login，登录自己的账号和密码

基于Vue2x实现响应式自适应轮播组件插件VueSlide