vue封装按钮加载组件

以下是一个基本的Vue按钮加载组件示例：

<template>
  <button :class="{'loading': loading}" @click="handleClick">
    <slot></slot>
  </button>
</template>

<script>
export default {
  data() {
    return {
      loading: false
    }
  },
  methods: {
    handleClick() {
      this.loading = true
      this.$emit('click')
    },
    hideLoader() {
      this.loading = false
    }
  }
}
</script>

<style>
button.loading {
  position: relative;
  cursor: not-allowed;
}

button.loading:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 3px solid #fff;
  border-top-color: transparent;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>

在上面的示例中，我们使用了一个名为loading的属性来控制按钮是否处于加载状态。我们使用@click事件来触发按钮点击事件并将loading属性设置为true。同时，我们使用了一个名为hideLoader的方法来在加载完成后将loading属性设置为false。

我们还使用了一个:before伪元素来创建一个旋转的加载符号，并在CSS中使用了一个简单的动画来使其旋转