element-ui 二次封装系列- button

最新推荐文章于 2025-09-18 02:16:03 发布

原创

最新推荐文章于 2025-09-18 02:16:03 发布 · 2.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui

本文介绍了如何基于Vue.js的UI框架Element UI对Button组件进行二次封装，以解决重复点击导致的接口请求问题。通过封装，实现了自动loading功能，减少了代码重复。封装后的组件在点击时自动显示loading状态，并在请求完成时自动关闭，简化了业务组件中的处理逻辑。此外，还讲解了如何利用`v-bind="$attrs"`保留并继承所有父组件的属性，保持与原组件的兼容性。

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',

最低0.47元/天解锁文章