前端组件化之tabPage
程序员文章站
2022-05-30 20:25:46
...
该组件主要是简化多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 | – | – |
推荐阅读
-
深入理解Vue.js轻量高效的前端组件化方案
-
19.DjangoRestFramework学习二之序列化组件、视图组件
-
Vue学习笔记进阶篇之函数化组件解析
-
【前端知识体系-JS相关】组件化和React
-
前端笔记之JavaScript面向对象(四)组件化开发&轮播图|俄罗斯方块实战
-
Angular.js组件之input mask对input输入进行格式化详解
-
前端笔记之Vue(四)UI组件库&Vuex&虚拟服务器初识
-
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
-
DjangoRestFramework学习二之序列化组件
-
前端笔记之React(一)初识React&组件&JSX语法