页面小组件--标题

样例展示

• 效果示例
  
• 代码示例

<page-header />

<page-header>
  <template slot="right">
    <el-button
      type="primary"
      icon="el-icon-delete"
      @click="handleOperateData({},'publish')"
    >新增</el-button>
  </template>
</page-header> 

组件源码

<template>
  <div class="page-header">
    <!--左侧标题区域-->
    <div class="header-left">
      <!-- 利用插槽功能支持自定义标题区域内容，否则展示默认样式 -->
      <slot name="left">
        <div class="header-line"></div>
        <div class="header-title">{{ title }}</div>
      </slot>
    </div>
    <!--右侧扩展区域-->
    <div class="header-right">
      <slot name="right" />
    </div>
    <div class="header-bottom-line"></div>
  </div>
</template>
<script>
export default {
  name: 'pageHeader',
  props: {
    pageTitle: String
  },
  computed: {
    title () {
      // 默认展示路由配置中的标题，也可由组件属性传入
      return this.pageTitle || this.$route.meta?.title
    }
  }
}
</script>
<style lang="scss" scoped>
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding-bottom: 6px;
  margin-bottom: 15px;
  background-color: #fff;
  .header-left {
    display: flex;
    align-items: center;

    .header-line {
      width: 8px;
      height: 24px;
      margin-right: 10px;
      background: #2796d4;
    }

    .header-title {
      color: #33354a;
      font-size: 20px;
      font-weight: bold;
      line-height: 52px;
    }
  }

  .header-right {
    cursor: pointer;
  }

  .header-bottom-line {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 1px;
    background-color: #ccc;
  }
}
</style>

组件说明

• left 具名插槽
  • 支持自定义内容，也可使用默认内容展示
  • 用的不多，项目中使用大多是要求标题样式展示为统一样式，很少会有自定义标题展示的，聊胜于无。个人初衷是为了更加通用而已。
• right 具名插槽
  • 用的很多，页面中属于功能扩展的按钮都可以放到这里，如：新增、导入、导出、批量删除…
  • 后续在项目使用中发现一个问题(没改，个人认为应该归到插槽区域内容处理)：如果插槽区域内放置的都是按钮(el-button,行内元素或行内块元素类型)，展示是正常的。但如果放置的是其他类型的内容(其他组件或自定义内容，为块状元素类型)，因其独占一行，可能会导致显示异常。如下：
    
    原因是导入按钮其实是el-upload组件改造的，导致出现这种情况。但个人觉得可以在插槽内用div包裹+flex布局处理。