ElementUI 组件按需封装
前言
公司用了好几个年的核心业务系统今年升级重写，目前使用的版本是 V3 版本的xxx系统平台，简称 V3系统，升级大版本 V4, 前端技术架构也对应做了调整。
V3系统前端使用的是 Angular1.5 ，前后端不分离模式，后端是 .net。V4 要升级成前后端分离模式，前端使用 Vue2 结合 ElementUI 库，目前 Vue2 + ElementUI 技术栈相关的使用在公司内部项目里用的都是这个。
关于 ElementUI 组件按需封装， 由于业务需要，这次的升级前端架构设计需要后期支持前端库动态切换，例如动态切换成 Ant Design，代码开发实现使用 ElementUI, 这时前端架构层就需要对 ElementUI 库的所有组件进行封装，然后业务层调用封装好的对应的组件库，组件库里面封装的 ElementUI 组件，或者是 Ant Design 组件。
规范定义
由于需要把ElementUI所有的组件全部封装，而且时间有限，我们组三个前端都需要参与，在实际封装过程中，如果不预先定义对应的规范，不同人的组件命名，变量命名，封装规范等会出现不一样的情况，这时候需要前端小组内部及时统一相关规范，并输出对应的文档。
开始按需封装
我们用脚手架创建了一个 Vue2 的项目，定义好封装目录，把封装的UI组件全部放到 src/components 下面，然后在 App.vue 中引入，进行基本的功能测试。封装需要使用 attrs listeners <slot> 等 Vue.js API 的功能
$attrs
$attrs 用来绑定父组件传到子组件的属性，如 size value
包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (
class和style除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class和style除外)，并且可以通过v-bind="$attrs"传入内部组件——在创建高级别的组件时非常有用。
https://cn.vuejs.org/v2/api/#vm-attrs
$listeners
$listeners 用来绑定父组件传到子组件的事件，如 click change
包含了父作用域中的 (不含
.native修饰器的)v-on事件监听器。它可以通过v-on="$listeners"传入内部组件——在创建更高层次的组件时非常有用。
https://cn.vuejs.org/v2/api/#vm-listeners
slot
有些组件有自定义功能的实现，业务封装时需要用到，如 input 输入框 复合型输入框
Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将
<slot>元素作为承载分发内容的出口。
https://cn.vuejs.org/v2/guide/components.html#%E9%80%9A%E8%BF%87%E6%8F%92%E6%A7%BD%E5%88%86%E5%8F%91%E5%86%85%E5%AE%B9
https://cn.vuejs.org/v2/guide/components-slots.html
https://cn.vuejs.org/v2/api/#v-slot
Button 按钮 封装
方案一
封装的Button组件， 使用 attrs 接收父组件（应用层）传递的属性参数，使用 listeners 接收父组件（应用层）传递的事件，Button 按钮封装时实际用不上
<template>
<div>
<el-button
v-bind="$attrs"
v-on="$listeners">
{{ buttonContent }}
</el-button>
</div>
</template>
<script>
export default {
name: 'Button',
props: {
buttonContent: {
type: String,
default: '按钮'
}
}
}
</script>
应用层调用
<template>
<div id="app">
<button
type="success"
size="mini"
buttonContent="按钮2"
@click="buttonClick">
</button>
</div>
</template>
<script>
import Button from './components/Button.vue';
export default {
name: 'App',
components: {
Button
},
methods: {
buttonClick() => {
console.log('button click')
}
}
}
</script>
方案一优势
封装的组件代码更简洁，业务组件调用时按需传递对应的参数即可实现相应的功能
方案二
封装的Button组件， 使用 props 接收参数对象， <slot> 显示Button按钮文字
<template>
<div>
<el-button
:size="buttonConfig.size"
:type="buttonConfig.type"
:plain="buttonConfig.plain"
:round="buttonConfig.round"
:circle="buttonConfig.circle"
:loading="buttonConfig.loading"
:disabled="buttonConfig.disabled"
:icon="buttonConfig.icon"
:autofocus="buttonConfig.autofocus"
:native-type="buttonConfig.nativeType">
<slot></slot>
</el-button>
</div>
</template>
<script>
export default {
name: 'Button',
props: {
buttonConfig: {
type: Object,
default: () => {}
}
}
}
</script>
应用层调用
<template>
<div id="app">
<button
:buttonConfig="button.buttonConfig">
{{ button.buttonContent }}
<button>
</div>
</template>
<script>
import Button from './components/Button.vue';
export default {
name: 'App',
components: {
Button,
},
data() {
return {
button: {
buttonContent: '测试按钮1',
buttonConfig: {
size: 'small',
type: 'success',
icon: 'el-icon-search'
}
}
}
}
}
</script>
方案二优势
业务层的调用代码更简洁，直接传递一个对象即可，参数定义更灵活，这种方式还支持后期更换UI库，业务层代码不用动，直接更新组件封装层即可。
思考
Button 按钮这种组件封装相对简单一点，在实际业务中，有些组件会比较复杂，例如表格组件的封装使用，各种自定义能力需要支持，对于表格的自定义修改封装后期需要处理的内容会很多，可能也会面临一些取舍，目前小组内还没做到那里，后期会把表格的封装单独梳理出来。
腾讯云开发者
