vue字符滾動插件

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

四、注意事項

1.presetObject.range裏面的元素必須爲字符串；

2.presetObject.speed的速度不要超過text的變化速度，否則沒有意義；

3.該插件可以在單個頁面中多次使用。

五、用途

該插件可通過setInterval等定時器，定時設置傳入的text參數，來動態地實現字符切換的效果。

有可能使用到的場景：

1.倒計時定時器；

2.當前日期或者時間；

3.定時輪詢接口獲取數據，然後動態顯示在頁面上，這些數據有可能是XX活動參與人數，報名人數等。

六、demo

https://nangxif.github.io/character-roll/dist/index.html

PS:[官網]: https://nangxif.github.io/character-roll/build/index.html