loading-button

最新推荐文章于 2024-10-06 22:38:44 发布

海绵宝龙

最新推荐文章于 2024-10-06 22:38:44 发布

阅读量138

点赞数 1

分类专栏： vue2 文章标签： vue.js 前端 javascript elementui ui

本文链接：https://blog.csdn.net/weixin_46504400/article/details/141889038

版权

vue2 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

//子组件
<template>
  <div>
    <el-button :loading="loading" @click="onClick" v-bind="$attrs">
      <slot></slot>
    </el-button>
  </div>
</template>

<script>
export default {
  name: 'loading-button',
  data() {
    return {
      loading: false,
    };
  },
  methods: {
    async onClick() {
      this.loading = true;
      console.log(this.loading);
      try {
        await this.$listeners?.click?.();
        console.log(this.$attrs, this.$listeners, 'this.$attrs');
        console.log(this.loading);
      } finally {
        this.loading = false;
        console.log(this.loading);
      }
    },
  },
};
</script>

<style scoped></style>

//用法
   <loading-button
            :disabled="!multipleSelection.length"
            type="primary"
            size="small"
            @click="BatchDownloadFile(multipleSelection, 0)"
            >{{ $t('button.OneClickDownload') }}</loading-button
          >