html
复制代码
<template>
<view class="my-tab w-100 flex-center">
<view class="tab-without">
<view class="switch-tab w-100" :style="{height:height,borderRadius:borderRadius,border:borderBox,width:width,backgroundColor:mainBg}">
<block v-for="(item,index) in tabList" :key="index">
<view class="h-100 one flex-center font-weight-550" @click="tabClick(index)">{{item}}
</view>
</block>
</view>
<view class="zg-view flex-center"
:style="{left:tabLeft,borderRadius:radius,backgroundColor:bgColor,color:textColor,height:height,width:themeWidth}">
{{tabList[tabIndex]}}
</view>
</view>
</view>
</template>
javascript
复制代码
<script>
export default {
props: {
/* 主体的所需数据的宽度*/
width: {
type: String,
default: "572rpx"
},
/* 主体的所需数据的高度*/
height: {
type: String,
default: "52rpx"
},
/* 主体的所需数据的圆角*/
borderRadius: {
type: String,
default: "26rpx"
},
/* 主体的所需数据的边框*/
borderBox: {
type: String,
default: '2rpx solid #333333'
},
/* 主体的所需数据的背景颜色*/
mainBg: {
type: String,
default: '#fff'
},
/* 切换的数据 */
tabList: {
type: Array,
default: () => {
return ['本月数据', '季度数据', '半年数据', '本年数据']
}
},
/* 滑块的背景色 */
bgColor: {
type: String,
default: "#333"
},
/* 滑块的文字颜色*/
textColor: {
type: String,
default: "#fff"
},
},
computed: {
/* 计算滑块的宽度占比 */
themeWidth() {
return 100 / this.tabList.length + '%'
},
/* 滑块移动的距离 */
tabLeft() {
return (100 / this.tabList.length) * this.tabIndex + '%'
},
/* 滑块的圆角 */
radius() {
let text = ''
if (this.tabIndex == 0 && this.borderRadius != '') {
text = `${this.borderRadius} 0 0 ${this.borderRadius}`
}
if (this.tabList.length - 1 == this.tabIndex && this.borderRadius != '') {
text = `0 ${this.borderRadius} ${this.borderRadius} 0`
}
return text
}
},
data() {
return {
tabIndex: 0
}
},
methods: {
/* 切换方法，同时向外暴露当前点击的按钮 */
tabClick(index) {
this.tabIndex = index
this.$emit('tabClick', index)
}
},
}
</script>
