修改

whychdw

2019-09-11 15f01899fe3e3e7d8806accb9b9894be5615e70d

 src/components/SquareBox.vue

@@ -1,5 +1,5 @@
<template>
    <div class="square-box">
    <div class="square-box" :class="setFull">
        <div class="square-box-mask"></div>
        <!-- 左上 -->
        <div class="square-box-left-top"></div>
@@ -13,13 +13,14 @@
        <div class="square-box-left-bottom"></div>
        <div class="square-box-container">
            <div class="square-box-title" v-if="showTitle"><Icon :type="icon" /><span class="square-box-title-text">{{title}}</span></div>
            <div class="square-box-content" :style="style">
            <div class="square-box-content" :style="getContentStyle">
                <slot></slot>
            </div>
        </div>
    </div>
</template>
<script>
import $ from 'jquery'
export default {
    props: {
        minHeight: {
@@ -38,6 +39,7 @@
            type: Boolean,
            default: true
        },
        full: false
    },
    data() {
        return {
@@ -46,6 +48,26 @@
            }
        }
    },
    computed: {
        setFull: function() {
            if(typeof(this.full) != 'undefined') {
                return {
                    'full-container': true
                }
            }
        },
        getContentStyle: function() {
            var result = {
                minHeight: this.minHeight
            };
            var root = $(this.$el);
            if(typeof(this.full) != 'undefined') {
                result.height = 'calc(100% - 95px)';
            }

            return result;
        }
    }
}
</script>
<style scoped>
@@ -55,6 +77,9 @@
    }
    .square-box {
        position: relative;
    }
    .square-box.full-container {
        height: 100%;
    }
    .square-box-mask {
        position: absolute;
@@ -70,6 +95,9 @@
        position: relative;
        padding: 1px;
    }
    .square-box.full-container .square-box-container {
        height: 100%;
    }
    .square-box-title {
        margin: 15px;
    }