zylSyncButton - 异步 loading 按钮

基础用法

@click 绑定的事件需要返回一个 Promise，事件被触发后按钮可自动展示 loading 状态

复制代码

<template>
  <div>
    <zyl-sync-button type="primary" @click="handleEdit">
      异步loading按钮
    </zyl-sync-button>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    handleEdit() {
      // 模拟请求
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve()
        }, 2000)
      })
    },
  },
}
</script>

显示代码

用途

可以用于优化以下使用场景：

<template>
  <div>
    <el-button type="primary" :loading="editLoading" @click="handleEdit">编辑<el/-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editLoading: false
    }
  },
  methods: {
    handleEdit() {
      this.editLoading =true
      // 模拟请求
      new Promise((resolve, reject) => {
          setTimeout(() => {
          this.editLoading =false
          resolve()
          }, 2000)
      })
    },
  },
}
</script>

属性

该组件属性和方法全部继承自 el-button (opens new window) ，可按照原方法使用