这是一个标签组件 <template> <SeptTabs :data="data" v-model="current"></SeptTabs> </template> <script> export default { data() { return { data:[ { icon: "application2", label: "标签1", code:'1' }, { label: "标签2", code:'2' }, ], current: 0,}}} </script> 选项卡切换组件,常用于平级区域大块内容的的收纳和展现。 (属性 :value、说明:通过v-model绑定当前激活的tab索引,默认值:String |Number). (属性 :only。说明:双向绑定值改为code属性。数据类型 :Boolean 默认值:false)。 (事件名:exe-change ,说明:激活的标签改变时触发,返回当前被激活的标签内容,返回值:被选中项的数据) code是唯一标识 请问 我该怎么做才能点击不同的标签后 显示不同标签的内容
时间: 2024-02-10 12:12:12 浏览: 50
你可以在组件中新增一个插槽,然后在插槽中根据选中的标签的code属性值来显示不同的内容。具体实现方法如下:
1. 在组件的标签中添加一个插槽,例如:
```html
<SeptTabs :data="data" v-model="current" :only="true" @exe-change="handleTabChange">
<template #content="{activeData}">
<!-- 根据选中的标签的code属性值来显示不同的内容 -->
<div v-if="activeData.code === '1'">
标签1的内容
</div>
<div v-else-if="activeData.code === '2'">
标签2的内容
</div>
</template>
</SeptTabs>
```
2. 在组件的data选项中新增一个变量,例如selectedTab,用来保存选中的标签的数据。
3. 在组件的methods选项中新增一个方法,例如handleTabChange,用来处理标签切换事件。在这个方法中,将选中的标签的数据保存到selectedTab变量中。
示例代码如下:
```html
<template>
<div>
<SeptTabs :data="data" v-model="current" :only="true" @exe-change="handleTabChange">
<template #content="{activeData}">
<!-- 根据选中的标签的code属性值来显示不同的内容 -->
<div v-if="activeData.code === '1'">
标签1的内容
</div>
<div v-else-if="activeData.code === '2'">
标签2的内容
</div>
</template>
</SeptTabs>
</div>
</template>
<script>
export default {
data() {
return {
data: [
{
icon: "application2",
label: "标签1",
code: "1"
},
{
label: "标签2",
code: "2"
}
],
current: 0,
selectedTab: {}
};
},
methods: {
handleTabChange(activeData) {
// 保存选中的标签的数据
this.selectedTab = activeData;
}
}
};
</script>
```
在上面的代码中,我们在SeptTabs组件的标签中添加了一个插槽,命名为content,并绑定了一个对象,用来接收选中的标签的数据。在插槽中,根据选中的标签的code属性值来显示不同的内容。在组件的data选项中新增了一个selectedTab变量,用来保存选中的标签的数据。在组件的methods选项中新增了一个handleTabChange方法,用来处理标签切换事件,将选中的标签的数据保存到selectedTab变量中。
阅读全文