Countdown

Countdown

demo 原始链接编辑文档组件源码

countdown - 图1

二维码

安装

局部注册

全局注册

  1. import { Countdown } from 'vux'
  3. export default {
  4.   components: {
  5.     Countdown
  6.   }
  7. }

  1. // 在入口文件全局引入
  3. import Vue from 'vue'
  4. import { Countdown } from 'vux'
  6. Vue.component('countdown', Countdown)

Examples自动倒计时
自动倒计时

countdown - 图2

  1. <template>
  2.   <div>
  3.     <group :title=" $t('Automatic countdown') ">
  4.       <cell title="15s" v-model="value">
  5.         <countdown v-model="time" @on-finish="finish" v-show="show"></countdown>
  6.       </cell>
  7.     </group>
  8.   </div>
  9. </template>
  11. <script>
  12. import { Countdown, Group, Cell } from 'vux'
  14. export default {
  15.   components: {
  16.     Countdown,
  17.     Cell,
  18.     Group
  19.   },
  20.   data () {
  21.     return {
  22.       show: true,
  23.       time: 15,
  24.       value: ''
  25.     }
  26.   },
  27.   methods: {
  28.     finish (index) {
  29.       this.show = false
  30.       this.value = 'completed'
  31.       console.log('current index', index)
  32.     }
  33.   }
  34. }
  35. </script>

countdown - 图3 Show code

手动模式
手动模式

countdown - 图4

  1. <template>
  2.   <div>
  3.     <group :title=" $t('Manually') ">
  4.       <x-switch :title=" $t('Start') " v-model="start"></x-switch>
  5.       <cell title="15s">
  6.         <countdown v-model="time" :start="start" @on-finish="finish"></countdown>
  7.       </cell>
  8.     </group>
  9.   </div>
  10. </template>
  12. <script>
  13. import { Countdown, Group, Cell, XSwitch } from 'vux'
  15. export default {
  16.   components: {
  17.     Countdown,
  18.     Cell,
  19.     Group,
  20.     XSwitch
  21.   },
  22.   data () {
  23.     return {
  24.       time: 15,
  25.       value: '',
  26.       start: false
  27.     }
  28.   },
  29.   methods: {
  30.     finish (index) {
  31.       this.start = false
  32.       this.time = 20
  33.     }
  34.   }
  35. }
  36. </script>

countdown - 图5 Show code

API

属性

名字类型默认值说明版本要求
valuenumber时间，秒为单位—
startbooleantrue是否开始计数—

贡献者

贡献者

该组件(包含文档)迭代次数 5，贡献人数 1
airyland

Changelog

发布日志

  • v2.0.0 [deprecated] 下一版本开始不再维护