Vue封装公共样式组件

多个地方需要用到同一个边框，于是我们可以封装一个公共的样式组件，在需要的地方引入即可

<template>
  <div class="cfmcc-border__component" :class="{'cfmcc-angle_min':isMin}">
    <i class="cfmcc-border__angle cfmcc-left__top"></i>
    <i class="cfmcc-border__angle cfmcc-right__top"></i>
    <i class="cfmcc-border__angle cfmcc-left__bottom"></i>
    <i class="cfmcc-border__angle cfmcc-right__bottom"></i>
    <slot name="title"></slot>
    <slot></slot>
  </div>
</template>
<script>
export default {
  props: {
    isMin: {
      type: [Boolean],
      default: false
    }

  },
  computed: {}
}
</script>
<style lang="scss" scoped>
  .cfmcc-border__component {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(32, 121, 250, 0.51);
    box-sizing: border-box;
    position: relative;
    user-select: none;
    &.cfmcc-angle_min {
      i.cfmcc-border__angle {
        width: 2.4PX;
        height: 2.4PX;
      }
    }
    i.cfmcc-border__angle  {
      position: absolute;
      z-index: 1;
      width: 10PX;
      height: 10PX;
      border: 1px solid #32C5FF;
      box-sizing: border-box;
      &.cfmcc-left__top {
        border-right: transparent;
        border-bottom: transparent;
        left: -1px;
        top: -1px;
      }
      &.cfmcc-right__top {
        border-left: transparent;
        border-bottom: transparent;
        right: -1px;
        top: -1px;
      }
      &.cfmcc-left__bottom {
        border-right: transparent;
        border-top: transparent;
        left: -1px;
        bottom: -1px;
      }
      &.cfmcc-right__bottom {
        border-left: transparent;
        border-top: transparent;
        right: -1px;
        bottom: -1px;
      }
    }
  }
</style>