在Vue项目中自定义tab组件可修改样式,相对element和antd框架更容易得到想要的样式
<template>
<!-- 测试Tab组件 -->
<div>
<div class="outer-div">
<header class="header">
<ul class="tab-tilte">
<li :class="{ active: tab == 0 }" @click="tab = 0">标题一</li>
<li :class="{ active: tab == 1 }" @click="tab = 1">标题二</li>
</ul>
</header>
<div class="tab-content">
<!-- 可以使用自定义组件 -->
<!-- <component-one v-show="tab == 0"></component-one>
<component-two v-show="tab == 1"></component-two> -->
<div v-show="tab == 0">内容一</div>
<div v-show="tab == 1">内容二</div>
</div>
</div>
</div>
</template>
<script>
// import componentOne from './componentOne'
// import componentTwo from './componentTwo'
export default {
name: "TestTab",
// components: {
// componentOne,
// componentTwo
// },
data() {
return {
tab: "0",
};
},
};
</script>
<style scoped>
.outer-div {
padding: 24px;
margin: 0 auto;
}
.header {
height: 54px;
width: 100%;
border-bottom: 1px solid #ebebeb;
margin-bottom: 24px;
}
ul li {
margin: 0;
padding: 0;
list-style: none;
}
.tab-tilte {
font-family: PingFangSC-Semibold;
letter-spacing: 0;
width: 90%;
}
.tab-tilte li {
float: left;
font-size: 24px;
color: #999999;
line-height: 53px;
text-align: center;
margin-right: 30px;
cursor: pointer;
}
/* 点击对应的标题添加对应的背景颜色 */
.tab-tilte .active {
color: #3385ff;
border-bottom: 2px solid #3385ff;
}
</style>
上述代码实现效果如下,
当然你还可以自己写对应的css代码修改样式。