Vue中如何优化处理按钮loading

视频讲解

• 抖音
• 哔哩哔哩

组件实现

<template>
    <el-button
        :loading="loading" v-bind="omit($attrs, 'onClick')" @click="handleClick">
        <slot />
    </el-button>
</template>

<script lang="ts" setup>
import { omit } from 'lodash-es'
import { ref, useAttrs } from 'vue'

defineOptions({
    name: 'MyButton',
    inheritAttrs: false,
})

const loading = ref(false)
const attrs = useAttrs()

async function handleClick() {
    loading.value = true
    try {
        // 调用父组件传递的点击事件
        await attrs.onClick?.()
    }
    finally {
        loading.value = false
    }
}
</script>

使用示例

<template>
    <div>
        <MyButton type="primary" @click="onClick">
            获取数据
        </MyButton>
        <div>获取数据{{ state }}</div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import MyButton from '@/components/MyButton.vue'

const state = ref({})

function loadData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve({
                name: '张三',
                age: 18,
            })
        }, 1000)
    })
}

async function onClick() {
    state.value = await loadData()
}
</script>