vue+elementUI抽离公共布局组件

前言

因为在做项目的时候，我们绝大部分的界面布局都是一样的。所以做一个简单的公共布局组件出来，后期维护或者改样式的时候，就会方便很多。这也是公共组件抽离的思维。

用的是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