由于开发需要,捣鼓了一个倒计时组件!特此分享,希望帮助到大家
先看效果
倒计时
来看流程,由于组件上传到远程仓库,大家可直接下载使用
npm下载
npm install --save-dev dircountdown
cnpm下载
cnpm install --save-dev dircountdown
页面代码
<template>
<div class="box">
<button @click="startCount">开始计时</button>
<div class="myCountdown">
<count-down
:start="startSecond"
end="0"
style="color: #fff"
v-on:endcallback="endFn"
:autoshow="false"
splitsymbol="时-分-秒"
:autostart="false"
ref="countdown"
></count-down></div
</div>
</template>
<script>
import CountDown from "dircountdown";
export default {
data() {
return {
startSecond: "120", //开始时间,以秒为单位
};
},
methods: {
//倒计时启动事件
startCount() {
this.$refs.countdown.countTime();
console.log("999", this.$refs.countdown);
},
//弹窗事件
endFn() {
alert("考试时间到!请切到最後一題提交答案");
},
},
components: { CountDown },
};
</script>
<style lang="scss" scoped>
.box {
height: 50px;
display: flex;
justify-content: space-between; //样式可以根据自己需求写
align-items: center;
background-color: #79213a;
color: #fff;
padding: 0 10px;
}
</style>
组件相关属性: