jizai1125 / vue-countup-v3

A Vue 3 Component for animation counting.

哈喽！我是吉仔

个人主页: Notion | 掘金 | CSDN | 语雀

技术栈: | | | |

vue-countup-v3's Issues

小数点精度丢失 能否解决

试过vue-count-to针对vue2.x的api decimals="2"也无效

vite打包报错

Describe the bug

vite构建vue3项目时报以下错误

 Could not find a declaration file for module 'vue-countup-v3'. '本机路径/node_modules/.pnpm/[email protected][email protected]/node_modules/vue-countup-v3/dist/vue-count
up-v3.es.js' implicitly has an 'any' type.
  There are types at '本机路径/node_modules/vue-countup-v3/dist/countup.vue.d.ts', but this result could not be resolved when respecting package.json "exports". The 'vue-countup-v3' library may need to update its package.json or typings. 

使用的时候，编译器会报错。但是不会影响运行，只是构建的时候会失败

目前的解决方案是在tsconfig中，配置

{
    "compilerOptions":{
        "noImplicitAny":false
    }
}

Options don't work properly if used enableScrollSpy, scrollSpyDelay, scrollSpyOnce

Options don't work properly if used enableScrollSpy, scrollSpyDelay, scrollSpyOnce.

Count in template:
<CountUp
:end-val="4073"
:duration="1"
:options="options"

Additional context
import { ref } from "vue";
import CountUp from "vue-countup-v3";
export default {
name: "Counter",
components: {
CountUp,
},
setup() {
const options = ref({
enableScrollSpy: true,
scrollSpyDelay: 100,
scrollSpyOnce: true,
});
return {
options,
};
},

It stopped at 0.

end-val发生变化会从0开始

只设置end-val属性，end-val发生变化时不能从上次的值开始执行动画了么，会从0开始步进

用这个还需要装countup.js吗

我也是vite+vue3项目
然后之前安装countup.js 安装完启动项目控制台报countup.js 504之类的，项目不能正常启动，您有遇到过吗

cannot read properties of undefined (reading 'defineComponent')

Describe the bug
Getting errors on nuxt dev log running this module using nitro

To Reproduce
Steps to reproduce the behavior:

1. Install latest Nuxt
2. Install latest vue-countup-v3
3. create a new component:

<template>
  <ICountUp
    :end-val="number"
    :options="options"
  />
</template>
<script lang="ts" setup>
// @ts-ignore
import ICountUp from 'vue-countup-v3'

const props = withDefaults(defineProps<{
  number?: number,
  prefix?: string,
  decimal?: boolean
}>(), {
  number: 0,
  prefix: '$',
  decimal: true,
})

const options = computed(() => {
  return {
    useEasing: false,
    useGrouping: true,
    ...(props.decimal) && { decimalPlaces: 2 },
    separator: ',',
    ...(props.decimal) && { decimal: '.' },
    prefix: props.prefix,
    suffix: '',
    duration: 0.3,
  }
})

</script>

• remember that Nuxt by default load all components automatically

4. See error:

Nuxt Page Error:  Cannot read properties of undefined (reading 'defineComponent')

  <span class="stack internal">at ./node_modules/vue-countup-v3/dist/vue-countup-v3.umd.js:1:223</span>
  <span class="stack internal">at ./node_modules/vue-countup-v3/dist/vue-countup-v3.umd.js:1:232</span>
  <span class="stack internal">at ModuleJob.run (node:internal/modules/esm/module_job:218:25)</span>
  <span class="stack internal">at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)</span>
  <span class="stack internal">at async ViteNodeRunner.interopedImport (./node_modules/vite-node/dist/client.mjs:383:28)</span>
  <span class="stack internal">at async ViteNodeRunner.directRequest (./node_modules/vite-node/dist/client.mjs:253:24)</span>
  <span class="stack">at async ViteNodeRunner.cachedRequest (./node_modules/vite-node/dist/client.mjs:189:14)</span>
  <span class="stack internal">at async ViteNodeRunner.dependencyRequest (./node_modules/vite-node/dist/client.mjs:233:12)</span>
  <span class="stack">at async ./components/common/CountUp.vue:3:31</span></pre>
[nuxt-app] app:error:cleared: 0.874ms
[nuxt-app] page:loading:start: 0.017ms
[nuxt-app] page:loading:end: 0.009ms
[nitro-runtime] error: 0.022ms
[nuxt-app] app:rendered: 0.251ms

Expected behavior
No errors should appear related to vue-countup-v3

Screenshots

Desktop (please complete the following information):

• OS: Mac OS
• Browser chrome
• Version latest

在线示例（Online example）

