@wuipkg/hooks

基于业务的高度抽象的 Vue 3 自定义 Hooks 函数库，针对常见中后台管理或 H5 需求进行了特化整合。

安装

pnpm install @wuipkg/hooks

API 详细说明与使用示例

1. useBackground

对具有整体底色设定的特定页面提供便捷的全局 body Background 更换与清理机制。在组件激活时注册并在销毁时主动除迹。

• 暴露属性: setBg(newBg), removeBg()

用法示例：

<template>
  <div class="page-container">
    <button @click="setBg('#333')">修改深色背景</button>
  </div>
</template>

<script setup lang="ts">
import { useBackground } from '@wuipkg/hooks'

// 页面一挂载，自动将 body 背景设为暗灰
// 当组件销毁 (Unmounted) 或页面失活 (Deactivated) 时，背景将被恢复为无配置。
const { setBg } = useBackground('#F5F5F5')
</script>

2. useRouteParams

快速接管和映射 vue-router 参数引用的组合。

• 返回值: Record<string, T> 响应式的路由参数。

用法示例：

<script setup lang="ts">
import { useRouteParams } from '@wuipkg/hooks'
import { watchEffect } from 'vue'

// 泛型规范期望 URL 获取到的参数键值
const params = useRouteParams<{ id: string }>()

watchEffect(() => {
  console.log('读取到的路由上的有效 ID 参数：', params.id)
})
</script>

3. useCountDown

高精度且具备微任务/渲染帧级生命周期控制的倒计时 Hook，内建了解决服务端渲染、浏览器失活环境下的时间重准补偿逻辑。

• 暴露属性: start(), pause(), reset(totalTime?: number), current(ComputedRef<CurrentTime>)

用法示例：

<template>
  <div>
    距离活动结束还剩：
    {{ current.days }}天 {{ current.hours }}时 {{ current.minutes }}分 {{ current.seconds }}秒
  </div>
</template>

<script setup lang="ts">
import { useCountDown } from '@wuipkg/hooks'

const { start, pause, reset, current } = useCountDown({
  time: 24 * 60 * 60 * 1000, // 设定 1 天毫秒数
  onChange: (curTime) => {
    // 每次数字变换时触发
  },
  onFinish: () => {
    console.log('倒计时最终耗尽结束！')
  }
})

// 控制开始
start()
</script>

4. useBaseTable

标准列表与表格数据流的查询控制器系统，支持外部接管并内置加载、自动分页和远端加载对接策略。

• 暴露属性: list, refresh(), onSearch(), onPageChange(), onPageSizeChange()

用法示例：

<template>
  <div>
    <!-- 绑定期检索表单对象 -->
    <input v-model="searchModel.keyword" placeholder="搜索关键词" />
    <button @click="onSearch">搜索此词</button>

    <!-- 列表实体呈现 -->
    <ul v-loading="list.loading">
      <li v-for="item in list.data" :key="item.id">{{ item.name }}</li>
    </ul>

    <!-- 挂接分页器 -->
    <Pagination 
      :current="list.page" 
      :total="list.total" 
      @change="onPageChange" 
    />
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { useBaseTable } from '@wuipkg/hooks'

// 结合外部的检索用响应表单
const searchModel = reactive({ keyword: '' })

// 模拟 API 拉取
const mockApiFetch = async (params) => {
  const { page, pageSize, keyword } = params
  return {
    data: [{ id: 1, name: `Result for ${keyword}` }],
    total: 100
  }
}

const { list, refresh, onSearch, onPageChange } = useBaseTable({
  defaultPage: 1,
  defaultPageSize: 10,
  search: searchModel, // 自动和查询组件建立映射联通关系
  autoLoad: true, // 组件生命周期触发加载
  beforeSearch: (params) => {
    // 对即将去发信的结构进行重组过滤或抛弃拦截
    if (!params.keyword) {
       console.log('允许无参检索')
    }
    return true
  },
  request: mockApiFetch
})
</script>