antdv-hook-enhance
On this page

useBtnRequest ​

示例 ​

提交按钮
接管提交业务中的loading与点击事件
<script setup lang="ts">
import { useBtnRequest } from '@hooks/components'
import { message } from 'ant-design-vue'

const submitFetch = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('执行成功')
    }, 1500)
  })
}

const submit = useBtnRequest({
  apiFun: submitFetch,
  onSuccess(data) {
    message.success(data)
  }
})
</script>

<template>
  <div class="col">
    <a-button v-bind="submit" type="primary">提交</a-button>
  </div>
</template>

<style lang="less" scoped></style>
<script setup lang="ts">
import { useBtnRequest } from '@hooks/components'
import { message } from 'ant-design-vue'

const submitFetch = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('执行成功')
    }, 1500)
  })
}

const submit = useBtnRequest({
  apiFun: submitFetch,
  onSuccess(data) {
    message.success(data)
  }
})
</script>

<template>
  <div class="col">
    <a-button v-bind="submit" type="primary">提交</a-button>
  </div>
</template>

<style lang="less" scoped></style>

参数 ​

参数描述必选类型默认值
apiFun调用远程接口返回数据true()=>[]-
paramsFun允许点击时获取参数，传递给接口使用false()=>any-
onSuccess结果成功时的回调false(any)=>void-

实例属性与方法 ​

参数描述类型
loading控制按钮的loading状态boolean
onClick接管按钮的点击事件()=>promise