vue-countup-v3 live demo

pnpm 安装依赖的时候为什么会卡住呢，下不了

`Could not find a declaration file for module 'vue-countup-v3'`

I'm using it with Nuxt 3 and when starting the dev server, vue-tsc throws this error:

Could not find a declaration file for module 'vue-countup-v3'. '/<project_dir>/node_modules/.pnpm/[email protected][email protected]/node_modules/vue-countup-v3/dist/vue-countup-v3.es.js' implicitly has an 'any' type.
  There are types at '/<project_dir>/node_modules/vue-countup-v3/dist/countup.vue.d.ts', but this result could not be resolved when respecting package.json "exports". The 'vue-countup-v3' library may need to update its package.json or typings.

Editing the package.json in node_modules and moving this to here got rid of the error message for me.

不能修改初始值

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

播放完成回调无法触发

Describe the bug
像文档中所说：@finish 事件和 onCompleteCallback 配置项都无法正常触发，或者说播放完成的界限是什么？要怎么才是播放完成的状态？

To Reproduce

• 使用Vue版本：3.3.4
• 代码如下（我尽量删除了一些臃肿部分）：

<template>
  <span class="font-mono text-2xl text-[#fff]">
    <CountUp
      :end-val="paymentStore.price_total"
      :duration="1.2"
      :loop="1"
      :options="options"
      :delay="2"
      :on-finished="onFinish"
    />
  </span>
</template>
<script lang="ts" setup>
import CountUp from "vue-countup-v3";
import type { CountUpOptions } from "vue-countup-v3";
import { usePaymentStore } from "@/stores/payment";

const paymentStore = usePaymentStore();

const options: CountUpOptions = {
  separator: ",",
  onCompleteCallback() {
      console.log('finish');
  },
  // ...
};
const onFinish = () => {
  console.log('play finished!');
}
</script>

Desktop (please complete the following information):

• OS: macOS 14.0 (23A344)
• Browser: 120.0.6099.199（正式版本） (arm64)

翻牌器效果能否实现

你好，请问该组件能实现这个效果么

如何想要单独为前后缀添加样式，如何实现

如标题

smartEasingThreshold is undefined

Hello,

I encounter this error when I use the new package for Vue3.

vue-countup-v3.es.js:71 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'smartEasingThreshold')
    at t.determineDirectionAndSmartEasing (vue-countup-v3.es.js:71:36)
    at t.start (vue-countup-v3.es.js:79:66)
    at startAnim (vue-countup-v3.es.js:135:50)
    at loopAnim (vue-countup-v3.es.js:147:7)
    at vue-countup-v3.es.js:168:9
    at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:21)
    at hook.__weh.hook.__weh (runtime-core.esm-bundler.js:2687:29)
    at flushPostFlushCbs (runtime-core.esm-bundler.js:358:32)
    at render2 (runtime-core.esm-bundler.js:6211:9)

I use it like this

<script setup>
    import CountUp from 'vue-countup-v3';
    import {ref} from 'vue';

    const options = ref({
        useEasing: true,
        useGrouping: true,
        separator: ' ',
        decimal: ',',
        prefix: '',
        suffix: ''
    });

    const optionsWithSuffix = (suffix) => {
        options.value.suffix = `${suffix}`;
        return options;
    }
</script>

<template>
    <CountUp
        :end-val="150"
        :options="options"
    />
</template>

Is there something wrong with the configuration or is it internal ?

Thanks in advance

Lower versions such as Android 9 are not compatible

Describe the bug
it makes all pages can not be shown, and there is no any error messgaes consoled

使用vite构建代码的时候，发现会报这个错误 To load an ES module....

(node:30639) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. (Use node --trace-warnings ... to show where the warning was created) .../node_modules/.pnpm/[email protected][email protected]/node_modules/vue-countup-v3/dist/vue-countup-v3.es.js:20 import { defineComponent, ref, watch, onMounted, onUnmounted, openBlock, createElementBlock, renderSlot, createElementVNode } from "vue";
在 vue-countup-v3 的package.json文件中加上 "type": "module", 才可以打包成功，这个可以做兼容吗？或者有其他解决方案可以参考吗？

希望能增加一个不处理小数点的配置

目前默认整数, 配置项也只能是数字, 我希望我传入带小数的数字时, 小数位能够原样返回

千分符没有生效

      <count-up :end-val="count" :useIndianSeparators="false" :useGrouping="false" separator="_"></count-up>

千分符没有生效,我想取消掉千分符没有生效,换一个千分符测试也没有生效

enableScrollSpy 这个属性我为啥设置了不生效呢，没有出现在可见区域就已经滚动完了

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.