返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue2.0中如何使用countdown倒计时组件
  • 407
分享到

vue2.0中如何使用countdown倒计时组件

2024-04-02 19:04:59 407人浏览 泡泡鱼
摘要

这期内容当中小编将会给大家带来有关Vue2.0中如何使用countdown倒计时组件,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。安装npm install vue2-c

这期内容当中小编将会给大家带来有关Vue2.0中如何使用countdown倒计时组件,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

安装

npm install vue2-countdown --save

使用组件

首先在模板部分添加:

<template>
 <div>
<count-down 
 v-on:start_callback="countDownS_cb(1)" 
 v-on:end_callback="countDownE_cb(1)" 
 :currentTime="1538983555" 
 :startTime="1538983555" 
 :endTime="1538983565" 
 :dayTxt="'天'" 
 :hourTxt="'小时'" 
 :minutesTxt="'分钟'" 
 :secondsTxt="'秒'">
 </count-down>
</div>
</template>

然后在js部分:

<script>
import CountDown from 'vue2-countdown'

export default {
 components: {
  CountDown
 },
 methods: {
  countDownS_cb: function (x) {
   console.log(x)
  },
  countDownE_cb: function (x) {
   console.log(x)
  }
 }
}
</script>

选项

名称默认值描述
currentTime( new Date() ).getTime()当前时间戳,如果不传,默认获取用户本地的时间(建议传服务器的当前时间)
startTime
开始时间戳,必需
endTime
结束时间戳,必需
tipText距离开始开始倒计时之前的提示文字
tipTextEnd距离结束开始倒计时之后的提示文字
endText已结束倒计时结束之后的提示文字
dayTxt:自定义显示的天数文字
hourTxt:自定义显示的小时文字
secondsTxt:自定义显示的分钟文字
secondsFixed:自定义显示的秒数文字

回调函数

名称默认值描述
start_callback开始倒计时结束之后的回调方法
end_callback活动倒计时结束之后的回调方法

上述就是小编为大家分享的vue2.0中如何使用countdown倒计时组件了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注编程网JavaScript频道。

--结束END--

本文标题: vue2.0中如何使用countdown倒计时组件

本文链接: https://lsjlt.com/news/78289.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue2.0中如何使用countdown倒计时组件
    这期内容当中小编将会给大家带来有关vue2.0中如何使用countdown倒计时组件,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。安装npm install vue2-c...
    99+
    2024-04-02
  • angular倒计时组件如何使用
    这篇文章主要介绍“angular倒计时组件如何使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“angular倒计时组件如何使用”文章能帮助大家解决问题。组件cou...
    99+
    2024-04-02
  • 如何在canvas中使用环形倒计时组件
    这篇文章将为大家详细讲解有关如何在canvas中使用环形倒计时组件,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。Canvas环形倒计时组件Canvas环形倒计时是基于Canvas实现的倒计时...
    99+
    2023-06-09
  • React如何实现倒计时组件
    这篇文章将为大家详细讲解有关React如何实现倒计时组件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。倒计时组件&mdash;&mdash;需求描述:写一个函数式组件CountDown,设...
    99+
    2023-06-29
  • 如何利用momentJs做一个倒计时组件
    今天就跟大家聊聊有关如何利用momentJs做一个倒计时组件,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。vue和moment做的一个倒计时展示样式:<template>...
    99+
    2023-06-22
  • 利用Android设计一个倒计时组件
    目录1 背景2 对比分析2.1 是否是倒计时2.2 支持多任务2.3 支持时间校准2.4 支持同帧刷新2.5 支持延迟执行2.6 支持CPU休眠3 需求目标4 设计类结构5 具体实现...
    99+
    2024-04-02
  • vue如何设计一个倒计时秒杀的组件
    这篇文章将为大家详细讲解有关vue如何设计一个倒计时秒杀的组件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。简介:倒计时秒杀组件在电商网站中层出不穷  不过思路...
    99+
    2024-04-02
  • Win10如何使用计时器(倒计时)测量时间
      Win10的新版闹钟应用里包含闹钟、秒表、计时器、世界时间四个跟时间设置有关的小软件,我们介绍了闹钟和秒表的使用。那么如何使用计时器呢   打开倒计时   如何设置   我们可以使用鼠标移动圆圈的结束按钮,设置我们的...
    99+
    2023-06-12
    Win10 计时器 时间 测量 倒计时
  • 如何使用JavaScript制作倒计时牌
    这篇文章主要为大家展示了“如何使用JavaScript制作倒计时牌”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用JavaScript制作倒计时牌”这篇文章吧。  把下面的JavaScri...
    99+
    2023-06-03
  • 微信小程序倒计时组件怎么用
    这篇文章主要介绍“微信小程序倒计时组件怎么用”,在日常操作中,相信很多人在微信小程序倒计时组件怎么用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”微信小程序倒计时组件怎么用”的疑惑有所帮助!接下来,请跟着小编...
    99+
    2023-06-26
  • bootstrap中select插件如何封装成Vue2.0组件
    这篇文章主要介绍bootstrap中select插件如何封装成Vue2.0组件,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!因为bootstrap-select功能比较强大,而且样式...
    99+
    2024-04-02
  • Android 中不用线程如何实现倒计时
    需求: 有多个组件可以开启倒计时,正常情况下默认倒计时时间终了后更新UI,另,用户可以取消指定倒计时。 这里使用CountDownTimer进行倒计时,其中回调函数onFini...
    99+
    2022-06-06
    倒计时 线程 Android
  • 如何使用jQuery插件开发发送短信倒计时功能
    小编给大家分享一下如何使用jQuery插件开发发送短信倒计时功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!实现的主要功能如下...
    99+
    2024-04-02
  • 利用momentJs做一个倒计时组件(实例代码)
    今天抽空给大家介绍下vue和moment做的一个倒计时,具体内容如下所示: 展示样式: <template> <div class="table-ri...
    99+
    2024-04-02
  • Android中如何实现倒计时验证
    这篇文章主要介绍了Android中如何实现倒计时验证,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。短信验证码功能,这里总结了两种常用的方式,可以直接拿来使用。看图:说明:这里...
    99+
    2023-05-31
    android
  • CSS3中如何实现倒计时效果
    小编给大家分享一下CSS3中如何实现倒计时效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!实现效果实现代码html<div class='...
    99+
    2023-06-08
  • 如何使用原生js实现倒计时功能
    这篇文章给大家分享的是有关如何使用原生js实现倒计时功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。<!DOCTYPE html><html&nbs...
    99+
    2024-04-02
  • jquery如何实现倒计时小应用
    这篇文章主要为大家展示了“jquery如何实现倒计时小应用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jquery如何实现倒计时小应用”这篇文章吧。具体内容如...
    99+
    2024-04-02
  • 如何用bash进行倒计时日期
    本篇文章给大家分享的是有关如何用bash进行倒计时日期,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。导读需要知道重要事件发生前有多少天吗?让 Linux b...
    99+
    2023-06-05
  • Android中怎么使用flow实现倒计时
    本篇内容主要讲解“Android中怎么使用flow实现倒计时”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Android中怎么使用flow实现倒计时”吧!现在因为有了协程和Flow,我们可以借助...
    99+
    2023-06-30
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作