1.0.3 • Published 3 years ago
rs-light v1.0.3
rs-light
基于vue 2.x的一个字符串模拟rs尾灯效果,可配置成跑马灯
组件: rs-light
版本: 1.0.3
使用方法
- 通过NPM下载安装
npm install rs-light --save
在vue页面中引入 并在componets中声明该组件
- xxx.vue
<template>
<div class="rsLightDemo">
<rs-light string="rslightdemo"></rs-light>
</div>
</template>
<script>
import RsLight from 'rs-light'; // 引入
export default {
components: { RsLight }
}
</script>
配置参数
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
string | 传入的字符串 | String | 无默认值,必传 |
during | 动画持续时间 | Number | 默认一秒闪动两个字符 |
light | 高亮的颜色 | String | '#000' |
dark | 常规颜色 | String | 'transparent' |
className | 主体的class | String | - |
itemClassName | 每一个字符的class | String | - |
direction | 动画方向(forward/reverse) | String | 'forward' |
indexClass | 根据特殊下标控制某个字符的class | Object | - |
infinite | 是否无限重复,动画播放次数 | String/Number/Boolean | 1 |
marquee | 开启跑马灯效果 | Boolean | false |
注:
- 可以通过className和itemClassName为整个字符串和每个字符添加class,通过class改变样式;
- 通过indexClass为字符串中特定的一个字符添加class,可以是数组类型,(例'largeText', 'miniText',数组的第n个值便是第n个字符的class;)或是对象类型(例: {3: 'miniText'},key:为第n个字符,value为特定class);
- direction的默认值forward为从右向左,想要反向请使用 reverse;
- marquee默认为false,参考的是奥迪rs的尾灯效果;为true时为跑马灯效果,跑马灯效果需调试一下dark、during、infinite参数,以达到更好效果;