vue 可折叠面板的工作区组件

最新推荐文章于 2024-09-19 14:12:37 发布

wyljz

最新推荐文章于 2024-09-19 14:12:37 发布

阅读量2.1k

点赞数

分类专栏： js vue-js 文章标签： vue可折叠面板

本文链接：https://blog.csdn.net/wyljz/article/details/88887752

版权

vue-js 同时被 2 个专栏收录

43 篇文章 1 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

这个组件中使用了elementui的两个图标
组件Js：

Vue.component('work-container', {
    props: ['height'],
    data: function () {
        return {
            isCollapse: false
        }
    },
    computed: {
        topbarcssobj: function () {
            var obj = { padding: '3px' };
            if (this.isCollapse) {
                obj.display = 'none';
            }
            else {
                obj.display = 'block';
                if (this.height) {
                    obj.height = this.height + 'px';
                } else {
                    obj.height = '40px';
                }
            }
            return obj;
        },
        btniconcssobj: function () {
            return this.isCollapse ? 'el-icon-caret-bottom' : 'el-icon-caret-top';
        },
        strview: function () {
            return this.isCollapse ? '显示' : '隐藏';
        }
    },
    methods: {
        togglebar: function () {
            this.isCollapse = !this.isCollapse;
        }
    },
    template: '<el-container>\
                    <el-header v-bind:style="topbarcssobj">\
                    <slot name="tbar"></slot>\
                    </el-header>\
                    <el-main>\
                    <div style="margin:3px;">\
                        <div style="float:left;margin-right:10px;cursor:pointer;color: #d3dce6;display:none;" v-on:click="togglebar">\
                            <i v-bind:class="btniconcssobj">{{strview}}查询条件</i>\
                        </div>\
                        <div>\
                        <slot name="btn"></slot>\
                        </div>\
                    </div>\
                    <div>\
                        <slot name="work"></slot>\
                    </div>\
                    </el-main>\
                  </el-container>'
});

调用：

<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>