带loading 的提交按钮

说明

当表单提交的时候 loading , 提交完成， 或者有带提示语句的，使用done()去掉loading 效果

使用

---

按钮组件

提交按钮

<template>
  <div class="t-input">
    <t-layout sectionTitle="按钮组件">
      <div class="content-main t-margin20">
        <span>提交按钮</span>
        <ot-button auto-loading @click="submit">保存</ot-button>
      </div>
    </t-layout>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods: {
    submit(done) {
    // 这里供业务组件处理一些事情,比如ajax请求 执行done()方法消失loading
      setTimeout(() => {
        done()
      }, 1000)
    }
  }
}
</script>

显示代码

wocwin微信二维码

//  使用
  submit(done) {
    // 这里供业务组件处理一些事情,比如ajax请求
    执行done()方法消失loading
      setTimeout(() => {
        done()
      }, 1000)
    }
  }

---

参数说明

参数	类型	可选	说明
auto-loading	Boolean	是	父级url

使用说明

当你想提交表单的时候 我们经常遇到一个 重复点击的问题,点太快了接口没有返回会导致多次重复请求，这个时候我们就可以使用这个组件， 先在项目引入，如： <sub-button auto-loading @click="submit">保存， 接着提交触发click 方法， 有一个回调函数done，在你想要的时候使用这个回调函数， 比如提示语句后或者ajax请求后 done()