<template>
<div class="tab">
<div style="position: relative;" v-for="(item, index) in data" @click="tabClick(index ,item)" :key="index" :style="{width: 100/data.length + '%'}">
<div :class="index == isActived ? 'borderClickStyle':''">
<div :class="index == isActived ?'border-inner':''"></div>
</div>
<span class="tab-content" :style="{color:index == isActived ? '#FFFFFF':'rgba(255,255,255,0.70)'}">{{item.label}}</span>
</div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Array,
default: () => {
return []
}
}
},
data () {
return {
isActived: ''
}
},
methods: {
tabClick (index, item) {
this.isActived = index
this.$emit('tabListenEvent', item)
},
resetTabCss () {
this.tabClick(0, this.data[0])
}
}
}
</script>
<style>
.tab{
display: flex;
height:50px;
}
.split {
position: relative;
}
.tab-content {
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
display: inline-block;
white-space: nowrap;
cursor: pointer;
font-size: 16px;
font-family: SegoeUI;
}
.tab-content:hover {
color: #FFFFFF !important;
}
.borderClickStyle {
height: 3px;
background: #48DAFF;
}
.border-inner {
width:50%;
margin: auto;
box-shadow:0 8px 30px 6px #005DFF ;
/* background-image: linear-gradient(rgba(255,0,0,0) 0%, #005DFF 100% ); */
}
</style>
自定义tab
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 前言 系统自带的Tablayout用的也不错但是有些功能还不能满足我们这边开发,所以我这边自定义了一个tablay...
- 小程序最近是越来越火了……做小程序有一段时间了，总结一下项目中遇到的问题及解决办法吧。 项目中有个多 tab 嵌套...
- 原文链接作者：Arthur Knopper原文日期：2016-10-07译者：Crystal Sun Tab Ba...
- 1.编写布局文件 2.编写样式 注意border-bottom: 6rpx给的是6rpx ,tab-box的高度为...
