从0到1封装一个好看的panel组件项目开发过程中，页面上经常会有各种各样的内容块需要容器包裹展示，这些容器由标题和内容

hello，大家好，我是Golf，前端一枚，喜欢探究一些代码原理。

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情”。

前言

在项目开发过程中，页面上经常会有各种各样的内容块需要容器包裹展示，这些容器由标题和内容组成，俗称面板，好看统一的面板会给人一种整齐标准的感觉，会让一个系统看起来更专业，本文将从前端小白的视角，带你从0到1封装一个好看的 panel 组件。

组件开发

项目需求

前端小白正在电脑前愉快的摸鱼，突然产品经理丢过来几个项目页面截图，对小白说：为什么你们开发的页面里的面板长得都不一样，间距不统一，圆角不统一，颜色也不一样，看起来都不像一个专业的项目。小白答曰：这些页面都不是一个人画的，当然不一样了。那有什么办法能统一呢？产品经理追问道。小白回答：那只能封装一个组件了。

基础版本

于是小白快速的敲击着键盘，很快就写好了一个panel组件，只有两个最基本的功能。

标题文字通过属性传递
内容通过插槽分发

组件代码
<template>
  <div class="gf-panel">
    <div class="gf-panel__header">
        <div class="gf-panel__title">{{ title }}</div>
      </div>
    </div>
    <div class="gf-panel__body">
      <!-- slot -->
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "gf-panel",
  props: {
    title: {
      type: String,
      default: "",
    },
  },
};
</script>
<style lang="scss">
.gf-panel {
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  margin-bottom: 15px;
  position: relative;
  box-sizing: border-box;
  .gf-panel__header {
    color: #333;
    height: 40px;
    padding: 0 15px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    .gf-panel__title {
      font-size: 15px;
      font-weight: 600;
    }
  }
  .gf-panel__body {
    padding: 10px 15px;
    min-height: 40px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}
</style>

组件使用
<template>
  <gf-panel title="这是标题">
      <div>这是一段信息</div>
    </gf-panel>
</template>