src/components/PageTools/index.vue
<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 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>
</el-card>
</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>
使用
一,局部注册
src/views/employees/index.vue
<template>
<div class="employees-container">
<div class="app-container">
<page-tools>
<!-- 插入到left插槽位置 -->
<template #left>
<span>本月: 社保在缴 公积金在缴</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>
二,全局注册,在组件中直接使用
main.js
import PageTools from '@/components/PageTools'
Vue.component('PageTools', PageTools)
通过插件的形式
-
理解插件注册方法Vue.use
文档: https://cn.vuejs.org/v2/api/#Vue-use
说明:
- Vue.use 可以接收一个对象,Vue.use(obj)
- 对象中需要提供一个 install 函数
- install 函数可以拿到参数 Vue,且将来会在 Vue.use 时,自动调用该 install 函数
-
提供统一注册的入口文件
src/componets/index.js
import PageTools from './PageTools'
export default {
install(Vue) {
Vue.component('PageTools', PageTools)
}
}
入口处注册插件
main.js
import Components from './components'
Vue.use(Components)