Vue 自定义轮播

先看效果图：

 开发可视化大屏的时候想在网上随便找一个，翻了翻都不太满意就手撸了一个，

配置信息如下：

有些属于“预留”功能，目前没有达到理想效果，后续我会在这篇博客里继续完善，

源码如下：

组件开发的比较潦草，后续会进行迭代和完善，继续在这篇文章里进行更新。

设计思路如下：

划分标题、轮播区、指示点三块，在轮播区使用 display: inline-block; ​使子元素横向排列，

此时​限制父元素的宽度，子元素会自动换行，使用 white-space: nowrap; 则强制不换行。

使用动态样式的写法，判断column 的属性值，以此来实现横向或纵向排列。

使用计时器控制变量 nowInd 变化，当nowInd 发生改变会影响轮播图上的判断条件，进而控制轮播运动

根据config.column 的值，判断是进行左右移动 还是上下移动，用transition 来动态控制过渡效果的有无。

文字的滑动效果来自于 css 动画，代码如下：

.focus {
  .title,.info,.name {
    transform: translateX(20px);
  }

  .title {
    transition: all .6s .3s;
  }

  .info {
    transition: all .6s .5s;
  }

  .name {
    transition: all .6s .7s;
  }
}

通过nowInd 是否等于当前子元素的下标，以此来断定是否聚焦了当前的子元素，当子元素满足条件拥有.focus 时，子元素向右移动，给不同的延迟时间，以此实现波浪化。

三种指示点共用同一套动画，样式也进行和封装和复用，需要别的款式可以仿照我现在的代码进行更改。

这里为了高度复用性，使用的并不是img 轮播，而是div 区域轮播，以背景图的形式体现

可以根据不同的需求更改或隐藏背景图，在div 里进行自定义排版。

暂时就讲到这里了，后续会在这篇文章的底部继续更新该组件，感兴趣的话可以收藏一下，see you