animation-of-ups-and-downs

股票涨跌幅动画

Setup

Install

npm i animation-of-ups-and-downs

HTML/JavaScript

<template>
    <ani-number :value="value" :last="last" :to-fixed="fixed" />
</template>
<script type="text/javascript">
import aniNumber from 'animation-of-ups-and-downs'
...
components: {
    aniNumber
},
 data() {
    return {
      value: 0,
      last: 0,
      fixed: 2
    }
},
...
</script>

组件参数prop

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | value | 显示值 | Number | 0 | | last | 昨收价 | Number | 0 | | unit | 单位 | String | - | | toFixed | 精确度 | Number | -1 | | speed | 动画速度 | Number | 100 | | colorStyle | 背景 文字颜色 | Object | { upText: '#ff0000', upBg: '#d1181f', downText: '#0fc351', downBg: '#0fc351', noteText: '#a0a0a0', noteBg: '#a0a0a0' } |

colorStyle参数说明

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- |--- | | upText | 收涨时文字颜色 | String | '#ff0000' | | upBg | 收涨时背景颜色 | String | '#d1181f' | | downText | 收跌时文字颜色 | String | '#0fc351' | | downBg | 收跌时背景颜色 | String | '#0fc351' | | noteText | 持平时文字颜色 | String | '#a0a0a0' | | noteBg | 持平时背景颜色 | String | '#a0a0a0' |