如何在 vue 中触发 npm 包内的方法？

Posted 2023-02-23

【中文标题】如何在 vue 中触发 npm 包内的方法？

【英文标题】：How to trigger a method inside npm package in vue?

【发布时间】：2021-04-21 06:47:59

【问题描述】：

我是 Vuejs 的新手，我正在使用 vue-countup-v2 npm 包我安装它，然后将它导入我的 Vue 组件中，当我加载页面时它工作完美，但是关键是我想在向下滚动屏幕时调用组件 CountUp，而不是在加载页面时调用组件。在 vu-countup-v2 包中，有一个方法叫 start() 我可以触发它，但我不知道如何。

代码如下：

---

  <template>
  <div id="main-wrapper" class="flex justify-around w-full p-12 my-12">
      <CountUp
           id="count-up"
           :delay="delay"
           :endVal="endVal[index]"
           :options="options"
      />
  </div>
  </template>

<script>
import CountUp from 'vue-countup-v2';
import inViewport from 'in-viewport';

export default 
  name: "NumberAnime",
  components: 
    CountUp,
  ,

  data() 
    return 
      delay: 1000,
      endVal: [40, 300000, 25000, 350],
      options: 
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.',
        prefix: '',
        suffix: '',
      
    
  ,

  mounted() 
    inViewport('elementId', 'the function I want to callback')
  ,

</script>

【问题讨论】：

我试过了，还是不行，错误是：TypeError: this.$refs.count.start is not a function

如果有人能弄清楚这个包是如何工作的，那很简单，但我不知道在向下滚动页面时如何运行它

您是否在 CountUp 上设置了参考名称

是的，我做到了：<CountUp ref="count" :delay="delay" :endVal="endVal[index]" :options="options" />

我有 console.log(this.$refs.count.start)，它是一个函数 :)

【参考方案1】：

我为将来需要专业知识的人解决了这个问题：

在 count 标记中使 v-if 条件为假，向下滚动时使条件为真以开始运行

<div id="before_count_div" class="text-4xl flex items-end">
            <CountUp
                v-if="options.begin == true"
                id="count"
                :delay="delay"
                :endVal="endVal[index]"
                :options="options"
            />
          </div>

在数据中：

options: 
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.',
        prefix: '',
        suffix: '',
        begin: false,
      

在挂载中：

mounted() 
    const el = document.getElementById('before_count_div');
    inViewport(el, () => 
      this.options.begin = true;
    )
  ,

【参考方案2】：

如果我理解正确，请使用 ref 可能的词

<CountUp
       ref="count"
/>

this.$refs.count.start()