Vue组件开发系列之Header组件

组件源码：
https://github.com/AntJavascript/widgetUI/tree/master/Header

FireShot Capture 12 - nvx - http___localhost_8080_demo#_header.png
组件结构：

<template>
    <div class='wt-header'>
        <div class="header" :class="type">
            <div class="left">
              <!-- 显示在组件左边的内容-->
                <slot name="left"></slot>
            </div>
            <div class="title">{{title}}</div>
            <div class="right">
               <!-- 显示在组件右边的内容-->
                <slot name="right"></slot>
            </div>
        </div>
    </div>
</template>

代码分析：

props参数：

props: {
    title: { // 组件的标题
      type: String,
      default: () => {
        return '';
      }
    },
    type: { // 组件类型，（可选）主要是背景色的不同（可选值："primary", "danger"， "default")
      type: String,
      default: () => {
        return 'default';
      }
    }
  }

css代码：

.wt-header {
    .header {
        display: flex;
        justify-content: space-between;
        height: 2rem;
        line-height: 2rem;
        font-size: 0.8rem;
        .title {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        &.primary {
            background: #1BB5F1;
            color:#fff;
            border: 0;
        }
        &.danger {
            background: #ef4f4f;
            color:#fff;
            border: 0;
        }
    }
}

组件源码：
https://github.com/AntJavascript/widgetUI/tree/master/Header