建立基於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這段代碼解決了：因佔位符不存在內容，而樣式存在影響美觀的問題！

優點：
一、樣式佔位符組件極大的減小了重複代碼，而且有利於維護

劣勢：
一、個性化變少了，由於全部組件採用相同的樣式，不過若是你想能夠設置它的主題也爲什麼不可