更新记录

0.0.1（2025-12-11） 下载此版本

初始发布

• 发布 useCodeTimer 验证码倒计时管理函数
• 支持基本倒计时功能
• 支持状态保存与恢复
• 支持暂停/继续功能
• 支持精确计时

平台兼容性

uni-app(4.84)

uni-app x(4.84)

lime-use

一个功能丰富的 Vue 组合式函数库，提供各种实用的工具函数，帮助开发者提高开发效率。

文档链接

📚 组件详细文档请访问以下站点：

• lime-use 文档 - 站点1
• lime-use 文档 - 站点2
• lime-use 文档 - 站点3

安装方法

1. 在 uni-app 插件市场中搜索并导入 lime-use
2. 导入后可能需要重新编译项目
3. 在组件中使用所需的组合式函数

函数列表

useCodeTimer

简介

useCodeTimer 是一个用于管理验证码倒计时的 Vue 组合式函数，支持倒计时状态的保存与恢复，适用于各种需要验证码功能的场景。

功能特性

• 基本倒计时：提供从指定秒数倒计时到0的功能
• 状态显示：自动管理倒计时过程中的文本显示
• 状态保存与恢复：支持页面刷新后保持倒计时状态
• 事件回调：提供开始和结束时的回调函数
• 手动控制：支持手动开始、重置和停止倒计时
• 暂停/继续：支持暂停和继续倒计时
• 精确计时：基于时间戳的精确倒计时计算

代码演示

HTML 模板

<button @click="handleGetCode" :disabled="!canGetCode">{{ tip }}</button>
<button @click="handleReset">重置</button>
<button @click="handleStop">停止</button>
<button @click="handlePause" :disabled="!isRunning">暂停</button>
<button @click="handleResume" :disabled="!isPaused">继续</button>

TypeScript 使用方式

// TypeScript 用户使用方式（推荐）
import { useCodeTimer, type UseCodeTimerOptions } from '@/uni_modules/lime-use'

// 或者使用原有的导入方式
// import { useCodeTimer, type UseCodeTimerOptions } from '@/uni_modules/lime-use/useCodeTimer'

// 使用 useCodeTimer 组合式函数
const { 
  tip,                // 当前显示的文本
  canGetCode,         // 是否可以重新获取验证码
  start,              // 开始倒计时
  reset,              // 重置倒计时
  stop,               // 停止倒计时
  pause,              // 暂停倒计时
  resume,             // 继续倒计时
  isPaused,           // 是否处于暂停状态
  secondsRemaining    // 当前剩余秒数
} = useCodeTimer({
  seconds: 120,                    // 倒计时总秒数
  startText: '获取验证码',          // 倒计时开始前显示的文本
  changeText: '重新获取 (X秒)',     // 倒计时进行中显示的文本，X会被替换为剩余秒数
  endText: '重新获取',              // 倒计时结束后显示的文本
  keepRunning: true,               // 是否在页面刷新后保持倒计时状态
  uniqueKey: 'myCodeTimer',        // 用于本地存储的唯一键名，避免多个倒计时冲突
  interval: 1000,                  // 定时器间隔（毫秒），不支持 UNI-APP-X 环境
  onStart: () => {
    console.log('倒计时开始')       // 倒计时开始时的回调函数
  },
  onEnd: () => {
    console.log('倒计时结束')       // 倒计时结束时的回调函数
  }
} as UseCodeTimerOptions)

// 处理获取验证码
const handleGetCode = () => {
  // 调用接口发送验证码
  // ...

  // 开始倒计时
  start()
}

// 处理重置倒计时
const handleReset = () => {
  // 重置倒计时
  reset()
}

// 处理停止倒计时
const handleStop = () => {
  // 停止倒计时（会保存当前状态）
  stop()
}

// 处理暂停倒计时
const handlePause = () => {
  pause()
}

// 处理继续倒计时
const handleResume = () => {
  resume()
}

// 计算是否正在运行
const isRunning = computed(() => !canGetCode.value && !isPaused.value)

JavaScript 使用方式

// JavaScript 用户可以这样使用（推荐）
import { useCodeTimer } from '@/uni_modules/lime-use'

// 或者使用原有的导入方式
// import { useCodeTimer } from '@/uni_modules/lime-use/useCodeTimer'

// 使用 useCodeTimer 组合式函数
const { 
  tip,                // 当前显示的文本
  canGetCode,         // 是否可以重新获取验证码
  start,              // 开始倒计时
  reset,              // 重置倒计时
  stop,               // 停止倒计时
  pause,              // 暂停倒计时
  resume,             // 继续倒计时
  isPaused,           // 是否处于暂停状态
  secondsRemaining    // 当前剩余秒数
} = useCodeTimer({
  seconds: 120,                    // 倒计时总秒数
  startText: '获取验证码',          // 倒计时开始前显示的文本
  changeText: '重新获取 (X秒)',     // 倒计时进行中显示的文本，X会被替换为剩余秒数
  endText: '重新获取',              // 倒计时结束后显示的文本
  keepRunning: true,               // 是否在页面刷新后保持倒计时状态
  uniqueKey: 'myCodeTimer',        // 用于本地存储的唯一键名，避免多个倒计时冲突
  interval: 1000,                  // 定时器间隔（毫秒），不支持 UNI-APP-X 环境
  onStart: () => {
    console.log('倒计时开始')       // 倒计时开始时的回调函数
  },
  onEnd: () => {
    console.log('倒计时结束')       // 倒计时结束时的回调函数
  }
})

API 文档

Options 选项

返回值

使用注意事项

1. 唯一性键名：使用 keepRunning 选项时，需要提供唯一的 uniqueKey 以避免冲突
2. 数据隔离：倒计时状态会保存在本地存储中，建议合理设置 uniqueKey 以确保数据隔离
3. 自动保存：在组件卸载时，倒计时状态会自动保存（如果启用了 keepRunning）
4. 事件触发：恢复倒计时时，会自动触发 onStart 回调
5. 精确计时：该函数使用基于时间戳的计算方式，确保长时间运行时的计时精度

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助