프런트엔드 기술이 지속적으로 업데이트되면서 인기 있는 프런트엔드 프레임워크인 Vue는 많은 개발자들의 첫 번째 선택이 되었습니다. 실제 프로젝트에서는 다양한 기능 모듈을 전환하고 관리하기 위해 탭 구성 요소와 다중 탭 페이지를 사용해야 하는 경우가 많습니다. 이번 글에서는 Vue를 사용하여 간단한 탭 컴포넌트와 멀티탭 페이지를 구현하는 방법을 소개하겠습니다.
1. 간단한 탭 컴포넌트 구현
탭 목록과 현재 선택된 탭 페이지의 내용을 표시하려면 프로젝트에 Tab.vue 컴포넌트를 생성하세요.
<template>
<div>
<div class="tab-header">
<div class="tab-item"
v-for="(tab, index) in tabs"
:key="index"
:class="{ active: index === currentIndex }"
@click="handleTab(index)">
{{ tab.title }}
</div>
</div>
<div class="tab-content">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: 'Tab',
props: {
tabs: {
type: Array,
required: true,
},
currentIndex: {
type: Number,
default: 0,
},
},
methods: {
handleTab(index) {
this.$emit('tabchange', index);
},
},
};
</script>이 구성 요소에서는 v-for 지시문을 사용하여 수신 탭 배열을 반복함으로써 각 탭의 제목을 탭 항목으로 렌더링합니다. 선택한 탭 페이지의 currentIndex는 탭 항목에 활성 클래스를 추가하여 현재 선택한 탭 페이지를 강조 표시합니다. 탭 구성 요소에는 탭 페이지의 콘텐츠를 표시하는 데 사용되는 자체 슬롯 슬롯이 있습니다.
탭 컴포넌트를 사용해야 하는 페이지에서 Tab 컴포넌트를 가져와 템플릿에서 사용하고, 표시해야 하는 탭 페이지를 Tab 컴포넌트로 전달합니다. tabs 배열의 멤버로 사용하고 currentIndex 속성을 통해 현재 선택된 탭 페이지의 인덱스를 지정합니다. 또한 Tab 구성 요소의 tabchange 이벤트를 수신하여 상위 구성 요소의 currentIndex 값을 변경하여 현재 선택된 탭 페이지를 제어합니다.
<template>
<div>
<Tab :tabs="tabs" :currentIndex="currentIndex" @tabchange="handleChange">
<div v-for="(tab, index) in tabs" :key="index">
{{ tab.content }}
</div>
</Tab>
</div>
</template>
<script>
import Tab from './Tab.vue';
export default {
name: 'App',
components: {
Tab,
},
data() {
return {
currentIndex: 0,
tabs: [
{
title: 'tab1',
content: '这是第一个 tab 页的内容',
},
{
title: 'tab2',
content: '这是第二个 tab 页的内容',
},
],
};
},
methods: {
handleChange(index) {
this.currentIndex = index;
},
},
};
</script>이 상위 구성 요소에서는 먼저 Tab 구성 요소를 가져온 다음 각 탭 페이지의 제목과 내용을 저장할 탭 배열을 만들어야 합니다. Tab 구성 요소를 각각 초기화하려면 두 가지 속성인 tab과 currentIndex를 템플릿에 전달해야 합니다. handlerChange 메서드에서는 tabchange 이벤트를 수신하므로 상위 구성 요소에서 currentIndex 값을 업데이트하여 다른 탭 페이지를 선택할 수 있습니다.
2. 멀티탭 컴포넌트 구현
프로젝트에서 멀티탭 기능이 있는 페이지를 생성하려면 먼저 페이지 레이아웃을 고려해야 합니다. 이 기사에서는 Element UI의 레이아웃 구성 요소를 사용하여 페이지 인프라를 구축한 다음 Vue Router를 통해 라우팅 구성을 완료합니다. 다중 탭 시나리오에서는 각 탭 페이지가 라우팅 페이지로 간주될 수 있으므로 해당 라우팅 정보를 라우팅 테이블에 추가해야 합니다.
<template>
<div class="page-container">
<el-container>
<el-header>
<h1>{{ pageTitle }}</h1>
</el-header>
<el-container>
<el-aside style="width: 200px; height: 100%">
<el-menu
:default-active="activeMenu"
@select="handleSelect"
unique-opened
:collapse="isCollapse">
<el-submenu v-for="menuGroup in menuList" :key="menuGroup.name" :index="menuGroup.name">
<template slot="title">
<i :class="menuGroup.icon"></i>
<span>{{ menuGroup.title }}</span>
</template>
<el-menu-item v-for="menuItem in menuGroup.children" :key="menuItem.path" :index="menuItem.path">
<i :class="menuItem.icon"></i>
<span slot="title">{{ menuItem.title }}</span>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<router-view/>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
name: 'PageLayout',
data() {
return {
pageTitle: '多标签页示例',
menuList: [
{
name: 'group1',
title: '分组 1',
icon: 'el-icon-s-home',
children: [
{
title: '页面 1',
path: '/page1',
icon: 'el-icon-s-order',
},
{
title: '页面 2',
path: '/page2',
icon: 'el-icon-s-data',
},
],
},
{
name: 'group2',
title: '分组 2',
icon: 'el-icon-s-management',
children: [
{
title: '页面 3',
path: '/page3',
icon: 'el-icon-s-flag',
},
{
title: '页面 4',
path: '/page4',
icon: 'el-icon-menu',
},
],
},
],
activeMenu: '',
isCollapse: false,
};
},
methods: {
handleSelect(index) {
this.activeMenu = index;
this.$router.push(index);
},
},
};
</script>상위 컴포넌트 PageLayout.vue에서 먼저 페이지 제목 pageTitle, 메뉴 목록 menuList 및 메뉴 확장 및 닫기에 대한 두 가지 상태 값 activeMenu 및 isCollapse를 설정했습니다. 그런 다음 요소 UI의 레이아웃 구성 요소를 사용하여 왼쪽에 메뉴 표시줄이 있고 오른쪽에 탭 콘텐츠가 있는 페이지의 기본 구조를 구축합니다. 메뉴 구성 요소 el-menu에서는 v-for 루프를 통해 메뉴 그룹과 메뉴 항목을 렌더링합니다. 메뉴 항목을 클릭하면 핸들 선택 메서드가 트리거되고 라우팅 경로가 지정됩니다. $router에 전달됩니다. push 메소드에서 해당 페이지로 이동합니다. 이 구성 요소에서는 해당 라우팅 구성 요소를 표시하기 위해 router-view를 사용해야 합니다.
페이지 레이아웃 및 라우팅 구성을 완료한 후 페이지에 탭 컴포넌트 및 멀티탭 기능을 구현하고 해당 js 코드를 작성해야 합니다. 멀티탭 기능에서는 먼저 각 탭의 제목을 표시하고 탭 추가 및 삭제를 제어하는 데 사용되는 탭 표시줄 구성 요소인 TabBar.vue를 구현해야 합니다.
<template>
<div class="tab-bar" :class="{ fixed: isFixed }">
<div class="tab-bar-content">
<div v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: currentIndex === index }" @click="handleChange(index)">
{{ tab.title }}
<i class="el-icon-close" @click.stop="handleRemoveTab(index)"></i>
</div>
<i class="el-icon-circle-plus add-tab-btn" @click.stop="handleAddTab"></i>
</div>
</div>
</template>
<script>
export default {
name: 'TabBar',
props: {
tabs: {
type: Array,
required: true,
},
currentIndex: {
type: Number,
default: 0,
},
isFixed: {
type: Boolean,
default: false,
},
},
methods: {
handleChange(index) {
this.$emit('tabchange', index);
},
handleAddTab() {
this.$emit('addtab');
},
handleRemoveTab(index) {
this.$emit('removetab', index);
},
},
};
</script>이 구성 요소에서는 v-for 루프를 사용하여 수신 탭 배열을 렌더링함으로써 각 탭의 제목을 탭 항목으로 렌더링합니다. 선택한 탭 페이지는 탭 항목에 활성 클래스를 추가하여 현재 선택한 탭 페이지를 강조 표시합니다. tab-bar 구성 요소에는 세 가지 이벤트가 있습니다. tabchange는 탭 전환 이벤트를 수신하는 데 사용되며, addtab 및 Removetab은 탭 추가 및 제거 이벤트를 수신하는 데 사용되어 상위 구성 요소의 탭 배열 값을 업데이트합니다.
상위 컴포넌트 PageLayout.vue에서 페이지 구조 아래에 TabBar 컴포넌트를 추가하고 tabs 및 currentIndex 속성을 전달한 다음 해당 이벤트 메소드에서 tabs 배열을 업데이트하여 해당 탭 페이지를 작동시켜야 합니다.
<template>
<div class="page-container">
...
<el-main>
<tab-bar :tabs="tabs" :currentIndex="currentIndex" :isFixed="isFixed" @tabchange="handleChange" @addtab="handleAddTab" @removetab="handleRemoveTab"/>
<router-view v-if="$route.meta.keepAlive"/>
<keep-alive>
<router-view v-if="!$route.meta.keepAlive"/>
</keep-alive>
</el-main>
</div>
</template>
<script>
import TabBar from '../components/TabBar.vue';
export default {
name: 'PageLayout',
components: {
TabBar,
},
data() {
return {
tabs: [
{
title: '首页',
path: '/',
},
],
currentIndex: 0,
isFixed: false,
};
},
created() {
this.$router.afterEach((to, from) => {
const index = this.tabs.findIndex(tab => tab.path === to.path);
if (index !== -1) {
this.currentIndex = index;
this.isFixed = false;
} else {
this.addTab(to);
}
});
},
methods: {
handleChange(index) {
this.$router.push(this.tabs[index].path);
},
handleAddTab() {
const isExist = this.tabs.find(tab => tab.path === this.$route.path);
if (!isExist) {
this.tabs.push({
title: this.$route.meta.title || '',
path: this.$route.path,
});
this.currentIndex = this.tabs.length - 1;
this.isFixed = false;
} else {
this.currentIndex = this.tabs.indexOf(isExist);
this.isFixed = false;
}
this.$router.push(this.$route.path);
},
handleRemoveTab(index) {
const targetTab = this.tabs[index];
const targetPath = targetTab.path;
this.tabs.splice(index, 1);
if (targetPath === this.$route.path) {
const lastIndex = this.tabs.length - 1;
const lastTab = this.tabs[lastIndex];
this.currentIndex = lastIndex;
this.$router.push(lastTab.path);
} else {
this.currentIndex = this.tabs.findIndex(tab => tab.path === this.$route.path);
}
},
},
};
</script>PageLayout.vue에서 먼저 각 탭 페이지의 라우팅 정보를 저장하기 위해 탭 배열을 만들었습니다. 생성된 후크 함수에서 현재 경로의 변경 사항을 수신하고 탭 배열에서 해당 탭 경로를 찾습니다. 존재하는 경우 해당 탭으로 직접 이동하고, 그렇지 않으면 현재 경로를 새 탭으로 추가합니다. HandleAddTab 메소드에서 현재 경로에 해당하는 탭이 이미 존재한다면 기존 탭을 직접 선택하고, 그렇지 않으면 탭 배열에 새 탭을 추가합니다. handlerRemoveTab 메소드에서는 배열의 splice 메소드를 사용하여 기존 탭을 삭제하고, tabs 배열에서 현재 선택된 탭을 찾고, currentIndex 및 $router의 점프 정보를 업데이트합니다.
3. 요약
이 글에서는 Vue 프레임워크와 관련 플러그인을 사용하여 탭 컴포넌트와 멀티탭 기능을 구현하는 방법을 소개합니다. 실제 구현 과정에서 구성 요소나 코드는 실제 프로젝트 요구 사항에 더 잘 적응하기 위해 특정 시나리오에 따라 유연하게 조정되어야 합니다. 일반적으로 탭 구성 요소와 다중 탭 기능은 프로젝트에 더 나은 유용성과 사용자 경험을 제공하고 프런트 엔드 페이지의 아키텍처 문제를 더 잘 해결할 수 있습니다.
위 내용은 Vue에서 탭 구성 요소와 다중 탭 페이지를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
