【Vue3+Ts+Vite】二次封装button按钮loading处理组件

原创已于 2025-04-10 14:37:25 修改 · 599 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript #前端

于 2024-09-12 10:25:40 首次发布

Vue.js 同时被 2 个专栏收录

29 篇文章

订阅专栏

Element-UI

4 篇文章

订阅专栏

新建组件

<template>
  <el-button :loading="loading" v-bind="props" @click="handleClick">
    <slot></slot>
  </el-button>
</template>

<script setup lang="ts">
  import { ButtonGroupProps } from 'element-plus/es/components/button/src/button-group.mjs'

  defineOptions({
    inheritAttrs: false
  })
  const props = defineProps<Omit<ButtonGroupProps, 'loading'>>()
  const attrs = useAttrs()

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

页面使用

import ELButton from '@/components/ELButton/index.vue'

<ELButton type="primary" @click="loadingClick">点击loading</ELButton>

补充:vue2版(非ts)

<template>
  <el-button :loading="btnLoading" v-bind="$attrs" @click="handleClick">
    <slot></slot>
  </el-button>
</template>
<script>
export default {
  inheritAttrs: false,
  data() {
    return {
      btnLoading: false
    }
  },
  methods: {
    async handleClick() {
      this.btnLoading = true
      try {
        if (this.$listeners.click) {
          await this.$listeners.click()
        }
      } finally {
        this.btnLoading = false
      }
    }
  }
}
</script>

vantui版本：

<template>
  <van-button v-bind="$attrs" :loading="loading" @click="handleClick">
    <slot></slot>
  </van-button>
</template>

<script setup lang="ts">
  const props = defineProps<{
    onClick?: () => Promise<void> | void
  }>()

  const loading = ref(false)

  async function handleClick() {
    loading.value = true
    try {
      await props.onClick?.() // 明确使用 props 而不是 attrs
    } finally {
      loading.value = false
    }
  }
</script>