更新记录

1.0.2（2024-12-10） 下载此版本

• icon iconfont使用示例组件
• useClick 移动端双击，注意：必定会导致单击事件延迟

1.0.1（2024-12-06） 下载此版本

修复

• SlideContainer 微信小程序无法使用问题

新增

• useClipboard 剪贴板
• useDeepClone 深拷贝
• useEqual 对比
• useGroupBy 分组
• useLocationPermission 定位权限

1.0.0（2024-12-04） 下载此版本

first commit

平台兼容性

简介

一个uniapp + vue3的hooks工具库。 开发中，欢迎提需求、bug。

项目说明

vueuse是一个非常好用的库。但是他在uniapp并不是完全兼容的，小程序、app中也会丢失一些特性。 但是如果是网页端开发还是强烈建议使用vueuse 此插件部分功能会借鉴(copy)vueuse的代码。

功能列表

工具

• useClick

  单击或者双击，用于移动设备，且使用了，单击会有延迟

• useClipboard

  剪贴板

• useCountdown

  倒时器，常用语验证码、订单、优惠券等倒计时

• useDebounce

  防抖，常用于按钮点击、input监听等

• useDeepClone

  深拷贝

• useEqual

  深比较

• useGroupBy

  分组

• useId

  返回一个id

• useNavStatus

  返回自定义导航栏所需数据

• useNow

  当前时间

• usePlatform

  当前平台，可能的值有 "android", "ios", "devtools", "windows"

• useState

  参考react

• useStorage

  响应式本地存储，参考vueuse

• useThrottle

  节流，常用于频繁触发的事件，比如页面滚动监听等

• useTimer

  定时器，setInterval并不支持异步，此方法基于递归等待逻辑，常用于轮询

• useToggle

  开关切换，参考vueuse

• useProgress

  进度，长时间执行的任务场景中，给客户一个百分比进度安慰一下，内部是NProgress修改版

组件

微信小程序请手动引入组件或者使用easycom 而不是import {SlideContainer} from '@/uni_modules/cc-uniuse'

• SlideContainer

  监听滑动方向

• PermissionModal

  权限监听组件，这只是一个demo，可以参考代码自己实现。 文档 插件

权限

相关参考： App权限判断和提示

• useCallPhonePermission

  判断拨打电话权限，目前仅支持安卓

• useCameraPermission

  相机权限

• useLocationPermission

  定位权限

• usePhotoLibraryPermission

  相册权限

• useRecordAudioPermission

  录音权限

使用说明

直接导入到uni_modules即可

这里演示倒时器，其余参考完整示列

<template>
    <view>
        <view>
            <button :disabled="remainingDuration!=0" @click="getCode">
                {{ remainingDuration==0 ? '点击获取验证码' : `${remaining}后可以再次获取` }}
            </button>
            <button @click="start('ss.SSS \s')" :disabled="remainingDuration==0 || isRunning">恢复</button>
            <button @click="stop" :disabled="!isRunning">暂停</button>
            <button @click="setDuration(0)">清除</button>

        </view>
    </view>
</template>

<script setup>
    import {
        useCountdown
    } from '@/uni_modules/cc-uniuse'

    const {
        remaining, // 格式化之后的剩余时间
        remainingDuration, // 剩余时间
        start,
        stop,
        setDuration, // 初始使用在start之前设置,也可以用于清空定时器
        isRunning
    } = useCountdown()

    const getCode = () => {
        setDuration(5 * 1000)
        start('ss.SSS \s')
    }
</script>