基于Vue2x的响应式自适应轮播组件插件VueSliderShow功能的实现

时间：2021-08-31 来源：互联网编辑：宝哥软件园浏览：次

VueSliderShow，因此得名，是vue的转盘组件的一个插件，它：

1.支持浏览器任意缩放，兼容移动终端。

2、支持自动切换，鼠标停止切换，分页/任意页面点击切换，左右切换，

3.支持文字介绍(多行自动省略)

本文描述了基于Vue2x开发响应性自适应轮播组件插件的全过程，包括发布到npm的技巧和构建自己的npm包进行下载和安装的技巧。阅读本文需要一些Vue语法糖(自定义标签、计算属性、父子组件通信等)。)，以及ES6、npm等基础知识。让我们先来看看演示

示例源地址

安装

npm i vueslideshow

用法示例

在vue2.x:中

模板//转盘组件div滑块的位置-show : slides=' slides ' : inv=' inv time '/slider-show/div/templatescript从' vueslidershow '导入sliderShow导出默认{ components: { sliderShow }，data(){ return { inv time 3360 2000，slides :的参数描述[{ src : required('./assets/1.jpg ')，标题：“测试测试1”，href :“细节/分析”}]}}:

1.invTime:控制转速

2 .幻灯片：特定的轮播数据数组表单包括三个参数：图片、文本和链接

3.注意：因为它是响应自适应的，推送的图片必须高度一致

分割线，从下面的路开始，踏入主题！

写在前面：vue官网提供了开发插件的介绍。感兴趣的老铁可以先搬到官网开发插件。

创建项目

0.想必老铁们都有vue和前端经验。这些基础的项目环境、建设项目、转型发起的vue项目，都是睁眼闭眼的东西，所以都拍到了这里：

1.vue环境设备(节点，vue-cli)

2.初始化项目，Vue init webpack vueslideshow。安装取决于npm安装(默认情况下，安装时vue路由器安装在一起)

转换初始化项目：

(0)在转换之前分析我们的需求：响应性自适应轮播组件是我们希望可以动态配置的公共代码段。转盘组件只说图片和字符，并自动和有选择地切换。

(1)清空app.vue，如下所示

template div id=' app ' router-view///div/templatescriptexportdefault { name : ' app ' }/script(2)在components文件夹中，创建index.vue和sliderShow.vue(因为是一个示例项目，规范不好)，这样router文件夹中的index.js启动页面就指向了index.vue。

