建立基于iview后台管理页面通用页面

使用iview的后台管理页面发挥很大的优点就是组件的复用，以及布局样式的少许修改便可建立一个集数据与美貌为一体的后台管理系统。

下面我来讲说我作的一个基于后台管理页面的通用页面MasterPage.vue

<style lang="less" scoped>
.master-page-container{
    background-color: #fff;
    .master-page-wrap{
        .title-header{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding:10px 20px;
            border-bottom: 1px solid #dddee1;
            .title-content{
                display: flex;
                align-items: center;
                .title-icon{
                    display: flex;
                    align-items: center;
                    margin-right:5px;
                }
                p.title{
                    font-size: 14px;
                    font-weight: bold;
                }
            }
            .title-toolbar{

            }
        }        
        .master-page-content-toolbar{
            padding: 20px 30px;          
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom:1px solid #dddee1;
            .bar-search{
                .input-search{
                    width:350px;
                }
            }
            .bar-group{

            }
        }
        .master-page-content{
            padding:15px 20px;
            background: #fff;
        }
    }
}
</style>
<template>
<section class="master-page-container">
    <div class="master-page-wrap">
        <div class="title-header">
            <div class="title-content">
                <div class="title-icon">
                    <slot name="title-icon"></slot>
                </div>
                <p class="title">{{title}}</p>
            </div>
            <div class="title-toolbar">
                <slot name="title-toolbar"></slot>
            </div>
        </div>
        <div class="master-page-content-toolbar" v-if="$slots.search || $slots.btns">
            <div class="bar-search">
                <slot name="search"></slot>
            </div>
            <div class="bar-group">
                <slot name="btns"></slot>
            </div>
        </div>
        <!--$slots.content表示$slots里面是否存在content内容，就是说这里的占位符可填充了内容-->
        <div class="master-page-content" v-if="$slots.content">
            <slot name="content">    
            </slot>
        </div>
    </div>
</section>
</template>
<script>
export default {
    data(){
        return{

        }
    },
    props:{
        title:{
            type:String
        }
    },
    methods:{

    }
}
</script>

下面我来分析一下这个页面：
一、props=title，显示的是标题
二、slot=title-icon，显示的是标题的图标
三、slot=title-toolbar，显示的是标题栏右边的按钮集合
四、slot=search，显示的是内容工具中搜索框占位区域
五、slot=btns，显示的是内容工具中按钮集合占位区域
六、slot=content，显示的是整个页面的具体内容

下面咱们来新建一个页面，应用这些元素，看看是什么效果：

Demo.vue

<template>
<section class="classroom-detail-container">
    <MasterPage title="建立课堂">
        <Icon type="navicon" :size="20" slot="title-icon"></Icon>
        <div slot="title-toolbar">
            <ButtonGroup>
                <Button type="ghost" icon="plus">保存</Button>
                <Button type="ghost" icon="reply" @click="backToClassroomPage">返回</Button>
            </ButtonGroup>
        </div>
        <div slot="search">
            <Input v-model="searchValue" placeholder="请输入查询内容" class="input-search">
                <div slot="append" >
                    <Button type="primary" icon="ios-search" @click="btn_search">搜索</Button>
                </div>
            </Input>
        </div>
        <div slot="btns">
            <ButtonGroup>
                <Button type="ghost" icon="plus-round" @click.native="gotoCourseDetailPage">添加</Button>
                <Button type="ghost" icon="android-cloud">导入</Button>
            </ButtonGroup>
        </div>
        <div slot="content">
            <Row>
                <Col :span="12">
                    <Form :ref="classroomForm.ref" :model="classroomForm" :rules="classroomForm.rules" :label-width="classroomForm.labelWidth">
                        <FormItem label="课程包" prop="name">
                            <Select v-model="classroomForm.items.model1" style="width:100%">
                                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>                        
                    </Form>
                </Col>
            </Row>            
        </div>
    </MasterPage>
</section>
</template>
<script>
import MasterPage from '@/components/admin/MasterPage'

export default {
    components:{
        MasterPage
    },
    ...

应用这个布局以后，直接往里面添加内容便可，很是方即是不是，不用每次都写重复的代码了。

总结：

问题：
一、$slots.slotname这段代码解决了：因占位符不存在内容，而样式存在影响美观的问题！

优点：
一、样式占位符组件极大的减小了重复代码，而且有利于维护

劣势：
一、个性化变少了，由于全部组件采用相同的样式，不过若是你想能够设置它的主题也为什么不可