VUE仿造element-ui el-tabs标签页选项卡样式
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE仿造element-ui el-tabs标签页选项卡样式相关的知识,希望对你有一定的参考价值。
参考技术A 因为某个bug 以为 是 el-tabs 组件的问题,所以想直接仿造一个,结果发现 是其他问题,想想下次哪天会用到 就奉上这段样式这是用VUE写的。看得懂的 用 JQ 写其实逻辑都一样 没区别!
html:
<div class="tabsMain">
<ul class="tabsList">
<li :class="activeName==item.code?'active':''" v-for="(item,index) of tabList" :key="index" @click="handleClick(item,index)">item.name</li>
</ul>
<div v-if="activeName == 'tab-1'"></div> //本来想直接用 index 判断的 结果还是直接 仿造el-tabs的方式做吧
<div v-if="activeName == 'tab-2'"></div>
<div v-if="activeName == 'tab-3'"></div>
</div>
CSS:
.tabsMain
border: 1px solid #dcdfe6;
box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
margin: 0;
.tabsMain > div
padding: 10px;
.tabsList
width: 100%;
background: #f5f7fa;
overflow: hidden;
.tabsList li
float: left;
padding: 0 20px;
height: 40px;
box-sizing: border-box;
line-height: 40px;
list-style: none;
font-size: 14px;
font-weight: 500;
color: #303133;
transition: all .3s cubic-bezier(.645,.045,.355,1);
border: 1px solid transparent;
margin-bottom: -1px;
cursor: pointer;
.tabsList li.active
color: #409eff;
background-color: #fff;
border-right-color: #dcdfe6;
border-left-color: #dcdfe6;
white-space: nowrap;
position: relative;
transition: transform .3s;
z-index: 2;
.tabsList li:first-child
margin-left: -1px;
.tabsList li:last-child
margin-right: -1px;
data()
return:
activeName:'tab-1',
tabList:[
code:'tab-1',name:'标签-1',
code:'tab- 2,name:'标签-2',
code:'tab-3,name:'标签-3'
]
,
methods:
handleClick(item)
this.activeName = item.code
最后结果:图
以上是关于VUE仿造element-ui el-tabs标签页选项卡样式的主要内容,如果未能解决你的问题,请参考以下文章