lg_frontend/components/ModuleContent.vue

108 lines
1.8 KiB
Vue

<!--
* @Description: 内容
* @ComponentName: ModuleContent
* @Author: wangzhigang11
* @Date: 2023-05-06 18:30
-->
<template>
<div class="Content " :style="curStyle">
<div class="content-box" :style="{padding}" :class="{ noneEvent }">
<slot></slot>
</div>
</div>
</template>
<script>
import {getSize} from "@/utils/tools";
export default {
name: 'ModuleContent',
components: {},
mixins: [],
inject: [],
provide() {
return {
Content: this
}
},
props: {
noneEvent: {
type: Boolean,
default: false
},
height: {
type: [Number, String],
default: 'auto'
},
scroll: {
type: Boolean,
default: true
},
padding: {
type: String,
default: '20px 50px'
},
unShowBackground: {
type: Boolean,
default: true
},
border: {
type: Boolean,
default: true
}
},
data() {
return {}
},
computed: {
curStyle () {
if (this.height === 'auto') {
return {
flex: 1
}
}
return {
height: getSize(this.height)
}
}
},
watch: {},
created() {
},
beforeDestroy() {
},
mounted() {
},
methods: {},
}
</script>
<style scoped lang="less">
@import "assets/styles/mixin";
.Content {
width: 100%;
box-sizing: border-box;
overflow: hidden;
position: relative;
pointer-events: none;
.content-border {
}
.content-header {
}
.content-body {
}
.content-box {
height: 100%;
@include clearfix;
position: relative;
padding: 8px;
box-sizing: border-box;
pointer-events: auto;
&.noneEvent {
pointer-events: none;
}
}
}
</style>