前言
今天工作时有一个需求,大致是把elementUI的选项卡标签样式修改修改。起初是想直接重写element样式类,但是需求中还需对标签中的数字特殊处理,这种方式就行不通了。百度找了很久,终于在一个偏僻的角落找到了答案。
正文
使用插槽
其实这个解决方式,也是我第一时间想到的,但是查阅官网后,发现并没有对label的插槽。但是看着那位老哥的写法,试了试果然成功了。现在整理整理,发出来与大家共勉。
原始的代码以及效果图
<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane
v-for="item in tabs"
:label="item.count ? item.title + item.count : item.title"
:name="item.value"
:key="item.id"
>
{{ item.id }}
</el-tab-pane>
</el-tabs>
</template>
<script>javascript">
export default {
data() {
return {
activeName: "first",
tabs: [
{
title: "消息",
value: "first",
count: 3,
id: 1
},
{
title: "待办",
value: "second",
count: 4,
id: 2
},
{
title: "角色管理",
value: "third",
id: 3
}
]
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
}
}
};
</script>
<style scoped></style>
如果我对整体进行处理,比如把消息3
字体设置大一些,颜色改一改,那么你直接重写el-tab-pane
这个样式类即可;但现在我想给标签中的数字来点间距和背景色啥的,这种方式就不行了。下面是解决方法。
使用插槽后的代码和效果图
<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane
v-for="item in tabs"
:label="item.count ? item.title + item.count : item.title"
:name="item.value"
:key="item.id"
>
<div slot="label">
<span class="key">{{ item.title }}</span>
<span class="value" v-if="item.count">{{ item.count }}</span>
</div>
{{ item.id }}
</el-tab-pane>
</el-tabs>
</template>
<script>javascript">
export default {
data() {
return {
activeName: "first",
tabs: [
{
title: "消息",
value: "first",
count: 3,
id: 1
},
{
title: "待办",
value: "second",
count: 4,
id: 2
},
{
title: "角色管理",
value: "third",
id: 3
}
]
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
}
}
};
</script>
<style scoped>css">
.value {
color: #ff0000;
font-size: 16px;
}
</style>
如果你要是接过来一张设计稿,里面提及选项卡标签选中和未选中的字体颜色,大小,背景颜色等等,那么当你设置了这些样式之后,就会发现elementUI的默认tab切换效果失效了。这时,我们就要写一个active
类来控制切换样式。在这里我简单示范下。
最终代码以及预览图
<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane
v-for="item in tabs"
:label="item.count ? item.title + item.count : item.title"
:name="item.value"
:key="item.id"
>
<div
slot="label"
class="my-label"
:class="activeName === item.value ? 'tab-active' : ''"
>
<span class="key">{{ item.title }}</span>
<span class="value" v-if="item.count">{{ item.count }}</span>
</div>
{{ item.id }}
</el-tab-pane>
</el-tabs>
</template>
<script>javascript">
export default {
data() {
return {
activeName: "first",
tabs: [
{
title: "消息",
value: "first",
count: 3,
id: 1
},
{
title: "待办",
value: "second",
count: 4,
id: 2
},
{
title: "角色管理",
value: "third",
id: 3
}
]
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
}
}
};
</script>
<style scoped>css">
.my-label {
color: #424242;
}
.my-label .key {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
line-height: 20px;
}
.my-label .value {
vertical-align: middle;
display: inline-block;
width: 21px;
height: 16px;
font-size: 12px;
font-family: CZ-Regular, CZ;
font-weight: 400;
line-height: 15px;
background: #f5f5f5;
border-radius: 8px;
margin: -4px 0 0 4px;
}
.tab-active {
color: #01b27a;
}
.tab-active .value {
background-color: #e5f7f1;
}
</style>
如果对你有帮助的话,请点一个赞吧