element-ui 二次封装系列- button

elementUI是一个vue.js的ui框架, 在做后台管理系统等方面非常出色,然而面对重复的后台管理系统,大量重复的代码, 这里我们将使用elemnt ui做二次封装,以扩展element ui的属性 来简化代码.

本文以 el-button为例el-button是最简单的组件了,所有操作都需要用到它, 它仅对外提供click事件.
在平时工作中,我们经常遇到一个 重复点击的问题,点太快了接口没有返回会导致多次重复请求,这时我们会想到使用防抖或节流,或者使用el-button的loading属性, 如果使用loading 属性, 通常 我们会在vue的data中定义一个loading变量,然后调用ajax之前将loading设置为true, ajax返回后将loading设置为false. 这是比较合理的办法,但是如果一个系统非常多这种情况, 那我们需要每一个页面都去定义一个loading变量,作为一个合格的程序员,我们当然想不要写这么多重复的代码,这时候就需要对el-button做二次封装了,
如下代码,我们封装一个pl-button组件

<el-button
  v-bind="$attrs"
  :loading="loadingStatus"
  @click="handleClick"
>
<slot/>
</el-button>
<script>
export default {
    
  name: 'pl-button'