vue 可摺疊面板的工作區組件

這個組件中使用了elementui的兩個圖標
組件Js：

/**
工作區組件
調用示例：
<work-container v-bind:height="80">
        <template v-slot:tbar>
            查詢表單
        </template>
        <template v-slot:work>
            工作區
        </template>
    </work-container>
**/

Vue.component('work-container', {
    props: ['minheight', 'height'],
    data() {
        return {
            isCollapse: true
        }
    },
    computed: {
        heightobj: function () {
            var obj = {
                minheight: 50,
                height: 100,
                btnheight: 40
            };
            if (this.minheight) {
                obj.minheight = this.minheight;
            }
            if (this.height) {
                obj.height = this.height;
            }
            console.log(obj);
            return obj;
        },
        btniconcssobj: function () {
            return this.isCollapse ? 'el-icon-caret-bottom' : 'el-icon-caret-top';
        },
        topbarcssobj: function () {
            var obj = {};
            if (this.isCollapse) {
                obj.display = 'none';
            }
            else {
                obj.display = 'block';
                obj.height = (this.heightobj.height - this.heightobj.btnheight) + 'px';
                obj.lineHeight = obj.height;
            }
            return obj;
        },
        topbarcontainercssobj: function () {
            var obj = {
                width: '100%',
            };
            if (this.isCollapse) {
                obj.height = this.heightobj.minheight + 'px';
            } else {
                obj.height = this.heightobj.height + 'px';
            }
            return obj;
        },
        strview: function () {
            return this.isCollapse ? '顯示' : '隱藏';
        },
        maincssobj: function () {
            var obj = {
                position: 'relative',
                width: '100%',
                overflowX: 'auto',
                overflowY: 'auto'
            }
            var clientHeight = document.documentElement.clientHeight;
            var height = this.isCollapse ? (clientHeight - this.heightobj.minheight) : (clientHeight - this.heightobj.height);
            obj.height = (height - 16) + 'px';
            return obj;
        },
        togglebtncssobj: function () {
            var obj = {
                lineHeight: this.heightobj.btnheight + 'px',
                color: '#d3dce6',
                borderBottom: '1px solid #ccc',
                cursor: 'pointer'
            };
            return obj;
        }
    },
    methods: {
        togglebar: function () {
            this.isCollapse = !this.isCollapse;
        }
    },
    template: '<div>\
                      <div v-bind:style="topbarcontainercssobj">\
                        <div v-bind:style="topbarcssobj"><slot name="tbar"></slot></div>\
                        <div v-bind:style="togglebtncssobj" v-on:click="togglebar">\
                            <i v-bind:class="btniconcssobj">{{strview}}查詢條件</i>\
                        </div>\
                      </div>\
                      <div v-bind:style="maincssobj"><slot name="work"></slot></div>\
                      </div>'
})

調用：

<script src="~/Scripts/vue/workcontainer.js"></script>

  <work-container v-bind:height="80">
        <template v-slot:tbar>
            <spec-combo v-on:selectspec="setSpec"></spec-combo>
            <ban-input v-on:selectban="setBan"></ban-input>
            <grade-input v-on:selectban="setGrade"></grade-input>

        </template>
        <template v-slot:work>
            {{spec}}
            {{ban}}
            {{grade}}
        </template>
    </work-container>