写一个使用@tab-click的例子
时间: 2024-06-01 08:13:56 浏览: 30
好的,以下是一个使用@tab-click的例子:
<!-- 定义一个tab组件 -->
<template>
<div class="tab-group">
<div
v-for="(tab, index) in tabs"
:key="index"
:class="{'active': activeIndex === index}"
@click="switchTab(index)"
@keydown.enter.prevent="switchTab(index)"
tabindex="0"
>
{{ tab }}
</div>
</div>
</template>
<script>
export default {
props: {
tabs: {
type: Array,
required: true
}
},
data() {
return {
activeIndex: 0
}
},
methods: {
switchTab(index) {
this.activeIndex = index
this.$emit('tab-click', index)
}
}
}
</script>
<!-- 使用tab组件并监听tab-click事件 -->
<template>
<div>
<TabGroup :tabs="['Tab 1', 'Tab 2', 'Tab 3']" @tab-click="handleTabClick" />
</div>
</template>
<script>
import TabGroup from './TabGroup.vue'
export default {
components: {
TabGroup
},
methods: {
handleTabClick(index) {
console.log(`Clicked tab ${index}`)
}
}
}
</script>
在上面的例子中,我们先定义了一个Tab组件,该组件接收一个tabs数组作为props,展示出这些tab,并在点击时切换选中状态和触发一个tab-click事件。
然后我们在另一个组件中使用Tab组件,并监听tab-click事件,当事件触发时,会调用handleTabClick方法并输出被点击的tab的索引。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)