97 lines
1.7 KiB
Vue
97 lines
1.7 KiB
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>
|