提交5

lishifeng

2020-09-15 ce10677f47a14879424e7f562f78442cc03cfda1

 src/components/ContentBox.vue

@@ -1,13 +1,24 @@
<template>
    <div class="content-box" :class="{'no-border': noborder}">
        <div class="content-box-title" :class="getTitlePos">
            <slot name="title">{{title}}</slot>
    <div class="content-box-container" :class="{'content-box-hide': hide}">
        <div class="toggle-flag"
        v-if="toggle"
        @click="toggleChange">
            <i class="el-icon-arrow-left"></i>
        </div>
        <div class="content-box-content">
            <slot></slot>
        <div class="content-box" :class="{'no-border': noborder}" v-show="!hide">
            <div class="content-box-title" :class="getTitlePos" v-if="!noHeader">
                <slot name="title">{{title}}</slot>
                
            </div>
            <div class="content-box-content">
                <slot></slot>
            </div>
            <div class="content-box-footer">
                <slot name="footer"></slot>
            </div>
        </div>
        <div class="content-box-footer">
            <slot name="footer"></slot>
        <div class="box-tools">
            <slot name="box-tools"></slot>
        </div>
    </div>
</template>
@@ -28,6 +39,29 @@
            type: Boolean,
            default: false
        },
        noHeader: {
            type: Boolean,
            default: false
        },
        toggle: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            hide: false
        }
    },
    methods: {
        toggleChange() {
            this.hide = this.hide?false:true;
            this.$nextTick(()=>{
                setTimeout(()=>{
                    this.$emit('toggleChange', this.hide);
                }, 600);
            });
        }
    },
    computed: {
        getTitlePos: function() {
@@ -41,6 +75,11 @@
</script>

<style scoped>
.content-box-container {
    position: relative;
    box-sizing: border-box;
    height: 100%;
}
.content-box {
    display: flex;
    flex-direction: column;
@@ -69,6 +108,7 @@
    text-align: left;
}
.content-box-content {
    position: relative;
    flex: 1;
    margin-top: 4px;
    margin-left: 4px;
@@ -88,6 +128,44 @@
    line-height: 32px;
    font-weight: bold;
}
.toggle-flag {
    position: absolute;
    font-size: 20px;
    width: 20px;
    line-height: 40px;
    right: 1px;
    top: 50%;
    margin-top: -20px;
    z-index: 99;
    background-color: #000000;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.toggle-flag:hover {
    cursor: pointer;
    background-color: #252424;
}
.content-box-container .toggle-flag {
    transition: 0.5s ease;
}
.content-box-hide .toggle-flag {
    right: -21px;
    transform: rotate(180deg);
    transition: 0.5s ease;
}

.content-box-container {
    transition: 0.5s ease;
}
.content-box-container.content-box-hide {
    width: 0 !important;
    transition: 0.5s ease;
}
.box-tools {
    position: absolute;
    top: 4px;
    right: 8px;
}
</style>