[JavaScript知识库]二次封装elementui的button组件

MyButton.vue

<template>
  <div>
    <el-button :loading="loadingStatus" @click="handleClick"
      >默认按钮</el-button
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      loadingStatus: false,
    };
  },
  props: {
    isLoading: {
      type: Boolean,
      default: false,
    },
  },

  methods: {
    handleClick() {
      if (this.isLoading) {
        this.loadingStatus = true;
      }
      // click时触发，将状态改成false
      this.$emit("click", () => {
        this.loadingStatus = false;
      });
    },
  },
};
</script>

<style></style>

App.vue

<template>
  <Button :isLoading="true" @click="submit"></Button>
</template>

<script>
import Button from "./components/MyButton";
export default {
  components: { Button },
  methods: {
    submit(done) {
      // 模拟异步过程
      setTimeout(() => {
        console.log("11111111");
        // 执行子组件触发事件后返回的回调函数
        done();
      },1000);
    },
  },
};
</script>