金合前端 - 数字动画组件

Vue3 + TS

• npm i iking-countto

• 或pnpm add iking-countto

• 或yarn add iking-countto

• import iking-countto from 'iking-countto'

• Props

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

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

金合研究院

金合开发者平台