vue 源代码创建tabs

<ul class="tabs">

<li class="li-tab" v-for="(item,index) in tabsParam"

@click="toggleTabs(index)"

:class="{active:index==nowIndex}">{{item}}</li>

<span class='tabLeft'>

<el-radio-group v-model="radioData" size='small' @change='radioDataChange' >

<el-radio-button label="今日"></el-radio-button>

<el-radio-button label="本周"></el-radio-button>

<el-radio-button label="本月"></el-radio-button>

<el-radio-button label="全年"></el-radio-button>

</el-radio-group>

<el-date-picker

ref='picker'

v-model="value7"

type="daterange"

align="right"

unlink-panels

range-separator="~"

@change='handleChange'

start-placeholder="开始日期"

end-placeholder="结束日期"

format="yyyy 年 MM 月 dd 日"

value-format="timestamp">

</el-date-picker>

</span>

</ul>

<el-row v-show='nowIndex==0'>

1111

</el-row>

<el-row v-show='nowIndex==1'>

2222

</el-row>

 

css:

.tabs{

border-bottom:1px solid #eee;

position: relative;

width: 100%;

height: 30px;

font:0;

padding:0;

text-align:justify;

}

.li-tab{

width: 6%;

height: 100%;

display:inline-block;

text-align: center;

}

.tabLeft{

position: absolute;

right:0;

top:-50%;

text-align: center;

vertical-align: middle

}