前端组件化之tabPage

该组件主要是简化多tab页面切换时的冗余代码，写成组件后，开发者不需要关系页面切换的逻辑，只需要书写Page1,Page2等页面即可

tabPage

代码分析

<template>
    <section class="page-container">
        <el-col :span=" 24" class="bg-fff padd-all-20 dis-flex flex-dir-column h-100pre pad-t-0">
            <!-- 本页title -->
            <el-col class="mar-b-20 cr-333 fz-18 page-header" :span="24">
                <el-tabs v-model="tabName" @tab-click="handleTab">
                    <el-tab-pane v-for="item in tabpanes" :label="item.label" :name="item.name" :key="item.name"></el-tab-pane>
                </el-tabs>
            </el-col>
            <!-- 第一行 -->
            <el-col :span="24" class="flex-auto">
                <component :is="componentId" ref="myComponent" v-loading="loading"></component>
            </el-col>
        </el-col>
    </section>
</template>

<script>
export default {
    name: 'tab-page',
    props: {
        tabpanes: {
            type: Array,
            required: true,
            default: function() {
                return [
                    // 格式为{ name: '1', label: 'tab1', components: Page1 },
                ]
            }
        }
    },
    data() {
        return {
            tabName: '',
            componentId: '',
            loading: false
        }
    },
    methods: {
        handleTab() {
            this.loading = true
            this.tabpanes.forEach(v => {
                if (v.name === this.tabName) {
                    this.componentId = v.components
                    setTimeout(() => {
                        this.loading = false
                    },500)
                }
            })
        }
    },
    created() {
        this.tabName = this.tabpanes[0].name
        this.handleTab()
    }
}
</script>

<style scoped>
.page-container {
    height: 100%;
    overflow-y: hidden;
    padding: 20px;
    box-sizing: border-box;
}
.bg-fff {
    background: #fff;
}
.padd-all-20 {
    padding: 20px;
}
.dis-flex {
	display: flex;
}
.flex-dir-column {
    flex-direction: column;
}
.page-header {
    min-height: 20px;
}
.h-100pre {
    height: 100%;
}
.pad-t-0 {
    padding-top: 0 !important;
}
.mar-b-20 {
    margin-bottom: 20px;
}
.cr-333 {
    color: #333;
}
.fz-18 {
    font-size: 18px;
}
</style>

组件使用

<template>
    <tab-page :tabpanes="tabpanes"></tab-page>
</template>

<script>
import Page1 from './page1.vue' //tab1 对应的组件
import Page2 from './page2.vue' //tab2 对应的组件
import TabPage from '@/components/page/tabPage.vue'	//引入tabPage组件

export default {
    name: 'test-page',
    components: {
        'tab-page': TabPage
    },
    data() {
        return {
        	/**
        	* tabpanes 为必参数，其中
        	* name：与选项卡绑定值 value 对应的标识符，表示选项卡别名
        	* label：选项卡标题
        	* components：选项卡对应渲染的组件
        	**/
            tabpanes: [
                { name: 'page1', label: 'tab1', components: Page1 },
                { name: 'page2', label: 'tab2', components: Page2 }
            ]
        }
    },
    methods: {}
}
</script>

<style>
</style>

属性

参数	说明	类型	可选值	默认值
tabpanes	子组件信息	Array	–	–