0.0.8 • Published 2 years ago
auto-loading-directive v0.0.8
安装
# npm
npm i auto-loading-directive
# pnpm
pnpm add auto-loading-directive
使用
// 在 main.js 中引入并使用
import { autoLoadingDirective } from 'auto-loading-directive'
autoLoadingDirective(app: App, directiveName?: string)
所有组件、原生按钮以及标签等都可以使用此指令进行点击防重
<!-- 组件内 --> <script setup lang='ts'> function handleClick(e: MouseEvent): Promise<boolean>{ return api.request().then(response => { ...something // 无返回值或返回值不为 false 结束防重 }) } function handleClick(e: MouseEvent): boolean { ...something // 无返回值或返回值不为 false 结束防重 return true } async function asyncFunc() { await ...something // 无返回值或返回值不为 false 结束防重 } function handleClick(e: MouseEvent, callback: () => void): void { ...something // 调用回调函数结束防重 callback() } function modifiersCallback(e: MouseEvent, callback: () => void): void { ...something // 此时返回 false 无法结束防重 return false // 只能通过回调函数的形式来停止防重 callback() } </script> <template> <!-- element-plus --> <el-button v-auto-loading="handleClick">提交</el-button> <!-- naive-ui --> <n-button v-auto-loading="handleClick">提交</n-button> <!-- 自定义按钮 --> <custom-button v-auto-loading="handleClick">提交</custom-button> <!-- 原生按钮 --> <button v-auto-loading="handleClick">提交</button> <!-- input 按钮 --> <input v-auto-loading="handleClick" type="button" value="提交" /> <!-- 标签 --> <div v-auto-loading="handleClick">提交</div> <!-- modifiers --> <el-button v-auto-loading.callback="modifiersCallback">提交</el-button> </template>
自定义组件
- 当使用自定义组件时,组件需实现 disabled/loading 逻辑,同时需提供 disabled/loading 任其一 props,以供指令使用
自动防重
- 指令会根据传入函数的返回值以及回调函数来自动停止防重
- 如果返回值不为 true, 或者 Promise.resolve() 不为 true,则需要自行调用回调函数来停止防重
modifiers: callback
- 当使用 modifiers: callback 时, 只能通过回调函数来结束防重
- modifiers 优先级最高, 使用 modifiers 时, 返回 false 无法结束防重
当使用该指令时,原始 click 事件将无法触发
License