vue 实现一个持续时间定时器组件

vue 实现一个定时器组件

    • 效果图
    • 子组件
    • 父组件

效果图

在这里插入图片描述

子组件

新建一个timer.vue文件

<template><span :class="{red: string >= 600}">{{ string | formatDurationS }}</span>
</template>
<script>export default {name: 'timer',props: {startTimer: {type: [String, Number],default: 0},currentTimer: {type: [String, Number],default: 0}},data() {return {string: '--:--:--', // '00:00:00',step: 0,intervalName: ''}},watch: {currentTimer: {handler: function(nev, oldv) {if (this.intervalName) {clearInterval(this.intervalName)}this.step = this.startTimerlet _str = Math.round((this.currentTimer - this.startTimer) / 1000)this.string = _str < 0 ? 0 : _strthis.intervalName = setInterval(() => {this.string++}, 1000)},immediate: true}},beforeDestroy() {clearInterval(this.intervalName)this.intervalName = null}
}</script>
<style scoped lang="less">
.red {color: #F03E3E;
}
</style>

父组件

导入子组件并注册

<TIMER ref="timerFun" :currentTimer="timeStamp" :startTimer="item.actionTime"></TIMER>import TIMER from '@/components/timer.vue'timeStamp: Date.now(),components: {TIMER
}
  • startTimer: 开始计时的时间戳
  • currentTimer: 当前本地时间时间戳
  • 两者的差值就是起始的持续时间

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/674826.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【十二】【C++】vector用法的探究

vector类创建对象 /*vector类创建对象*/ #if 1 #define _CRT_SECURE_NO_WARNINGS#include <iostream> using namespace std; #include <vector> #include <algorithm> #include <crtdbg.h>class Date {public:Date(int year 1900, int month 1, int …

P2392 kkksc03考前临时抱佛脚题解

题目 这次期末考试&#xff0c;kkksc03需要考4科。因此要开始刷习题集&#xff0c;每科都有一个习题集&#xff0c;分别有s1​,s2​,s3​,s4​道题目&#xff0c;完成每道题目需要一些时间&#xff0c;可能不等&#xff08;A1​,A2​,…,As1​​&#xff0c;B1​,B2​,…,Bs2​…

Mongodb启动为Windows服务开机自启动

注意&#xff1a;mongodb的安装目录不应有中文&#xff0c;如果有&#xff0c;服务启动的路径会出现乱码&#xff0c;导致找不到对应的文件 1.安装好mongoDB 2.创建data目录&#xff0c;并在其中创建db目录和log目录 3.在log目录中创建mongodb.log文件 4.打开cmd&#xff08;用…

(每日持续更新)jdk api之ObjectInputFilter.Status基础、应用、实战

博主18年的互联网软件开发经验&#xff0c;从一名程序员小白逐步成为了一名架构师&#xff0c;我想通过平台将经验分享给大家&#xff0c;因此博主每天会在各个大牛网站点赞量超高的博客等寻找该技术栈的资料结合自己的经验&#xff0c;晚上进行用心精简、整理、总结、定稿&…

计算机网络基本知识(二)

文章目录 概要分层为什么分层怎么分层&#xff1f;1.实体2.协议3.服务 分层基本原则正式认识分层详细例子解释 总结 概要 分层知识&#xff1a;概念理解 分层 为什么分层 大致以上五点 为了解决上面的问题&#xff08;复杂&#xff09; 大问题划分为小问题 怎么分层&#…

代码随想录算法训练营第十五天|102.二叉树的层序遍历、226.翻转二叉树

102.二叉树的层序遍历 刷题https://leetcode.cn/problems/binary-tree-level-order-traversal/description/文章讲解https://programmercarl.com/0102.%E4%BA%8C%E5%8F%89%E6%A0%91%E7%9A%84%E5%B1%82%E5%BA%8F%E9%81%8D%E5%8E%86.html视频讲解https://www.bilibili.com/video…

【前端素材】bootstrap4实现绿色植物Lukani平台

一、需求分析 绿色植物商城是一个专门销售绿色植物的零售商店或在线平台。它提供各种类型和品种的室内植物、室外植物和盆栽等。绿色植物商城的作用可以从以下几个方面来分析&#xff1a; 1. 提供多样化的选择&#xff1a;绿色植物商城通常会提供各种各样的绿色植物选项&…

网络安全产品之认识准入控制系统

文章目录 一、什么是准入控制系统二、准入控制系统的主要功能1. 接入设备的身份认证2. 接入设备的安全性检查 三、准入控制系统的工作原理四、准入控制系统的特点五、准入控制系统的部署方式1. 网关模式2. 控制旁路模式 六、准入控制系统的应用场景七、企业如何利用准入控制系统…

OS X(MACOS) C/C++ 程序链接静态库限制。

在OSX上面C/C程序不被允许完全静态链接&#xff0c;当然无论是 Windows 还是 Linux 上面也没有办法真正做到完全的静态链接。 OSX上面C/C程序静态链接也有一些麻烦跟坑点&#xff0c;我们都知道在OSX上面是使用 brew 工具链来安装程序跟依赖的&#xff0c;它会自动下载目标程序…

分布式系统架构介绍

1、为什么需要分布式架构&#xff1f; 增大系统容量&#xff1a;单台系统的性能瓶颈&#xff0c;多台机器才能应对大规模的应用场景&#xff0c;所以就需要我们的应用支撑平台具备分布式架构。 加强系统的可用&#xff1a;为了满足业务的SLA要求&#xff0c;需要通过分布式架构…

表单标记(html)

前言 发现input的type属性还是有挺多的&#xff0c;这里把一些常用的总结一下。 HTML 输入类型 (w3school.com.cn)https://www.w3school.com.cn/html/html_form_input_types.asp text-文本 文本输入,如果文字太长&#xff0c;超出的部分就不会显示。 定义供文本输入的单行…

Stability AI一种新型随心所欲生成不同音调、口音、语气的文本到语音(TTS)音频模型

该模型无需提前录制人声样本作为参考&#xff0c;仅凭文字描述就能生成所需的声音特征。用户只需描述他们想要的声音特点&#xff0c;例如“一个语速较快、带有英国口音的女声”&#xff0c;模型即可相应地生成符合要求的语音。它不仅能模仿已有的声音&#xff0c;还能根据用户…

(已解决)在vue路由配置中,export const constantRoutes和const routes有什么区别,

在 Vue Router 的配置中&#xff0c;export const constantRoutes 和 const routes 主要是关于变量的作用域和导出方式的不同。 const routes: 只是声明了一个常量 routes&#xff0c;其中可能包含了应用中的路由配置数组。这个常量的作用范围仅限于当前文件&#xff0c;如果不…

Mac使用AccessClient打开Linux堡垒机跳转闪退问题解决

登录公司的服务器需要使用到堡垒机&#xff0c;但是mac使用AccessClient登录会出现问题 最基础的AccessClient配置 AccessClient启动需要设置目录权限&#xff0c;可以直接设置为 权限 777 chmod 777 /Applications/AccessClient.app注: 如果不是这个路径,可以打开终端,将访达中…

OJ刷题:求俩个数组的交集(没学哈希表?快排双指针轻松搞定!)

目录 ​编辑 1.题目描述 2.C语言中的内置排序函数&#xff08;qsort&#xff09; 3.解题思路 3.1 升序 3.2双指针的移动 3.3 保证加入元素的唯一性 4.leetcode上的完整代码 完结散花 悟已往之不谏&#xff0c;知来者犹可追 …

PostgreSQL 与 MySQL 相比,优势何在?

我们将通过一张对比表格详细列出 PostgreSQL 与 MySQL 在不同方面的对比&#xff1a; 对比表格 特性/数据库PostgreSQLMySQL数据类型支持支持JSON/JSONB、数组、区间等高级数据类型基本数据类型支持&#xff0c;JSON支持较普通遵循SQL标准更严格遵循&#xff0c;支持复杂查询…

新增C++max函数的使用

在 C 中&#xff0c;max函数是标准库中的一个函数&#xff0c;用于返回两个或多个元素中的最大值。max函数的声明如下&#xff1a; cpp #include <algorithm>template<class T> const T& max(const T& a, const T& b);这个函数接受两个同类型的参数a…

UML 2.5图形库

UML 2.5图形库 drawio是一款强大的图表绘制软件&#xff0c;支持在线云端版本以及windows, macOS, linux安装版。 如果想在线直接使用&#xff0c;则直接输入网址drawon.cn或者使用drawon(桌案), drawon.cn内部完整的集成了drawio的所有功能&#xff0c;并实现了云端存储&#…

UnityShader:直接光照效果/点光/平行光阴影

效果&#xff1a; 代码&#xff1a; Shader "MyShader/PhongNormal" {Properties{_DiffuseTex("漫反射贴图",2d)"white"{}_AOTex("AO贴图",2d)"white"{}_SpecularMask("高光遮罩",2d)"white"{}_Normal…

Java多线程是什么?七大线程状态总结

前言 大家好&#xff0c;我是chowley&#xff0c;马上大年三十了&#xff0c;提前祝大家新春快乐&#xff0c;这篇来总结一下Java多线程方面内容。 在Java编程中&#xff0c;多线程是一种重要的特性&#xff0c;它允许程序同时执行多个任务&#xff0c;从而提高程序的性能和效…