|
Vue3实现tab切换
使用 ref 创建了 tabs、contents 和 currentTab 这三个响应式变量，分别存储选项卡的文字、内容以及当前选中的选项卡索引。当点击某个选项卡时，调用 changeTab 函数来切换选项卡，并更新 currentTab 的值，从而更新选项卡的样式。
在样式中，我们定义了选项卡的样式，并且通过 v-show 来控制显示对应选项卡的内容。
最终效果就是点击不同的选项卡会切换到对应的内容，并且选中的选项卡文字带下划线，下划线宽度比文字宽度短，并且与文字居中。
{{ tab }}
{{ content }}
import { ref } from 'vue';
const tabs = ref(['Tab 1', 'Tab 2', 'Tab 3']);
const contents = ref(['Content 1', 'Content 2', 'Content 3']);
const currentTab = ref(0);
const changeTab = (index: number) => {
currentTab.value = index;
};
.tab-container {
display: flex;
}
.tab-item {
cursor: pointer;
margin-right: 20px;
position: relative;
}
.underline {
position: absolute;
bottom: 0;
left: 50%;
width: 50%; /* 下划线宽度比文字宽度短 */
height: 2px;
background-color: blue;
transform: translateX(-50%);
}
.selected {
font-weight: bold;
}
.content-container {
margin-top: 20px;
}
|