以下是一个简单的例子,演示如何在 Vant 3 中使用倒计时:
首先,确保你已经安装了 Vant 3:
npm install vant@next
然后,在你的 Vue 项目中,可以这样使用 van-count-down:
<template>
<div>
<van-count-down
v-if="countDown > 0"
:time="countDown"
@change="handleChange"
/>
<div v-else>
倒计时结束
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const countDown = ref(60);
const handleChange = (event) => {
// 倒计时每秒触发一次
console.log('倒计时变化:', event);
};
return {
countDown,
handleChange,
};
},
};
</script>
在上面的例子中,van-count-down 组件通过 :time 属性接收倒计时的时间,单位是秒。当倒计时变化时,可以通过 @change 事件来处理。
记得根据你的实际需求调整代码,这只是一个简单的演示。
转载请注明出处:http://www.pingtaimeng.com/article/detail/5780/Vant