element-ui代码
<template> <div style="width: 800px;"> <el-tabs v-model="activeName" type="card" @tab-click="handleClick"> <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane> <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane> <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane> <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> </el-tabs> </div> </template> <script> export default { data() { return { activeName: 'first' } }, methods: { handleClick(tab, event) { console.log(tab, event); } } } </script>
element-ui的效果
添加如下样式:
<style scoped lang="less"> ::v-deep .el-tabs { height: 606px; margin-top: 5px; //background-color: red; .el-tabs__header { // 去掉标签的下划线 border-bottom: none; .el-tabs__nav-scroll{ border-bottom: none; .el-tabs__nav{ display: flex; justify-content: center; align-items: center; margin-left: 50px; border-bottom: 0px; .el-tabs__item { //padding-bottom: 10px; line-height: 30px; width: 100px; height: 30px; text-align: center; border: 1px solid rgba(215, 215, 215, 1); } } } } } </style>
效果如下: