创建基于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>

下面我来分析一下这个页面:
1、props=title,显示的是标题
2、slot=title-icon,显示的是标题的图标
3、slot=title-toolbar,显示的是标题栏右边的按钮集合
4、slot=search,显示的是内容工具中搜索框占位区域
5、slot=btns,显示的是内容工具中按钮集合占位区域
6、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
    },
    ...

clipboard.png

clipboard.png

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

总结:

问题:
1、$slots.slotname这段代码解决了:因占位符不存在内容,而样式存在影响美观的问题!

优势:
1、样式占位符组件极大的减少了重复代码,并且有利于维护

劣势:
1、个性化变少了,因为所有组件采用相同的样式,不过如果你想可以设置它的主题也为何不可

阅读 6.5k

推荐阅读
全栈工程师进阶
用户专栏

日常学习总结与分享,包括:前端、后台与运维,讲解的知识点包括:javascript、vuejs、reactjs、springb...

79 人关注
44 篇文章
专栏主页