iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > 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://www.lsjlt.com/news/78289.html(转载时请注明来源链接)

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

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue2.0中如何使用countdown倒计时组件
    这期内容当中小编将会给大家带来有关vue2.0中如何使用countdown倒计时组件,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。安装npm install vue2-c...
    99+
    2022-10-19
  • angular倒计时组件如何使用
    这篇文章主要介绍“angular倒计时组件如何使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“angular倒计时组件如何使用”文章能帮助大家解决问题。组件cou...
    99+
    2022-10-19
  • 如何在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
  • vue如何设计一个倒计时秒杀的组件
    这篇文章将为大家详细讲解有关vue如何设计一个倒计时秒杀的组件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。简介:倒计时秒杀组件在电商网站中层出不穷  不过思路...
    99+
    2022-10-19
  • Win10如何使用计时器(倒计时)测量时间
      Win10的新版闹钟应用里包含闹钟、秒表、计时器、世界时间四个跟时间设置有关的小软件,我们介绍了闹钟和秒表的使用。那么如何使用计时器呢   打开倒计时   如何设置   我们可以使用鼠标移动圆圈的结束按钮,设置我们的...
    99+
    2023-06-12
    Win10 计时器 时间 测量 倒计时
  • 如何使用JavaScript制作倒计时牌
    这篇文章主要为大家展示了“如何使用JavaScript制作倒计时牌”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用JavaScript制作倒计时牌”这篇文章吧。  把下面的JavaScri...
    99+
    2023-06-03
  • 如何使用jQuery插件开发发送短信倒计时功能
    小编给大家分享一下如何使用jQuery插件开发发送短信倒计时功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!实现的主要功能如下...
    99+
    2022-10-19
  • Android 中不用线程如何实现倒计时
    需求: 有多个组件可以开启倒计时,正常情况下默认倒计时时间终了后更新UI,另,用户可以取消指定倒计时。 这里使用CountDownTimer进行倒计时,其中回调函数onFini...
    99+
    2022-06-06
    倒计时 线程 Android
  • 如何使用原生js实现倒计时功能
    这篇文章给大家分享的是有关如何使用原生js实现倒计时功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。<!DOCTYPE html><html&nbs...
    99+
    2022-10-19
  • 如何使用Python实现windows倒计时锁屏功能
    实现思路1)主要介绍了python实现windows倒计时锁屏功能python实现实windows倒计时锁屏功能 # 倒计时锁屏 import time from ctypes import * def closewindows(close...
    99+
    2023-05-14
    Python Windows
  • 如何在Android中使用Handler与Countdowntimer实现一个倒计时功能
    本篇文章为大家展示了如何在Android中使用Handler与Countdowntimer实现一个倒计时功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。实现方法去除actionBar闪屏页面一般都...
    99+
    2023-05-31
    android handler countdowntimer
  • 如何使用CSS制作倒计时效果的实现步骤
    如何使用CSS制作倒计时效果的实现步骤倒计时效果是网页开发中常见的一个功能,可以为用户呈现倒计时的动态效果,给人以紧迫感和期待感。本文将介绍如何使用CSS来实现倒计时效果,并给出详细的实现步骤和代码示例。实现步骤如下:步骤一:HTML结构搭...
    99+
    2023-10-26
    CSS 制作 倒计时
  • 如何使用PHP开发微信小程序的倒计时功能?
    如何使用PHP开发微信小程序的倒计时功能?随着移动互联网的发展,微信小程序已经成为了人们生活中不可或缺的一部分,越来越多的开发者也开始关注微信小程序的开发。而倒计时功能作为一种常用的功能,在微信小程序中也是十分常见的。本文将介绍如何使用PH...
    99+
    2023-10-26
    PHP 微信小程序 倒计时
  • 如何使用JavaScript创建一个兔年春节倒数计时器
    这篇文章主要介绍了如何使用JavaScript创建一个兔年春节倒数计时器的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇如何使用JavaScript创建一个兔年春节倒数计时器文章都会有所收获,下面我们一起来看看吧...
    99+
    2023-07-04
  • amazeui如何使用时间组件
    这篇文章给大家分享的是有关amazeui如何使用时间组件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、总结一句话总结:图标是字体样式:input右侧的字体图标是字体样式,所以要引入字体文件,随便找一个项目把里...
    99+
    2023-06-09
  • Android如何使用RxBinding与RxJava2实现短信验证码倒计时功能
    这篇文章给大家分享的是有关Android如何使用RxBinding与RxJava2实现短信验证码倒计时功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。场景:注册账号页面时,我们点击按钮发送验证码,在等待验证码时...
    99+
    2023-05-30
    android
  • 如何在python中利用tkinter在屏幕中间实现一个倒计时功能
    如何在python中利用tkinter在屏幕中间实现一个倒计时功能?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。Python主要用来做什么Python主要应用于:1、Web...
    99+
    2023-06-07
  • bootstrap组件中如何使用导航组件
    这篇文章主要介绍了bootstrap组件中如何使用导航组件,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。Bootstrap 中的导航组件都依...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作