<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <style> [v-cloak]{ display:none; } .tabs{ font-size:14px; color:#434b59; } .tab-bar:after{ content:""; display: block; width: 100%; height: 1px; background-color:pink; margin-top: -1px; } .tabs-tabs{ display: inline-block; padding:4px 16px; margin-right: 6px; border: 1px solid pink; position: relative; } .tabs-tab-active{ color:#3399ff; border-top:1px solid #3399ff; border-bottom: 1px solid #ffffff; } .tabs-tab-active:before{ content:""; display: block; height: 1px; top: 0; left: 0; right: 0; } .tabs-content{ padding: 8px 0; } </style> </head> <body> <div id="app" v-cloak> <tabs v-model="activeKey"> <pane label="标签一" name="1">标签一的内容</pane> <pane label="标签二" name="2">标签二的内容</pane> <pane label="标签三" name="3">标签三的内容</pane> <pane label="标签四" name="4">标签四的内容</pane> </tabs> </div> <script> var vm=new Vue({ el:"#app", data:{ activeKey:'1' } }) Vue.component('tabs',{ template:` <div class="tabs"> <div class="tabs-bar"> <div class="tabCls(item)" v-for="(item,index)in navList" @click="handleChange(index)"> {{item.label}} </div> </div></div> <div class="tabs-content"> <slot></slot> </div>`, props:{ value:{ type:[String,Number] } }, data:function (){ return{ navList:[], currentValue:this.value }
时间: 2025-06-25 14:17:20 浏览: 12
### Vue 自定义 Tabs 组件实现及样式设计
#### 1. 组件结构
在 Vue 中，`Tabs` 和 `Pane` 是常见的组合组件模式。为了实现这一功能，可以通过父组件 (`Tabs`) 来管理子组件 (`Pane`) 的状态和逻辑[^1]。
以下是基本的组件结构：
```html
<template>
<div class="tabs">
<!-- Tab 导航 -->
<div class="tab-header">
<div
v-for="(item, index) in tabsList"
:key="index"
:class="{ 'active': activeIndex === index }"
@click="selectTab(index)"
class="tab-item"
>
{{ item.label }}
</div>
</div>
<!-- Tab 内容区域 -->
<div class="tab-content">
<slot></slot> <!-- 动态渲染 Pane 子组件的内容 -->
</div>
</div>
</template>
```
#### 2. 数据绑定与交互逻辑
通过数据绑定来控制当前激活的 Tab 面板。这里使用 `v-model` 或者内部变量 `activeIndex` 来跟踪选中的索引位置[^3]。
```javascript
<script>
export default {
data() {
return {
activeIndex: 0,
tabsList: [] // 存储所有的 tab 标签项
};
},
methods: {
selectTab(index) {
this.activeIndex = index;
}
},
created() {
this.tabsList = [
{ label: "首页", content: "这是首页内容" },
{ label: "设置", content: "这是设置页内容" },
{ label: "帮助", content: "这是帮助页面内容" }
];
}
};
</script>
```
#### 3. 样式设计
为了让每个标签具有相同的宽度并居中显示，可以采用 CSS Flexbox 布局技术[^2]。
```css
<style scoped>
.tabs {
width: 100%;
}
.tab-header {
display: flex;
justify-content: center; /* 居中 */
border-bottom: 1px solid #ccc;
}
.tab-item {
padding: 10px 20px;
cursor: pointer;
text-align: center;
flex-grow: 1; /* 让每个标签占据相同比例的空间 */
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.tab-item:hover {
background-color: #f0f0f0;
}
.tab-item.active {
color: white;
background-color: blue;
}
</style>
```
#### 4. 子组件 (Pane)
`Pane` 可以作为插槽的一部分动态加载到 `Tabs` 容器中。这样可以根据不同的需求灵活扩展面板数量和内容。
```html
<!-- Parent Component Usage Example -->
<Tabs>
<Pane name="home">Home Content Here</Pane>
<Pane name="settings">Settings Content Here</Pane>
<Pane name="help">Help Content Here</Pane>
</Tabs>
```
```javascript
// Pane.vue
<template>
<div v-if="isActive">{{ content }}</div>
</template>
<script>
export default {
props: ['name', 'content'],
computed: {
isActive() {
return this.$parent.activeIndex === this.index;
}
}
};
</script>
```
---
### 总结
上述方法展示了如何构建一个基础的自定义 `Tabs` 组件及其对应的 `Pane` 子组件。它利用了 Vue 的响应式特性以及现代布局工具（如 Flexbox），从而实现了既美观又实用的效果[^3]。
阅读全文
相关推荐
