作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我是 Vuejs 的新手,我正在使用 vue-countup-v2 npm 包我安装它,然后将它导入到我的 Vue 组件中,当我加载页面时它工作得很好,但重点是我想调用组件 计数当向下滚动屏幕而不是在我加载页面时。在 vu-countup-v2 包,有一个方法叫开始()我可以触发它,但我不知道如何。
这是代码:
<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>
最佳答案
我为将来需要专业知识的任何人解决了这个问题:
在 中使 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;
})
},
关于javascript - 如何在 vue 中触发 npm 包内的方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65749661/
我在一个 twig 模板中使用 Assetic 来指定要从我的包中使用的 2 个 JS 文件 { % javascripts '@JiraExtendedReportsBund
我正在做一个 VS 包,它在菜单中有一个 DynamicItemStart 按钮。我在 VS 启动时加载动态按钮的内容没有任何问题,但我试图在某些事件(例如打开项目)之后向其内容添加更多命令。我将新命
需求是从plsql调用java方法,我可以通过loadjava命令来实现它。我遵循的步骤是: 第 1 步:创建 Java Class/jar 文件并将其放置在 Unix 机器上 第2步:将Java C
我是一名优秀的程序员,十分优秀!