十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章主要讲解了“Vue2x怎么实现响应式自适应轮播组件插件VueSliderShow功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue2x怎么实现响应式自适应轮播组件插件VueSliderShow功能”吧!
创新互联公司客户idc服务中心,提供托管服务器、成都服务器、成都主机托管、成都双线服务器等业务的一站式服务。通过各地的服务中心,我们向成都用户提供优质廉价的产品以及开放、透明、稳定、高性价比的服务,资深网络工程师在机房提供7*24小时标准级技术保障。
VueSliderShow故名思意,vue的轮播图组件插件,该插件:
1、支持浏览器任意放缩,兼容移动端,
2、支持自动切换,鼠标经过停止切换,分页/任意页点击切换,左右切换,
3、支持文字介绍(超过一行自动省略)
使用示例
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、在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