粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

主题列表：juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate

贡献主题：https://github.com/xitu/juejin-markdown-themes

theme: juejin highlight:

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',
  props: {
    autoLoading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loadingStatus: false
    }
  },
  methods: {
    handleClick() {
      if (this.autoLoading) {
        this.loadingStatus = true
      }
      this.$emit('click', () => {
        this.loadingStatus = false
      })
    }
  }
}
</script>

以上这几行代码,我们将 el-button的click事件用handleClick方法处理了,同时,我们设置了一个autoLoaing的props字段,点击了按钮之后,触发了handleClick,此时如果autoLoading为true则将loadingStatus设置为true,这时按钮就会loading了,然后对外 emit('click'),除了emit('click')之外,这里还多了一个参数,是回调函数,回调函数中,我们将loadingStatus设置为false,此时loading就会消失,这样我们就用pl-button 实现了一个自动loading的按钮了,如何使用呢?

<template>
  <pl-button :auto-loading="true" @click="submit">
    自动loading按钮
  </pl-button>
</template>
<script>
export default {
  methods: {
    submit(done) {
    // 这里供业务组件处理一些事情,比如ajax请求,此处用setTimeout模拟,    执行done()方法消失loading
      setTimeout(() => {
        done()
      }, 1000)
    }
  }
}
</script>

在业务组件中,我们引入刚刚写好的pl-button组件,设置auto-loading为true, 这时我们的click用 submit事件接收, submit能接收pl-button的click传来的回调函数,我们在业务组件上处理好后执行done() 就能消失loading了

以上简单的代码我们将el-button设置为能够自动loading, 与el-button的loading有何区别呢? 我们这里无需再每次都在业务组件中定义一个loading变量了,只需要执行done()方法即可. 在上述pl-button组件中, 我们在el-button组件上使用了v-bind=$attrs,这个表示是继承所有父组件传过来的属性,用了这个属性,我们可以将el-button的所有的props都能继承给pl-button,如 :

 <pl-button type="primary">主要按钮</pl-button>
 <pl-button type="primary" plain>朴素按钮</pl-button>
 <pl-button type="primary" round>圆角按钮</pl-button>
 <pl-button icon="el-icon-edit" circle></pl-button>

上面的代码我们可以看到:el-button拥有的属性props 均可直接在pl-button上直接使用,这样我们就对el-button二次封装做了扩展,而且完全不影响el-button原有属性的使用.

下一篇 https://juejin.cn/post/6916489242008879118

限于掘金不能方便的展示,你可以通过查看此文档查看效果https://www.noob6.com/pl-element/guide/button.html#%E8%87%AA%E5%8A%A8loading

源码地址

系列文章地址:

element-ui 二次封装系列- button(一)

element-ui 二次封装系列- button(二)

element-ui 二次封装系列- button(三)