<div class="nameListClass">
<el-tabs v-model="tabName" @tab-click="tabClick">
<el-tab-pane label="中文" name="first">中文</el-tab-pane>
<el-tab-pane label="英文" name="second">英文</el-tab-pane>
</el-tabs>
</div>
.nameListClass {
// tab
.el-tabs__header {
width: 700px;
margin: 0 auto;
.el-tabs__nav {
float: none;
width: 100%;
display: flex;
justify-content: space-between;
.el-tabs__active-bar {
background-color: #ff4444;
}
.el-tabs__item {
flex: 1;
font-size: 25px;
height: 60px;
}
.el-tabs__item:hover {
color: #303133;
}
.el-tabs__item.is-active {
color: #ff4444;
}
}
}
}
data() {
return {
tabName: 'first',
}
},
methods: {
tabClick(tab, event) {
console.log(tab, event);
},
}