当前位置: 首页 > Web前端 > vue.js

Element-UI使用篇——el-tab使用+样式修改合集

时间:2023-03-31 23:23:32 vue.js

el-tab是tab切换页面1.功能1.1。手动切换tab使用场景:点击tab1中的按钮,自动切换到tab2,实现:searchBtnHandle(){this.activeName="tab2'sname";//每个tab都有name属性,可以找到这个tab,activename属性绑定当前活动的tab},2.样式2.1,修改tabItem样式(包括header和content).el-tabs__item{padding:020px;高度:40px;-webkit-box-sizing:边框框;框大小:边框框;行高:40px;显示:内联块;列表样式:无;字体大小:15px;字体粗细:500;颜色:#303133;);}2.3修改tabheader.el-tabs--card>.el-tabs__header{border-bottom:1pxsolid#E4E7ED;背景色:gainsboro;//修改背景色}2.4修改活动表头style.el-tabs__item.is-active{color:#FFDEAD;//修改活动表头的字体颜色,默认为蓝色}2.5修改鼠标移动到表头时的样式。el-tabs__item:hover{color:#FFDEAD;//修改鼠标移动到表头时的字体颜色,默认为浅蓝色cursor:pointer;//鼠标移动到表头时的鼠标样式,默认为小手}