首先先封装一个MyButton组件:

<script setup >

import { ref, useSlots } from 'vue'

const props = defineProps(['onClick'])

const loading = ref(false)

const clickHandler = async (e) => {

loading.value = true

try {

await props.onClick(e)

} finally {

loading.value = false

}

}

const slots = useSlots()

</script>

<template>

<el-button @click="clickHandler" :loading="loading">code>

<template v-for="(_, key, i) in slots" :key="i" #[key]>code>

<slot :name="key" />code>

</template>

</el-button>

</template>

接下来引用MyButton组件，绑定click事件，返回Promise就可以优雅的给按钮添加一个loading效果了

<script setup >

import MyButton from './MyButton.vue';

const asyncFn = () => new Promise(resolve => {

setTimeout(resolve, 3000)

})

const handler1 = async () => {

// ...

await asyncFn()

}

const handler3 = () => {

// ...

return asyncFn()

}

</script>

<template>

<MyButton type="primary" @click="handler1">code>

按钮1

</MyButton>

<MyButton @click="asyncFn">code>

按钮2

</MyButton>

<MyButton type="primary" plain @click="handler3">code>

<template #loading>

<div class="custom-loading">code>

<svg class="circular" viewBox="-10, -10, 50, 50">code>

<path class="path" d="

M 30 15

L 28 17

M 25.61 25.61

A 15 15, 0, 0, 1, 15 30

A 15 15, 0, 1, 1, 27.99 7.5

L 15 15

" style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)" />code>

</svg>

</div>

</template>

按钮3

</MyButton>

</template>

<style scoped>

.el-button .custom-loading .circular {

margin-right: 6px;

width: 18px;

height: 18px;

animation: loading-rotate 2s linear infinite;

}

.el-button .custom-loading .circular .path {

animation: loading-dash 1.5s ease-in-out infinite;

stroke-dasharray: 90, 150;

stroke-dashoffset: 0;

stroke-width: 2;

stroke: var(--el-button-text-color);

stroke-linecap: round;

}

</style>

相关源码

总结