封装Vue倒计时组件vuecountdown(详细教程)

由于开发需要，捣鼓了一个倒计时组件！特此分享，希望帮助到大家

先看效果

倒计时

来看流程，由于组件上传到远程仓库，大家可直接下载使用

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>

组件相关属性：

封装Vue倒计时组件vuecountdown(详细教程)相关推荐

Vue子传父详细教程
子传父通过自定义事件,this.$emit("自定义方法名1",需要传的值)进行传值. 本文父组件:shopping.vue 子组件:shoplist.vue 1.第一步,在父组件 ...
手把手带你分解 Vue 倒计时组件
大家好,我是漫步,今天来分享一个Vue 组件的内部,喜欢记得关注我并设为星标. 一.前言前端开发博客入职的第一个需求是跟着一位前端大佬一起完成的一个活动项目. 由于是一起开发,当然不会放过阅读大佬 ...
封装 Vue.js 组件库
文章前言笔记来源:拉勾教育大前端高薪训练营阅读建议:内容较多,建议通过左侧导航栏进行阅读课程目标开源组件库 Element-UI iView CDD 基本介绍 CDD(Component-D ...
Vue父传子详细教程
本文父组件:shopping.vue 子组件:shoplist.vue 1.父组件引入子组件 1.1.引入组件 import shoplist from '../shoplist.vue' 1.2.注 ...
【Echarts】Vue项目使用echarts详细教程，暗色系柱状图，折线图，环形图等详细配置代码
文章目录一.引入 echarts 二.效果图及其详细代码 2.1.双柱柱状图 2.2.折柱混合图 2.3.堆叠柱状图 2.4.嵌套环形图 2.5.普通环形图一.引入 echarts echarts ...
vux使用方法 php,Vue+Vux项目（详细教程）
本文给大家分享一段详细的代码给大家介绍Vue+Vux项目实践思路,需要的朋友可以参考下提供完整的路由,services""""` -------------- ...
vue excel导入mysql详细教程_Vue前端上传EXCEL文件，后端（springBoot+MyBatis+MySQL）解析EXCEL并批量插入/更新数据库...
文章目录 Vue前端后端 controller层 service层:如何解析Excel文件 MyBatis:实现批量插入在mysql中设置唯一索引Unique Index MySQL中的inser ...
win10安装和搭建vue环境（超详细教程）Vue新手教程(1)：
PS:笔者为计科专业研一在读,最近打算学习Vue,踩了许多坑,在此将学习过程分享出来,后续还会持续更新. 一.安装Vue环境首先,在安装Vue环境之前,我们首先需要安装npm这个玩意. 那么npm这 ...
Vue脚手架搭建及vue项目创建【详细教程】
目录 Vue脚手架环境安装 Vue项目创建 Vue项目目录结构项目运行流程组件结构 Vue脚手架 Vue脚手架指的是vue-cli,它是一个快速构建**单页面应用程序(SPA)**环境配置的工具 ...

封装Vue倒计时组件vuecountdown(详细教程)

封装Vue倒计时组件vuecountdown(详细教程)相关推荐

最新文章

热门文章