element tab选项卡标签样式

前言

今天工作时有一个需求，大致是把elementUI的选项卡标签样式修改修改。起初是想直接重写element样式类，但是需求中还需对标签中的数字特殊处理，这种方式就行不通了。百度找了很久，终于在一个偏僻的角落找到了答案。

正文

使用插槽

其实这个解决方式，也是我第一时间想到的，但是查阅官网后，发现并没有对label的插槽。但是看着那位老哥的写法，试了试果然成功了。现在整理整理，发出来与大家共勉。

原始的代码以及效果图

<template><el-tabs v-model="activeName" @tab-click="handleClick"><el-tab-panev-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>
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-panev-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>
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>
.value {color: #ff0000;font-size: 16px;
}
</style>

如果你要是接过来一张设计稿，里面提及选项卡标签选中和未选中的字体颜色，大小，背景颜色等等，那么当你设置了这些样式之后，就会发现elementUI的默认tab切换效果失效了。这时，我们就要写一个active类来控制切换样式。在这里我简单示范下。

最终代码以及预览图

<template><el-tabs v-model="activeName" @tab-click="handleClick"><el-tab-panev-for="item in tabs":label="item.count ? item.title + item.count : item.title":name="item.value":key="item.id"><divslot="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>
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>
.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>

如果对你有帮助的话，请点一个赞吧

element tab选项卡标签样式相关推荐

layui tab选项卡外部html页面,layui的Tab选项卡知识
layui的公共类: lay-filter=" " 事件过滤器.你可能会在很多地方看到他,他一般是用于监听特定的自定义事件.你可以把它看作是一个ID选择器 layui的公共属性: ...
使用jQuery开发tab选项卡插件
为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...
[Layui]主页tab选项卡操作(刷新页面，刷新选项卡，关闭，关闭其他，全部关闭)
主页tab选项卡操作(刷新页面,刷新选项卡,关闭,关闭其他,全部关闭) 效果如下: CSS <style>.layui-tab-item {height: 100%;width: 100% ...
layui获取tab页id_LayUI的Tab选项卡切换显示对应数据
LayUI tab选项卡 + 分页展示实现 Tab选项卡切换显示对应数据要求:实现tab选项卡改变的同时展示数据也跟着改变实现条件: 1.选项卡[官网 – 文档/示例 – 页面元素 – 选项卡] ...
动感效果的TAB选项卡 jquery 插件
动感效果的TAB选项卡 jquery 插件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
【Android UI设计与开发】第11期：顶部标题栏（二）ActionBar实现Tab选项卡和下拉导航列表
转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9050573 在上一篇文章中,我们只是大概的了解了一下关于ActionBar ...
用fieldset标签轻松实现Tab选项卡效果
fieldset是一个不常用的HTML标签,它可以将表单内的元素分组显示,legend标签为 fieldset 元素定义标题.由于各浏览器在显示fieldset和legend结构时会自动为其添加边框和 ...
html tab选项卡控件,tab选项卡插件
这是一款使用十分方便的.为移动设备定制的.可在水平和垂直两个方向上显示的jQuery和css3响应式tab选项卡插件.在你要显示很多不同的内容时,tab选项卡导航方式是十分有用的.常见的方式是在同一个 ...
iOS开发-iPad侧边栏Tab选项卡切换
Android中习惯了叫侧边栏,iOS中如果不习惯侧边栏称呼的话可以叫dock,侧边栏的切换,类似于Android中的底部导航栏的切换,iPad尺寸大了一些,导航的栏目放在侧边会显示的更好耐看一些.选 ...