从“vue”导入vue从“vue-router”导入路由器从“@/components/index”导入索引vue。使用(路由器)导出默认的新路由器({ route :[{ path 3360/'，component3360 index}])开发项目：

(1)作为父组件，index.vue通过es6引用carousel组件，声明使用carousel sliderShow组件，然后将两个invTime和sliderShow属性参数传递给sliderShow组件，分别是carousel切换时间和数据传输。这里的slides数组使用静态模拟数据，正式环境是通过请求接口请求的数据。

template div slider-show : slides=' slides ' : inv=' invTime '/slider-show/div/templatescript import slider show from '。/sliderShow“导出默认{ components: { sliderShow }，data () { return { invTime: 2000，slide :[{ src : require(”./assets/1.jpg ')，Title:' test test 1 '，href :' detail/analysis'}，{src 3360 require('./assets/2.jpg ')，标题：“test test 2”，href 3360“detail/count”}]} } }(2

模板段代码读取(这里简单介绍一下布局)，最外层有两只鼠标分别经过clearInv事件，主要是希望鼠标经过焦点图时，不方便切换图片跳转，鼠标移出执行runInv事件继续自动切换，过渡分别控制两张图片的出现和消失，左右切换，点击特定页面切换。这里用一个通用的goto()方法传递不同的值来判断要显示的具体数据页。

template div class=' slide-show ' @鼠标悬停在=' clearInv ' @鼠标移出=' runInv ' div class=' slide-img ' a : href=' slides[now index].href' rel='外部nofollow '过渡名称=' slide-fade ' img v-if=' IsShow ' : src=' http : slides[now index].src /过渡过渡名称=' slide-fade-old ' img v-if=' is shows ' : src=' http : slides[now index].src '/transition/a/div class=' slide-title ' a { { slides[now index]} .title } }/a/div ul class=' slide-page ' Li v-for='(项目，索引)在幻灯片中@ click=' goto(index)' a : class=' { : index===now index } '/a/Li/ul a @ click=' goto(previendex)' class='回调-nav ' /a/div/template script导出默认值{ prop 3: { slide 3366 } next index(){ if(this。现在索引===这个。幻灯片。length-1){返回0 } else {返回这个。现在索引{ 1 }，方法： { goto(index){ this。is show=false setTimeout(()={ this。现在索引=索引这个。isshow=true }，10) }，runInv(){ this。invid=setInterval(()={ this。goto(这个。next index)}，this.inv) }，clearInv(){ clearInterval(this。因维德人).} }/脚本6逻辑段代码解读，sliderShow.vue通过小道具方式接受父组件里传递过来的数据

prop : { slide : { type : Array，default: [] }，inv: { type: Number，default: 1000 } }，计算属性，前一页，这里就控制nowIndex，在当前数据索引里减一，当是第一条数据的时候，我们要跳到最后一条，所以当第一条数据的时候我们这里判断它并让他赋值最后一条数据，后一页和前一页相似，判断最后一页数据，跳到第一页。

computed : { prevendex(){ if(this。现在index===0){返回这个。幻灯片。length-1 } else {返回此。now index-1 } }，nextIndex(){ if(this。现在索引====这个。幻灯片。length-1){返回0 } else {返回这个。现在索引-1 } }，通过索引值，从而改变具体数据

转到(索引){ this。is show=false setTimeout(()={ this。现在索引=索引这个。isshow=true }，10) }，当页面加载完后直接执行runInv()方法，然后自动切换，setInterval()/clearInterval()是射流研究…内置的定时器，setInterval()里按照父组件里传的时间来调用函数的方法，clearInterval()是结束定时器的循环调用函数

runInv(){ this。invid=setInterval(()={ this。goto(这个。nextindex)}，this.inv) }，clearInv(){ clearInterval(this。invid)}，mounted(){ this。runInv()；}轮播组件插件就基本上好的了，下面讲解一下把这个轮播组件插件放到新公共管理里，构建自己的新公共管理包。

分割线npm！

构建新公共管理包：

0、在https://www.npmjs.com创建自己的账号

1、新建一个项目文件夹VueSliderShow，把上面的sliderShow.vue文件复制文件。打开煤矿管理局进入到VueSliderShow目录，然后命令行执行：npm init(按流程填写相关信息，都可以按照自己的实际情况写),然后会生成一个package.json，例如下面是我这个组件的基本信息

{“name”:“vueslidesshow”，“version”:“1 . 0 . 2”，“description”:一个由组件实现滑块、“main”:“index . js”、“scripts”: {“test”:“echo”错误：没有指定测试退出1' }，'存储库' : { '类型' 3: ' git '，' url ' : '创建一个index.js

var sliderShow=require(' ./sliderShow ')模块导出=幻灯片放映3，创建一个README.md，描述一下这个组件，可以参考一下我写的

# vueslidershow一个由vuejs实现的滑块一个vue响应自适应轮播组件[demo](https://github.com/hongqingcao/my-code/tree/master/vueslidershow)# # # # # #！[示例效果](https://github.com/hongqingcao/my-code/blob/master/vuesridesshow/vuessrider . gif)# #安装` ` bashnpm I vue幻灯片放映` ` ` # #应用案例# # # invue2.x3360 `。` html template div slider-show : slides=' slides ' : inv=' invTime '/slider-show/div/templatescript import sliderShow from '。/sliderShow“导出默认{ components: { sliderShow }，data () { return { invTime: 2000，slide :[{ src : require(”./assets/1.jpg ')，Title:' test test 1 '，href : ' detail/analysis ' }]} } ` ` br # # #参数描述：1.invTime，控制转盘速度2 .幻灯片，具体转盘数据数组形式，包括图片和字符，Link三个参数3。因为是响应自适应的，推送的图片必须高度一致友好## License[MIT](LICENSE)4。命令行npm登录，用自己的帐户和密码登录。