lg_frontend/components/BFC.vue

<!--
* @Description: Description
* @ComponentName: BFC
* @Author: wangzhigang11
* @Date: 2023-05-10 18:59
-->
<template>
  <div class="BFC">
    <div v-if="showLeft" class="left" :style="curStyle">
      <slot name="left"></slot>
    </div>
    <div v-if="showRight" class="right" :style="curStyle">
      <slot name="right"></slot>
    </div>
    <div v-if="showCenter" class="center" :style="curStyle">
      <slot name="center"></slot>
    </div>
  </div>
</template>

<script>
import {getSize} from "@/utils/tools";

  export default {
    name: 'BFC',
    components: {},
    mixins: [],
    inject: [],
    provide() {
      return {
        BFC: this
      }
    },
    props: {
      height: {
        type: [Number, String],
        default: '100%'
      }
    },
    data() {
      return {}
    },
    computed: {
      curStyle () {
        return {
          height: getSize(this.height)
        }
      },
      showLeft () {
        const left = this.$slots.left
        return left && left.length > 0
      },
      showRight () {
        const right = this.$slots.right
        return right && right.length > 0
      },
      showCenter () {
        const center = this.$slots.center
        return center && center.length > 0
      }
    },
    watch: {},
    created() {
    },
    beforeDestroy() {
    },
    mounted() {
    },
    methods: {},
  }
</script>

<style scoped lang="less">
@import "assets/styles/mixin";
  .BFC {
    width: 100%;
    height: 100%;
    .clear-fix;
    pointer-events: none;
    .left {
      float: left;
      .clear-fix;
      pointer-events: auto;
    }
    .right {
      float: right;
      .clear-fix;
      pointer-events: auto;
    }
    .center {
      overflow: hidden;
      .clear-fix;
    }
  }

</style>