titlePage

代码分析

titlePage组件

<template>
    <div style="height: 100%;">
        <my-pageBase :noHeader="noHeader">
            <template slot="header">
                <el-col :span="8" style="line-height: 1;">{{title}}</el-col>
                <el-col :span="16" class="dis-flex flex-justifu-end">
                    <slot name="header-right"></slot>
                </el-col>
            </template>
            <slot name="default"></slot>
        </my-pageBase>
    </div>
</template>

<script>
import pageBase from './index.vue' //该组件代码在 【pageBase组件】 中

export default {
    name: 'title-page',
    props: {
        title: {
            type: String,
            default: 'title'
        },
        noHeader: Boolean
    },
    components: {
        'my-pageBase': pageBase
    }
}
</script>

<style scoped>
.flex-justifu-end {
    justify-content: flex-end;
}
.dis-flex {
	display: flex;
}
</style>

pageBase组件

<template>
    <section class="page-container" :class="{'padd-all-20': !noHeader}">
        <el-col :span=" 24" class="bg-fff dis-flex flex-dir-column h-100pre" :class="{'padd-all-20': !noHeader}">
            <!-- 本页title -->
            <el-col class="mar-b-20 cr-333 fz-18 page-header" :span="24" v-if="!noHeader">
                <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',
    props: {
        noHeader: {
            type: Boolean,
            default: function () {
                return false
            }
        }
    },
    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>

属性