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

前端之家收集整理的这篇文章主要介绍了基于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

Vue.use(Router)

export default new Router({
routes: [
{
path: '/',component: Index
}
]
})

开发项目:

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

ES6逻辑段代码解读,sliderShow.vue通过props方式接受父组件里传递过来的数据

计算属性,前一页,这里就控制nowIndex,在当前数据索引里减一,当是第一条数据的时候,我们要跳到最后一条,所以当第一条数据的时候我们这里判断它并让他赋值最后一条数据,后一页和前一页相似,判断最后一页数据,跳到第一页。

通过Index值,从而改变具体数据

{ this.nowIndex = index this.isShows = true },10) },

当页面加载完后直接执行runInv()方法,然后自动切换,setInterval()/ clearInterval()是js内置的定时器,setInterval()里按照父组件里传的时间来调用函数的方法,clearInterval()是结束定时器的循环调用函数

{ this.goto(this.nextIndex) },mounted () { this.runInv(); }

轮播组件插件就基本上ok了,下面讲解一下把这个轮播组件插件放到npm里,构建自己的npm包。

分割线 npm!!!!!

构建npm包:

0、在创建自己的账号

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

2、创建一个index.js

3、创建一个README.md,描述一下这个组件,可以参考一下我写的

a slider implement by vuejs

一个vue的响应式自适应轮播图组件

Demo

实例<a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a>

Install

npm i vueslideshow

应用案例

in vue2.x:

<template>
 <div>
 <slider-show :slides="slides" :inv="invTime"&gt;</slider-show>
 </div>
</template>
<script>
import sliderShow from './sliderShow'
export default {
 components: {
 sliderShow
 },href: 'detail/analysis'
 }
 ]
 }
 }
}


参数说明:

1.invTime,控制轮播速度
2.slides,具体的轮播数据数组形式,包含图片文字链接三个参数
3.由于是响应式自适应所以推的图片必须高度一致,更友好

License

MIT

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

5、发布到npm执行命令行: npm publish,成功后你会发现你的npm里已经有一个包了

你可以点击进入详情看看

6、尝试下载安装在自己项目里:npm i vueslideshow,安装完后在node_modules就可以看到自己的插件

7、应用就如一开始的插件介绍一样,可以往上看

最后总结

从开发到发布一款基于Vue2x的响应式自适应轮播组件插件VueSliderShow,到这里就已经开发完毕,当然里面肯定也有一定的bug在里面,我用了transition去包裹两个img其实目前是没用到这个过渡属性,后期可以各位老铁自己补一些绚丽的切换动画,最后再次附上

以上所述是小编给大家介绍的基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/vue/32313.html

猜你在找的Vue相关文章