前端小白白啦 2023-12-02 17:32 采纳率: 37.1%
浏览 51
已结题

vue3-count-to 数值滚动 里面有个easingFn 自定义缓动函数的怎么配置

vue3-count-to 数值滚动 里面有个easingFn 自定义缓动函数的怎么配置

我自己绑定函数不执行 代码直接复制到html就可以执行

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/vue3-count-to"></script>
  </head>
  <body>
    <div id="app">
      <button @click="easingFn">123</button>
      <button @click="status(0)">开始</button>
      <button @click="status(1)">暂停</button>
      <button @click="status(2)">复原</button>
      <count-to 
        ref="countToRef"
        :start-val="100"  //初始数值
        :end-val="1000"   //目标数值
        :duration="5000" //动画时长
        :autoplay="true"  //是否自动播放
        :decimals="2"     //保留小数位数
        decimal="."      //小数点分隔符
        separator="," //分隔符
        prefix="RMB" //前缀
        suffix="万" //后缀
        :useEasing="true" //是否使用缓动效果
        :easingFn="easingFn" //自定义缓动函数
      >
      </count-to>
    </div>

    <script>
      const { createApp, reactive, toRefs, ref } = Vue;
      const vue3Composition = {
        setup() {
          const easingFn = (t) => {  
            alert(123)
            return t * t;
          }
          const countToRef = ref(null)
          const status = (i) => {
            if(i === 0) {
              // 开始
              countToRef.value.start()
            }else if(i === 1) { //暂停
              countToRef.value.pause()
            }else { //复原
              countToRef.value.reset()
            }
          }
          return {easingFn, status, countToRef};
        },
      };
      const app = createApp(vue3Composition);
      app.component("CountTo", CountTo);
      app.mount("#app");
    </script>
  </body>
</html>
  • 写回答

15条回答 默认 最新

  • 专家-赤兔[在线] 优质创作者: 编程框架技术领域 2023-12-02 21:14
    关注
    获得0.60元问题酬金

    引自强大而免费的微信小程序：皆我百晓生。

    您的代码中似乎缺少CountTo组件的定义，可以尝试将以下代码添加到您的脚本中：

    const CountTo = VueCountTo.CountTo;

    另外，我注意到您使用了Vue 3和Vue 3 Count To的CDN链接。但是，如果您想使用Vue 3 Count To的自定义缓动函数功能，您需要使用它的npm包，因为CDN链接不支持这个功能。

    您可以使用以下命令安装Vue 3 Count To的npm包：

    npm install vue3-count-to

    然后，您可以使用以下导入语句来引入Vue 3 Count To的组件和自定义缓动函数功能：

    import { CountTo, easingFn } from 'vue3-count-to';

    注意：由于Vue 3 Count To目前只适用于Vue 3，所以您需要确保您的项目是使用Vue 3版本的Vue.js框架。

    接下来，您可以在组件的setup函数中使用easingFn作为自定义缓动函数，如下所示：

    const { createApp, ref } = Vue;

const App = {
  setup() {
    const easingFn = (t) => {
      // 在这里定义自定义缓动函数的逻辑
    };

    // 其他代码...

    return {
      easingFn,
      // 其他返回值...
    };
  },
};

createApp(App)
  .component('CountTo', CountTo)
  .mount('#app');

    然后您就可以在CountTo组件中使用easingFn prop，并将其设置为自定义缓动函数，如下所示：

    <count-to
  :easingFn="easingFn"
  <!-- 其他 props... -->
></count-to>

    现在，您应该能够成功配置easingFn自定义缓动函数。只需根据您的需求编写缓动函数的逻辑即可。

    评论 编辑记录

报告相同问题？

问题事件

  • 系统已结题 12月10日
  • 赞助了问题酬金15元 12月2日
  • 创建了问题 12月2日