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

程序员文章站 2022-06-08 19:24:54

vueslidershow故名思意，vue的轮播图组件插件，该插件： 1、支持浏览器任意放缩，兼容移动端， 2、支持自动切换，鼠标经过停止切换，分页/任意页点击切换，左...

vueslidershow故名思意，vue的轮播图组件插件，该插件：

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

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

3、支持文字介绍（超过一行自动省略）

本文讲述的是从开发一款基于vue2x的响应式自适应轮播组件插件的一个全过程，包含发布到npm，构建自己的npm包，供下载安装使用的技巧，阅读本文需要些vue的语法糖（自定义标签、计算属性、父子组件通信等），以及es6、npm等基础知识。先来看下demo

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

示例源码地址

install

npm i vueslideshow

使用示例

in vue2.x:

<template>
 //轮播组件的位置
 <div>
 <slider-show :slides="slides" :inv="invtime"></slider-show>
 </div>
</template>
<script>
import slidershow from 'vueslidershow'
export default {
 components: {
 slidershow
 },
 data () {
 return {
 invtime: 2000,
 slides: [
 {
 src: require('../assets/1.jpg'),
 title: '测试测试测试1',
 href: 'detail/analysis'
 }
 ]
 }
 }
}

参数说明：

1.invtime：控制轮播速度

2.slides：具体的轮播数据数组形式，包含图片，文字，链接三个参数

3.注意：由于是响应式自适应所以推的图片必须高度一致

分割线，下面开始上路，步入主题！！

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

创建项目

0、想必各位老铁都是有vue和前端经验的了，这些基础项目环境和搭建项目，改造初始化的vue项目都是睁眼闭眼的事情了，所以这里都一笔带过：

1、vue环境配备，(node、vue-cli）

2、初始化项目，vue init webpack vueslideshow。安装依赖npm install(安装的时候把vue-router默认一起安装上去)

改造初始化项目：

（0）改造前分析一下我们的需求：一个响应式自适应轮播组件，之所以是组件，是我们希望可以公用的代码段，支持可动态配置，轮播组件无非就说图片文字，自动切换，可选择切换。

（1）app.vue里清空到如下就好

<template>
 <div id="app">
 <router-view/>
 </div>
</template>

<script>
export default {
 name: 'app'
}
</script>

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

<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'
 },
 {
 src: require('../assets/2.jpg'),
 title: '测试测试测试2',
 href: 'detail/count'
 }
 ]
 }
 }
}

（2）slidershow.vue

模板段代码读解（布局这里就略讲了），最外层分别有两个鼠标经过clearinv事件，主要是希望在鼠标经过焦点图的时候不进行切换方便点图片跳转，鼠标移出执行runinv事件继续自动切换，transition分别去控制两张图的出现和消失，左右切换，和点击具体的分页切换这里用通用的一个goto()方法转递不同值，去判断具体要展示的数据页，这个值的计算可以通过vue里的计算属性。

<template>
 <div class="slide-show" @mouseover="clearinv" @mouseout="runinv">
 <div class="slide-img">
 <a :href="slides[nowindex].href" rel="external nofollow" >
 <transition name="slide-fade">
 <img v-if="isshow" :src="slides[nowindex].src">
 </transition>
 <transition name="slide-fade-old">
 <img v-if="isshows" :src="slides[nowindex].src">
 </transition>
 </a>
 </div>
 <div class="slide-title"><a>{{ slides[nowindex].title }}</a></div>
 <ul class="slide-pages">
 <li v-for="(item, index) in slides"
 @click="goto(index)"
 >
 <a :class="{on: index === nowindex}"></a>
 </li>
 </ul>
 <a @click="goto(previndex)" class="callbacks-nav">＜</a>
 <a @click="goto(nextindex)" class="callbacks-nav next">＞</a>
 </div>
</template>
<script>
export default {
 props: {
 slides: {
 type: array,
 default: []
 },
 inv: {
 type: number,
 default: 1000
 }
 },
 data () {
 return {
 nowindex: 0,
 isshow: true,
 isshows:false
 }
 },
 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
 }
 }
 },
 methods: {
 goto (index) {
 this.isshow = false
 settimeout(() => {
 this.nowindex = index
 this.isshows = true
 }, 10)

 },
 runinv () {
 this.invid = setinterval(() => {
 this.goto(this.nextindex)
 }, this.inv)
 },
 clearinv () {
 clearinterval(this.invid)
 }
 },
 mounted () {
 this.runinv();
 }
}
</script>

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、在创建自己的账号

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实现响应式自适应轮播组件插件VueSliderShow功能