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://blog.csdn.net/sky2714/article/details/112495134
这里对自动loading做了简单介绍,还有更多的方法,后面陆续讲到.
已对element ui常用组件做了二次封装上传npm,更多示例可参考此文档.
更多内容请点击文档