如上图所示，自定义封装了一个vue的边框组件，代码如下，具体的样式可以自己调整，当前案例支持传入宽度、高度、最小高度、标题。

<template>
  <div :style="{ width: width, height: height, minHeight: minHeight }" class="box">
    <div class="box-content">
      <div class="title">
        {{title}}
      </div>
      <slot name="content"></slot>
    </div>
    <div class="angle-border left-top-border"></div>
    <div class="angle-border right-top-border"></div>
    <div class="angle-border left-bottom-border"></div>
    <div class="angle-border right-bottom-border"></div>
  </div>
</template>

<script>
export default {
  props: {
    'width': {
      default: '100%'
    },
    'height': {
      default: '100%'
    },
    'minHeight': {
      default: '0px'
    },
    'title': {
      default: ''
    },
  }
}
</script>

<style lang="less" scoped>
.box {
  position: relative;
  overflow: auto;
  overflow-x: hidden;
  background-color: rgb(42,53,77);
  border: 1px solid #178d97;

  .box-content {
    width: 100%;
    height: 100%;

    .title {
      position: absolute;
      z-index: 2;
      margin-left: 5px;
      font-size: 16px;
      color: rgb(49,224,240);
    }
  }

  .angle-border {
    position: absolute;
    width: 8px;
    height: 8px;
  }

  .left-top-border {
    top: 0;
    left: 0;
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
  }

  .right-top-border {
    top: 0;
    right: -1px;
    border-top: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
  }

  .left-bottom-border {
    bottom: 0;
    left: 0;
    border-bottom: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
  }

  .right-bottom-border {
    right: -1px;
    bottom: 0;
    border-right: 2px solid #02a6b5;
    border-bottom: 2px solid #02a6b5;
  }
}
</style>

使用方式：此处组件名称自定义BorderDecorate，import引用并在components中注册，用具名插槽content包裹住就可以了，得设置宽高（或者用有宽高的父标签包裹）。

<border-decorate title="标题" width="300px" height="300px">
 <template #content>
    <div>123</div>
  </template>
</border-decorate>