前段时间，正好在vue项目中需要用到文字的无缝滚动，而在github或npm中没有找到合适的插件，有的没有演示，有的不符合需求，最后还是自己手动撸了一个。虽然花了不少时间，但对我自身而言，也是一种成长，熟悉了怎么在npm发布包的流程，下面简单介绍下自己撸的插件的一些配置及使用方法。
废话不多说，直接上图。
demo效果
使用方式
安装依赖
1
2
3
4
5
6
7
8
9
10
11
# cd project
cd project
# install dependencies
npm install vue-rich-carousel --save-dev
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
项目中引用
在main.js中引入：
1
2
3import Vue from 'vue';
import VueCarousel from 'vue-rich-carousel';
Vue.use(VueCarousel);
在组件中使用：
1
2
3
4
5
6
7
8
9
10
11 <vue-rich-carousel :autoplay="autoplay">
<vue-rich-slide>
<a >这里是文字1</a>
</vue-rich-slide>
<vue-rich-slide>
<a >这里是文字1</a>
</vue-rich-slide>
<vue-rich-slide>
<a >这里是文字1</a>
</vue-rich-slide>
</vue-rich-carousel>
参数配置
| 配置项 | 参数类型 | 可选值 | 默认值 | 说明 | 备注 |
|---|---|---|---|---|---|
| effect | String | default | left | 效果类型 | 目前不支持right/bottom/fade/fold模式，且fade/fold模式只支持vis为1 |
| loop | Boolean | true/false | true | 是否无限循环 | 目前暂不支持，只有.*Marquee模式支持loop |
| autoplay | Boolean | true/false | true | 是否自动播放 | - |
| arrows | Boolean | true/false | true | 是否显示箭头 | .*Marquee模式不会显示 |
| dots | Boolean | true/false | true | 是否显示小圆点 | .*Marquee模式不会显示 |
| trigger | String | hover/click | hover | 切换方式 | - |
| easing | String | Linear | Linear | 动画效果 | 目前只支持Linear效果 |
| duration | Number | - | 1500 | 动画时长 | 单位：毫秒 |
| scroll | Number | - | 1 | 滚动个数 | 目前暂不支持，最大值为vis个数 |
| vis | Number | - | 1 | 可视个数 | 最大值为页面自定义总个数 |
其中default: left/top/right/bottom/leftMarquee/topMarquee/rightMarquee/bottomMarquee/fade/fold
注意：
除非注明不支持，否则均为支持最后，欢迎大家使用，提bug，更欢迎去github上star。
github地址：https://github.com/jefferyE
代码示例请参考，猛戳这里