欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端组件化之tabPage

程序员文章站 2022-05-30 20:25:46
...

前端组件化之tabPage


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

tabPage

前端组件化之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
相关标签: vue自定义组件