前言
后台管理系统中，顶部工具栏的使用十分高频。现基于Element-UI，封装一个可复用且支持插槽的按钮工具栏组件
第 0 步：业务逻辑
一般而言，顶部按钮工具栏配合下方的表格组件使用。
所以在设计上，工具栏的左侧支持动态显示当前表格的数据条数、关键数据等，右侧则是对这些按钮：新增数据、进入具体设置页面、导入表格、导出表格等等按钮
左侧数据提示Alert的实现思路：在插槽子组件中使用v-if控制盒子的显示或隐藏，v-if的布尔依赖值在使用插槽时，采用父向子传值（props）传入。具体显示什么类型的数据，在父组件中使用时结合具名插槽，根据不同情况而定
右侧不同功能按钮的实现思路：直接使用具名插槽
第 1 步：组件结构搭建
- < el-row > 和 < el-col >的组合使用，快速实现布局
- 子组件的
props属性showBefore接收父组件传入的布尔值 - 左侧的数据提示其实是自定义样的普通盒子，图标采用了Element-UI的
Icon组件
<template>
<el-card class="page-tools">
<el-row type="flex" justify="space-between" align="middle">
<!-- 左边 -->
<el-col>
<!-- 前面的具名插槽 -->
<div v-if="showbefore" class="before">
<!-- 图标，伴随before盒子显示而显示-->
<i class="el-icon-info" />
<slot name="before" />
</div>
</el-col>
<!-- 右边 -->
<el-col>
<el-row type="flex" justify="end">
<!-- 后面的具名插槽 -->
<slot name="after" />
</el-row>
</el-col>
</el-row>
</el-card>
</template>
<script>
export default {
name: 'PageTools',
// props, 接收父组件传入的值，控制前面的具名插槽显示或隐藏
props: {
showbefore: {
type: Boolean,
default: false
}
}
}
</script>
<style lang="scss" scoped>
.page-tools {
margin: 10px 0;
.before{
line-height: 34px;
i {
margin-right: 5px;
color: #409eff;
}
display: inline-block;
padding: 0 10px;
border-radius: 3px;
border: 1px solid rgba(145,213,255,1);
background: rgba(230,247,255,1);
}
}
</style>
第 2 步：自动注册为全局组件
- 在src/components/index.js中，使用webpack的相关方法实现公共组件自动批量注册，一次配置，终生收益
// 1. 导入Vue
import Vue from 'vue'
// 2. 调用context()方法
const requireComponet = require.context('./', true, /.vue$/)
requireComponet.keys().forEach((item) => {
const defaultCom = requireComponet(item).default
Vue.component(defaultCom.name, defaultCom)
})
// 3. 到main.js中：
// 导入index.js文件
第 3 步：使用组件
- 通过使用插槽，可以添加不同的按钮，在这些按钮的点击事件中可以触发其他的各类业务
- 成果：
<template>
<div class="app-container">
<el-card>
<PageTools :showbefore="true">
// 具名插槽 before
<template v-slot:before>
<span>总记录条数：{{ total }} 条</span>
</template>
// 具名插槽after
<template v-slot:after>
<el-button type="primary">导入Excel</el-button>
<el-button type="info">新增员工</el-button>
</template>
</PageTools>
</el-card>
</div>
</template>
