@dreamjser/countdown-circle-vue

安装

npm/yarn/pnpm 安装

npm i @dreamjser/countdown-circle-vue

yarn add @dreamjser/countdown-circle-vue

pnpm add @dreamjser/countdown-circle-vue

引入组件

// 引入样式文件
import '@dreamjser/countdown-circlev-vue/es/style.css'
// 引入组件
import CountdownCircle from '@dreamjser/countdown-circlev-vue'

组件实例

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { CountdownCircle } from '@dreamjser/countdown-circle-vue'

const countdown = ref<InstanceType<typeof CountdownCircle> | null>(null)

onMounted(() => {
  (countdown.value as any).run()
})
</script>

<template>
  <CountdownCircle ref="countdown" :time-out="20" circle-color="red"></CountdownCircle>
</template>

组件属性

参数	说明	类型	默认值
timeOut	倒计时时间	number	10
circleColor	倒计时圆环颜色	string	#000

组件方法

方法名	说明	回调参数
run	开始倒计时	-