封装:
1.绘制好静态结构(components中)
<template>
<div class="page-tools">
<!-- 左侧 -->
<div class="left">
<div class="tips">
<i class="el-icon-info" />
<span>本月: 社保在缴 公积金在缴</span>
</div>
</div>
<div class="right">
<!-- 右侧 -->
<el-button type="primary" size="small">历史归档</el-button>
<el-button type="primary" size="small">导出</el-button>
</div>
</div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
.page-tools {
display: flex;
justify-content: space-between;
align-items: center;
.tips {
line-height: 34px;
padding: 0px 15px;
border-radius: 5px;
border: 1px solid rgba(145, 213, 255, 1);
background: rgba(230, 247, 255, 1);
i {
margin-right: 10px;
color: #409eff;
}
}
}
</style>
2.插槽优化(重要)
使用:具名插槽 <slot name=''left"/>
<template>
<el-card>
<div class="page-tools">
<!-- 左侧 -->
<div class="left">
<div class="tips">
<i class="el-icon-info" />
<slot name="left" />
</div>
</div>
<!-- 右侧 -->
<div class="right">
<slot name="right" />
</div>
</div>
</el-card>
</template>
3.组件使用(重要)
<template>
<div class="employees-container">
<div class="app-container">
<page-tools>
<!-- 插入到left插槽位置 -->
<template #left>
<span>总计100条数据</span>
</template>
<!-- 插入到right插槽位置 -->
<template #right>
<el-button type="primary" size="small">导入excel</el-button>
<el-button type="primary" size="small">导出excel</el-button>
<el-button type="primary" size="small">新增员工</el-button>
</template>
</page-tools>
</div>
</div>
</template>
<script>
import PageTools from '@/components/PageTools'
export default {
components:{
PageTools
}
}
</script>
使用优化:
1.提供统一注册的入口文件(components/index.js)
import PageTools from './PageTools'
export default {
install(Vue) {
Vue.component('PageTools', PageTools)
}
}
2.main.js引入使用
import Components from './components'
Vue.use(Components)