Skip to content

button with loading 多个 button 时无需维护多个响应式变量

vue
<template>
  <Button v-bind="omit($attrs, 'onClick')" :loading="loading">
    <slot />
  </Button>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { Button } from 'ant-design-vue'
import { omit } from 'lodash-es'

defineOptions({
  inheritAttrs: false
})

const attrs = useAttrs()

const loading = ref(false)

async function handleClick() {
  try {
    loading.value = true
    await attrs.onClick?.()
  } finally {
    loading.value = false
  }
}
</script>

基于 MIT 许可发布