前段时间,正好在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
代码示例请参考,猛戳这里