lg_frontend/components/ModuleContent.vue

<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;
    z-index: 111;
    .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>