JSPM

vue-count-down-time

1.0.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q19312F
  • License ISC

count-down-time component for vue

Package Exports

  • vue-count-down-time

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-count-down-time) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

一个基于vue实现的时间倒计时组件

Install

npm i vue-count-down-time
import vueCountdownTime from 'vue-count-down-time';
Vue.use(vueCountdownTime);

在组件内可以传各种参数,支持的参数如下

startTime: {
    type: String | Number,
    default: ''
},
startTimeFormat: {
    type: String,
    default: '%Y-%M-%d %h:%m:%s'
},
endTime: {
    type: String | Number,
    default: ''
},
endTimeFormat: {
    type: String,
    default: '%Y-%M-%d %h:%m:%s'
},
startCallBk: {
    type: Function,
    default: null
},
endCallBk: {
    type: Function,
    default: null
},
showTemplate: {
    type: String,
    default: '${day}天 ${hour}小时 ${min}分钟 ${sec}秒'
},
timeInterval: {
    type: String | Number,
    default: 1000
}

Example

<!-- 支持自定义模板 showTemplate参数 -->
<vue-count-down-time startTime="2020-03-07 20:00:00" endTime="1583586000000"  showTemplate="<span class='bb'>${day}</span><span class='bb'>${hour}</span><span class='bb'>${min}</span><span class='bb'>${sec}</span>" :endCallBk="endCallBk"></vue-count-down-time>
<!--间隔2s 执行一次 有开始回调 和结束回调-->
<vue-count-down-time startTime="2020-03-07 20:59:50" endTime="2020-03-07 21:00:00" :startCallBk="startCallBk" :endCallBk="endCallBk" timeInterval="2000" ></vue-count-down-time>