iking-countto/README.md

金合前端组件

<!--
 * @Author: wfl
 * @LastEditors: wfl
 * @description: 
 * @updateInfo: 
 * @Date: 2022-07-26 12:14:10
 * @LastEditTime: 2022-08-09 09:51:26
-->
# 金合前端 - 数字动画组件

`Vue3 + TS`

- `npm i iking-countto`
- 或`pnpm add iking-countto`
- 或`yarn add iking-countto`

- `import iking-countto from 'iking-countto'`

- Props

```javascript
interface Props {
  startVal: Number; // 起始值
    endVal: Number; // 最终值
    duration: Number;// 动画持续时间
    autoplay: Boolean; // 自动播放
    decimals: Number; // 小数位数
    prefix: String; // 前缀
    suffix: String; // 后缀
    separator: String; // 分隔符号
    decimal: String; // 小数点符号
    color: String; // 数字颜色
    useEasing: Boolean; // 启用数字动画
    transition: "easeInSine" | "easeOutSine" | "easeInOutSine" | "easeInQuad" | "easeOutQuad" | "easeInOutQuad" | "easeInCubic" | "easeOutCubic" | "easeInOutCubic" | "easeInQuart" | "easeOutQuart" | "easeInOutQuart" | "easeInQuint" | "easeOutQuint" | "easeInOutQuint" | "easeInExpo" | "easeOutExpo" | "easeInOutExpo" | "easeInCirc" | "easeOutCirc" | "easeInOutCirc" | "easeInBack" | "easeOutBack" | "easeInOutBack" | "linear"
    // 动画类型
    customClass: String; // 自定义class，传入class名称
}

// 默认值
const props = withDefaults(defineProps<Props>(), {
  width: 320,
  height: 170,
  show: false,
  sliderSize: 30,
  scale: 1,
  range: 10,
  images: () => null,
  successText: "验证成功",
  failText: "验证失败",
  sliderText: "拖动滑块完成验证",
  padding: 15,
  el: 'body'
});
```

- Emits

```javascript
  const emits = defineEmits<{
    (e: 'onFinished'): void;
    (e: 'onStarted'): void;
  }>()
```

## 金合研究院

[金合开发者平台](http://wfl118.cn/)