v3-use-composables

内置组合式函数使用教程

项目在 src/common/composables 目录下提供了一组通用组合式函数，通过路径别名 @@/composables/ 导入。

本 Skill 定义的是项目内置的组合式函数，当这些函数不存在时，以用户需求为准，新增对应函数。

设备检测 useDevice

判断当前设备类型（移动端 / 桌面端），基于 appStore.device 的响应式计算属性。

import { useDevice } from "@@/composables/useDevice"

const { isMobile, isDesktop } = useDevice()

// 在模板或逻辑中使用
if (isMobile.value) {
  // 移动端逻辑
}

异步下拉选择器 useFetchSelect

封装下拉选择器的异步数据加载逻辑，组件挂载时自动调用接口获取选项。

import { useFetchSelect } from "@@/composables/useFetchSelect"
import { getSelectDataApi } from "./apis/xxx"

const { loading, options, value } = useFetchSelect({
  api: getSelectDataApi // 直接传函数引用，返回 ApiResponseData<SelectOption[]>
})

在模板中配合 Element Plus 使用：

<el-card v-loading="loading">
  <el-select v-model="value" filterable>
    <el-option v-for="item in options" v-bind="item" :key="item.value" placeholder="请选择" />
  </el-select>
</el-card>

接口返回的数据格式：

interface SelectOption {
  value: string | number
  label: string
  disabled?: boolean
}

全屏加载 useFullscreenLoading

包装一个函数，在其执行期间自动显示全屏 Loading，函数执行完毕后自动关闭。

import { useFullscreenLoading } from "@@/composables/useFullscreenLoading"

// 方式一：行内调用（推荐简单场景）
const res = await useFullscreenLoading(getSuccessApi)([1, 2, 3])

// 方式二：自定义 Loading 配置
try {
  await useFullscreenLoading(getErrorApi, { text: "删除中...", background: "#F56C6C20" })()
} catch (error) {
  ElMessage.error((error as Error).message)
}

// 方式三：先赋值再调用（适合多次复用）
const submitWithLoading = useFullscreenLoading(submitApi)
await submitWithLoading(formData)

分页 usePagination

封装分页状态与操作，适配 Element Plus 的 el-pagination 组件。

import { usePagination } from "@@/composables/usePagination"

function getTableData() {
  // 请求表格数据，并更新 paginationData.total
}

const { paginationData, resetCurrentPage, watchPagination } = usePagination({
  callback: getTableData,
  pageSize: 20,
  pageSizes: [10, 20, 50, 100]
})

// 初始化加载，并在 currentPage / pageSize 变化时重新请求
watchPagination()

function handleSearch() {
  resetCurrentPage()
}