前言
因为在做项目的时候,我们绝大部分的界面布局都是一样的。所以做一个简单的公共布局组件出来,后期维护或者改样式的时候,就会方便很多。这也是公共组件抽离的思维。
用的是elementUI的插槽slot
代码
// 公共的布局组件
<template>
<el-container style="border:1px solid #ccc;margin: 0 1px;flex: 1;height: 100%;">
<el-header class="powerdata-header" height='40px' v-if="hasHeader">
// 头部一般放的是搜索条件,为了界面样式不变形,好看一点,所以我加了左右切动的箭头
<i class="el-icon-arrow-left" style="z-index: 999" @mousedown="scrollLeft" @mouseup="clearLeft" v-show="left"></i>
<slot name="header"></slot>
<i class="el-icon-arrow-right" style="z-index: 999" @mousedown="scrollRight" @mouseup="clearRight" v-show="right"></i>
</el-header&g