详情页布局

介绍

TabLayout 组件分为上下两部分，上部分为 TabNav 标签菜单，下部分为标签对应内容区域，该区域可嵌套 container-layout 组件使用。

文件目录

└─ src
   └─ components
      └─ Layout
         └─ TabLayout】
            ├─ index.js
            ├─ index.vue
            └─ TabNav.vue

详情页布局如下图

TabLayout 区域布局如下，内容区域可嵌套 container-layout 组件使用。

源码解析

该组件类似于 el-tabs 标签页功能，但顶部只是菜单的展示与切换，内容区需要用户自己定义，不会随菜单变化而自动变更。

<template>
  <div class="tab-wrapper">
		<div class="tab-container">
			<!-- tab -->
      <div class="tab-header">
				<!-- components 组件名称列表 -->
        <tab-nav :components="components" :value="value" @on-change="onChange">
          <slot name="header" />
        </tab-nav>
      </div>

			<!-- tab 对应内容 -->
      <div class="tab-content">
        <slot />
      </div>
    </div>
  </div>
</template>

使用

<!-- currentView 当前显示的组件名称 -->
<tab-layout :components="components" v-model="currentView">
	<!-- 可自定义传入头部内容，显示在头部右侧 -->
	<template slot="header">
		<m-button type="create" size="mini" @click="handleClick()" />
	</template>

	<!-- 内容区域 -->
	<transition name="fade">
		<keep-alive>
			<!-- 动态组件 -->
			<component :is="currentView" :ref="currentView" />
		</keep-alive>
	</transition>
</tab-layout>

watch: {
	// 当前显示的动态路由变更时，变更路由地址
	currentView(nVal, oVal) {
		if (nVal === oVal || nVal === this.$route.query.view) return;
		this.$router.replace("?view=" + nVal);
	},
},
created() {
	// 如果当前动态组件名称为空时，置为默认动态组件名
	this.currentView = this.$route.query.view || "Basic";
},