src/components/Portlet.vue
直接上代码:
<style lang="scss">
.portlet {
.el-card__header {
padding-top: 5px;
padding-bottom: 5px;
}
.header {
line-height: 40px;
.title-text {
font-size: 16px;
}
}
}
</style>
<template>
<el-card class="portlet">
<div v-if="title || $slots.tools || $slots.header" slot="header" class="clearfix header">
<slot name="header">
<div class="pull-left title-text">
<span>{{ title }}</span>
</div>
</slot>
<div v-if="$slots.tools" class="pull-right">
<slot name="tools"></slot>
</div>
</div>
<slot></slot>
</el-card>
</template>
<script>
export default {
name: 'BasePortlet',
props: {
title: {
type: String,
default: ''
}
}
}
</script>
运用举例:
<template>
<div class="row">
<div class="col-xs-12">
<Portlet title="结算方式">
<el-button slot="tools" @click.prevent="submit" type="primary">{{ isClearEditing ? '保存' : '修改' }}</el-button>
<el-form v-if="isClearEditing" class="el-form-col" inline :model="model" label-position="right" ref="elForm"
label-width="100px"><el-row></el-row>
</el-form>
<el-form v-if="!isClearEditing" inline label-position="left"> </el-form>
</Portlet>
</div>
</div>
</template>