wl-element

# 防抖

禁止用户频繁点击，多用于频繁点击操作，500ms之内重复点击只会执行一次

<template>
  <wl-button
    type="primary"
    debounce
    @click="handleClick"
  >debounce
  </wl-button>
</template>

<script>
export default {
  name: 'button-demo-01',
  methods: {
    handleClick () {
      this.$message.success('你执行了点击事件, 500ms之内重复点击无效哦!')
    }
  }
}
</script>
显示代码

# 自动loading

自动添加loading效果,方便点击处理事件,会通过参数 done 函数待 ajax等返回后控制loading关闭

<template>
  <div>
    <wl-button loading @click="handleClick" type="success">自动loading</wl-button>
    <wl-button fullscreen-loading @click="handleClick" type="warning">全屏loading</wl-button>
  </div>
</template>

<script>
export default {
  name: 'button-demo-02',
  data () {
    return {
      fullscreenLoading: false
    }
  },
  methods: {
    handleClick (done) {
      setTimeout(() => {
        // do something
        done()  // done控制loading关闭
      }, 1000)
    }
  }
}
</script>
显示代码

# tip button

wl-tip-button用于给按钮添加tip说明,包含wl-button的所有功能

<template>
  <div>
    <wl-tip-button content="设置" icon="el-icon-s-tools" circle></wl-tip-button>
    <wl-tip-button
      content="删除"
      type="primary"
      confirm-type="confirm"
      @confirm="confirm"
      fullscreen-loading
    >删除
    </wl-tip-button>
    <wl-tip-button content="删除"
                   type="primary"
                   confirm-type="confirm"
                   @confirm="confirm"
                   fullscreen-loading icon="el-icon-delete" circle></wl-tip-button>
  </div>
</template>

<script>
export default {
  name: 'button-demo-04',
  methods: {
    confirm (done) {
      setTimeout(() => {
        done()
      }, 1000)
    }
  }
}
</script>

<style scoped>

</style>
显示代码

# 操作确认

有时候我们点击按钮需弹窗确认后方可继续,wl-button封装了这个步骤

<template>
  <div>
    <wl-button confirm-type="pop" type="primary" @confirm="confirm" fullscreen-loading >删除</wl-button>
    <wl-button confirm-type="confirm" type="danger" @confirm="confirm" fullscreen-loading >删除</wl-button>
  </div>
</template>

<script>
export default {
  name: 'button-demo-03',
  methods: {
    confirm (done) {
      setTimeout(() => {
        done()
      }, 1000)
    }
  }
}
</script>
显示代码

# Attributes

参数 说明 类型 可选值 默认值
debounce 是否启用防抖 boolean — false
loading 点击后自动开启loading(按钮上) boolean — false
fullscreenLoading 点击后自动开启loading(全屏) boolean — false
confirmType 操作按钮确认方式,可自动渲染el-popconfirm或element-ui的confirm弹窗 pop/confirm — —
popConfig 当传入confirmType为pop时,el-popconfirm属性的对象,可传入el-popconfirm组件支持的所有属性值 object — —
confirmConfig 当传入confirmType为confirm时,element-ui的Messagebox.confirm的属性值对象 — — —

温馨提示

除以上列出的为本组件封装的新属性,其他el-input的任何属性均可直接继承

# Events

事件名 描述 参数
click 点击事件,如使用了loading,可用回调函数done来清除loading (fn:done)
confirm 当传入confirmType的时候,操作按钮确认事件 (fn:done)

← input →