封装类似bootstrap的panel组件

<template>
  <div>
    <div class="panel" :class="[className,isbig?'isbig':'']">
      <div class="panel-heading" @click="bodyHandle">
        <div class="panel-title">
          <slot name="header">{{header}}</slot>
        </div>
      </div>
      <div class="panel-body" :style="{display:showBody==true?'block':'none'}">
        <slot name="body"></slot>
        <slot></slot>
      </div>
    </div>
  </div>
</template>
    
<script>
export default {
  /**
   * header：panel的头部名称
   * type：panel的颜色（primary,danger,info,warning,success,default）
   * open：panel body是否展开,默认展开
   * isbig：标题的文字是否大号
   */
  props: {
    header: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "default",
    },
    open: {
      type: Boolean,
      default: true,
    },
    isbig: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    className() {
      return "panel-" + this.type;
    },
  },
  data() {
    return {
      showBody: this.open,
    };
  },
  methods: {
    bodyHandle() {
      this.showBody = !this.showBody;
      this.$emit("showBody");
    },
  },
};
</script>
    
<style scoped lang="scss">
.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  &.panel-default {
    border-color: #ddd;
    > .panel-heading {
      color: #333;
      background-color: #f5f5f5;
      border-color: #ddd;
    }
  }
  &.panel-primary {
    border-color: #337ab7;
    > .panel-heading {
      color: #fff;
      background-color: #337ab7;
      border-color: #337ab7;
    }
  }

  &.panel-success {
    border-color: #d6e9c6;
    > .panel-heading {
      color: #3c763d;
      background-color: #dff0d8;
      border-color: #d6e9c6;
    }
  }

  &.panel-info {
    border-color: #bce8f1;
    > .panel-heading {
      color: #31708f;
      background-color: #d9edf7;
      border-color: #bce8f1;
    }
  }

  &.panel-warning {
    border-color: #faebcc;
    > .panel-heading {
      color: #8a6d3b;
      background-color: #fcf8e3;
      border-color: #faebcc;
    }
  }

  &.panel-danger {
    border-color: #ebccd1;
    > .panel-heading {
      color: #a94442;
      background-color: #f2dede;
      border-color: #ebccd1;
    }
  }
  .panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    cursor: pointer;
    .panel-title {
      margin-top: 0;
      margin-bottom: 0;
      font-size: 16px;
      color: inherit;
    }
  }
  .panel-body {
    padding: 15px;
  }

  &.isbig > .panel-heading .panel-title {
    font-size: 24px;
    font-weight: bold;
  }
}
</style>