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>
        <el-main style="padding: 0;">
            <slot></slot>
        </el-main>
        <el-footer style="height: 40px;" v-if="hasfooter">
            <slot name="footer"></slot>
        </el-footer>
    </el-container>
</template>
<script>

export default {
    data() {
        return {
            timeRight:'',
            timeLeft:'',
            left:false,
            right:false,
        };
    },
    computed: {},
    watch: {},
    props: {
        hasHeader:{
            type:Boolean,
            default:true
        },
        hasfooter:{
            type:Boolean,
            default:true
        }
    },
    methods: {
        scrollLeft(e){
            if(document.getElementById('form')){
                this.timeLeft = setInterval(() =>{
                    document.getElementById('form').scrollLeft -= 10
                    if(document.getElementById('form').scrollLeft == 0){

                        this.clearLeft();
                    }
                },50);
            }

        },
        scrollRight(e){
            if(document.getElementById('form')){
                console.log(e)
                this.timeRight = setInterval(() =>{
                    document.getElementById('form').scrollLeft += 10;
                    if(document.getElementById('form').scrollWidth == document.getElementById('form').clientWidth + document.getElementById('form').scrollLeft){
                        this.clearRight();
                    }
                },50);
            }
        },
        clearRight(){
            clearInterval(this.timeRight)
        },
        clearLeft(){
            clearInterval(this.timeLeft)
        },
    },
    mounted(){
        if(document.getElementById('form')){
            if(document.getElementById('form').scrollWidth > document.getElementById('form').clientWidth){
                this.right = true;
                this.left = true
            }
        }
    }

}
</script>
<style scoped>
.powerdata-header{
    background-color: #f2f2f2;
    display: flex;
    justify-content: space-around;
    align-items: center;
    overflow: hidden;
    width: 100%;
}

</style>

界面上的使用

因为用的比较多，百分之七十的界面都用的上，所以我直接在main.js里面注册成全局组件。

import container from './components/container.vue'
Vue.component('Container', container)

然后界面上