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组件

https://juejin.cn/post/6916474993635229704

如果要全部输入框都支持“不允许输入纯空格”，就将它封装成全局组件，看似完美，但是你会发现，el-input组件除了可以进行值的双向绑定，它还支持size、readonly、disabled...等18个属性，7个事件，于是接着写一大堆“中间代码”来继承原有el-input的各种属性、事件。

<template>
  <el-input v-bind="$attrs" v-on="$listeners" @change="handleChange"></el-input>
</template>

<script>
  export default {
    methods: {
      handleChange(value) {
        if (Object.prototype.toString.call(value) === '[object String]' && value.trim() === '') {
          this.$emit('input', '')
        }
      }
    }
  }
</script>