Hooks

基于Vue3 Composition API，我们可以提炼各种通用业务场景的工具函数，方便复用。

在现代前端项目研发过程中，一套好用的 Hooks 函数是必不可少的，希望框架中的Hooks可以帮助到您。

useRequest

默认用法

useRequest 的第一个参数是请求配置，在组件初次加载时，会自动触发该函数执行。同时自动管理该异步函数的 loading , data , error 等状态。这些状态都是 响应式 的。

import useRequest from '@/hooks/use-request'

const { loading, data } = useRequest({
  method: 'POST',
  path:url,
  params: { }  // 初始请求参数
})

手动触发

manual = true，则 useRequest 不会默认执行，需要通过 run 来触发执行。

import useRequest from '@/hooks/use-request';

const {loading,run, data 
} = useRequest(
  {
    method: 'POST',
    path: url,
    params: { pageSize: 10 }
  },
  { manual: true }
)

run()  //手动触发

提醒

params 传递是的初始参数数据,如果在后续run()调用的时候，传递了同样key的值的参数，会被run()中的参数覆盖。

import useRequest from '@/hooks/use-request';

let index= 1
const { loading,run,data } = useRequest(
  {
    method: 'POST',
    path: props.request,
    params: { pageSize: 10,pageIndex:1 }
  }
)

// 点击下一页
const nextPage =()=>{
    index=index+1
    run({pageIndex:index})  // pageIndex为2
}

useBoolean

快捷管理 布尔值 类型状态的Hook。

import useBoolean from '@/hooks/use-boolean.js'

const { bool, setTrue, setFalse,toggle } = useBoolean(false)

useDict

基本用法

useDict用于快速读取平台的 字典值 数据,会自动的发起请求并拿到返回值。

需要传递获取哪一个字典值的参数。

import useDict from '@/hooks/use-dict.js'

const { data } = useDict('CONFIGLEVEL')

多个字典值

当在一个文件中取出多个字典值的时候，需要给取出的字典值加上别名，防止重名。

import useDict from '@/hooks/use-dict.js'

const { data: XXJJCD } = useDict('XXJJCD')
const { data: XXTZLX } = useDict('XXTZLX')
const { data: XXCZLX } = useDict('XXCZLX')

useKeydown

为页面增加键盘输入的事件监听。

第一参数为键盘输入的回调事件，第一个参数是哪个键(可选，默认为Enter)

import useKeydown from '@/hooks/use-keydown'

const test =()=>{
    console.log('enter 键被按下了')
}

useKeydown(test,'Enter')

usePagination

usePagination 用于翻页状态的管理，通常和 table 相关组件联合使用，也可以单独使用。

第一个参数为当前页(可选，默认为1)，第二个参数为当前页码大小(可选，默认为10)

import usePagination from '@/hooks/use-pagination.js'

const { pageIndex, pageSize, setCurrentPage } = usePagination(1, 5)

useSearchFormStyle

根据表达项的个数用于自动计算 搜索表单项 的单行排列个数，是否出现下拉显示更多按钮，当窗口大小发生改变时，自动设置等功能。

• 当屏幕宽度大于1536px 每行显示4列

• 当屏幕宽度640px-1536px 每行显示2列

• 当屏幕宽度小于640px 每行显示1列

基本用法

搭配 Element Plus 的分栏布局使用。

import useSearchFormStyle from '@/hooks/use-search-form-style'

const { 
    // 每一栏占多少(总共24,如果分4栏，那么每栏就是6，如果分2栏，那么每栏就是12)
    spanPerCol,     
    // 操作区的偏移量
    actionOffset, 
    // 需要折叠的起始下标
    hiddenIndex,
    // 切换是否折叠
    toggleCollapse,  
    // 是否折叠选项
    isCollapse
} = useSearchFormStyle(3)  

<el-form :inline="true" class="custom-form-inline">
   <el-row :gutter="16" class="gap-y-4">
    <el-col :span="spanPerCol" v-if="!isCollapse || 0 < hiddenIndex">
        <el-form-item label="配置名称">
         <el-input/>
         </el-form-item>
    </el-col>
       <el-col :span="spanPerCol" v-if="!isCollapse || 1 < hiddenIndex">
         <el-form-item label="配置编码">
            <el-input />
        </el-form-item>
            </el-col>
    <el-col :span="spanPerCol" v-if="!isCollapse || 2 < hiddenIndex">
        <el-form-item label="级别">
               <el-input />
        </el-form-item>
    </el-col>
    <el-col :span="spanPerCol" class="form-action" :offset="actionOffset">
        <el-form-item>
            <el-button @click="onReset">重置</el-button>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <template v-if="3 >= hiddenIndex + 1">
                <el-button link type="primary" v-if="isCollapse">
                展开 
                </el-button>
                <el-button link type="primary" v-if="!isCollapse" 
                >收起</el-button>
            </template> 
        </el-form-item>
      </el-col>
    </el-row>
</el-form>