Character-roll NPM

CharacterRoll

一个尽可能让开发者自定义的字符滚动插件

一、使用方法

npm i character-roll -S

import CharacterRoll from 'character-roll';

components: {
  CharacterRoll
}

<CharacterRoll :presetObject="presetObject" :text="text" />

二、参数解析

参数	类型	备注
presetObject	object	插件的预设对象
text	string	插件显示的字符串

三、关于presetObject

键	默认值	备注
range	'0', '1', '2', '3', '4', '5', '6', '7', '8', '9'	可能的字符集合
direction	up	滚动的方向，取值只能为'up'和'down'，否则会报错
width	50	滚动区域宽度，单位px，只需填写数字，无需单位
height	50	滚动区域高度，单位px，只需填写数字，无需单位
fontSize	40	字符大小，单位px，只需填写数字，无需单位
color	#ff483f	字符颜色
fontWeight	bold	字符粗细
fontFamily	Avenir, Helvetica, Arial, sans-serif	字符字体
background	''	滚动区域背景，可自定义为渐变背景或者图片背景。background必须为一个数组，这个数组的元素个数可以不用与最终显示的滚动区域个数保持相等，但是最后显示的背景效果会从background数组里面循环选值
border	''	滚动区域边框
borderRadius	0	滚动区域圆角，单位px，只需填写数字，无需单位
isOnlyFirstandLastRadius	true	是否只需要第一个和最后一个滚动区域显示左上左下右上右下的圆角
rollboxsPerView	10	滚动区域间距，单位px，只需填写数字，无需单位
speed	0.5	字符切换速度，为0的时候不显示动画，单位s