更新记录

0.0.1（2024-09-23） 下载此版本

• init

平台兼容性

lime-count-down 倒计时

• 用于实时展示倒计时数值，支持毫秒精度。兼容uniapp/uniappx(web,ios,安卓)

安装

• 在市场导入插件即可在任意页面使用，无须再import

代码演示

基础用法

time 属性表示倒计时总时长，单位为毫秒。

<l-count-down :time="time" />

const time = ref(30 * 60 * 60 * 1000);

自定义格式

通过 format 属性设置倒计时文本的内容。

<l-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />

毫秒级渲染

倒计时默认每秒渲染一次，设置 millisecond 属性可以开启毫秒级渲染。

<l-count-down millisecond :time="time" format="HH:mm:ss:SS" />

自定义样式

通过插槽自定义倒计时的样式，timeData 对象格式见下方表格。

<l-count-down :time="time">
    <template #default="{ hours, minutes, seconds }">
        <text class="block">{{ hours }}</text>
        <text class="colon">:</text>
        <text class="block">{{ minutes }}</text>
        <text class="colon">:</text>
        <text class="block">{{ seconds }}</text>
    </template>
</l-count-down>

<style>
  .colon {
    margin: 0 4px;
    color: #1989fa;
  }
  .block {
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #1989fa;
  }
</style>

手动控制

通过 ref 获取到组件实例后，可以调用 start、pause、reset 方法。

<l-count-down
  ref="countDown"
  millisecond
  :time="3000"
  :auto-start="false"
  format="ss:SSS"
  @finish="onFinish"
/>

const time = ref(30 * 60 * 60 * 1000)
const countDown = ref<LCountDownComponentPublicInstance | null>(null);

const start = () => {
    if (countDown.value == null) return
    countDown.value!.start();
};
const pause = () => {
    if (countDown.value == null) return
    countDown.value!.pause();
};
const reset = () => {
    if (countDown.value == null) return
    countDown.value!.reset();
};

const onFinish = () => console.log('倒计时结束');

查看示例

• 导入后直接使用这个标签查看演示效果

  // 代码位于 uni_modules/lime-count-down/compoents/lime-count-down
  <lime-count-down />

插件标签

• 默认 l-count-down 为 component
• 默认 lime-count-down 为 demo

API

Props

format 格式

Events

Slots

CurrentTime 格式

方法

通过 ref 可以获取到 CountDown 实例并调用实例方法。

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式。

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。