前端组件化之titlePage

这里写一个简单的页面组件，该组件旨在统一页面格式，多人开发时减少 样式部分的书写

titlePage

代码分析

titlePage组件

pageBase组件

<template>
    <section class="page-container">
        <el-col :span=" 24" class="bg-fff padd-all-20 dis-flex flex-dir-column h-100pre">
            <!-- 本页title -->
            <el-col class="mar-b-20 cr-333 fz-18 page-header" :span="24">
                <slot name="header"></slot>
            </el-col>
            <!-- 第一行 -->
            <el-col :span="24" class="flex-auto">
                <slot name="default"></slot>
            </el-col>
        </el-col>
    </section>
</template>

<style scoped>
.page-container {
    height: 100%;
    overflow-y: hidden;
    padding: 20px;
    box-sizing: border-box;
}
.bg-fff {
    background: #fff;
}
.padd-all-20 {
    padding: 20px;
}
.dis-flex {
	display: flex;
}
.flex-dir-column {
    flex-direction: column;
}
.mar-b-20 {
    margin-bottom: 20px;
}
.cr-333 {
    color: #333;
}
.fz-18 {
    font-size: 18px;
}
.page-header {
    border-bottom: 1px solid #edeef0;
    padding-bottom: 13px;
    min-height: 20px;
}
.h-100pre {
    height: 100%;
}
</style>
<script>
export default {
    name: 'pageBaseComponent',
    data() {
        return {}
    },
    methods: {},
    created() {}
}
</script>

组件使用

<template>
    <title-page title="我是title">
        <!-- 在这里书写 content --
        <p>使用方法：</p>
        <p>title 中的内容就是该页面的标题</p>
        <!-- 在这里书写 content -->
    </title-page>
</template>

<script>
import TitlePage from '@/components/page/titlePage.vue'
export default {
    name: 'test-page',
    components: {
        'title-page': TitlePage
    },
    data() {
        return {}
    },
    methods: {}
}
</script>

<style>
</style>

属性

参数	说明	类型	可选值	默认值
title	页面的标题	String	–	–