71 lines
1.3 KiB
Vue
71 lines
1.3 KiB
Vue
<script>
|
|
export default {
|
|
name: "my-menu",
|
|
props: {
|
|
// 选择的菜单
|
|
tab: {
|
|
// 值类型
|
|
type: String,
|
|
// 默认值
|
|
default: ''
|
|
},
|
|
// 菜单列表
|
|
tabList: {
|
|
// 值类型
|
|
type: Array,
|
|
// 默认值
|
|
default: []
|
|
},
|
|
color:{
|
|
type:String,
|
|
default:'#4975fd'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
oneWitdh: 50
|
|
}
|
|
},
|
|
methods: {
|
|
getWidth() {
|
|
let length = this.$parent.tabList.length
|
|
this.oneWitdh = parseFloat(100) / parseFloat(length)
|
|
},
|
|
switchTab(e) {
|
|
this.$parent.tab = e
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="flex bview" style="text-align: center" v-if="tabList && tabList.length>0">
|
|
<view class="topTitle" :style="{'width':this.oneWitdh+'%'}" :class="tab===item.id?'topTitle-active':''"
|
|
v-for="(item,i) in tabList" :key="i" @click="switchTab(item.id)">
|
|
<text>{{ item.name }}</text>
|
|
<view class="flex" :class="tab===item.id?'bottom-active':''"></view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.topTitle {
|
|
font-size: 35rpx;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
/*选择的tab*/
|
|
.topTitle-active {
|
|
font-size: 40rpx;
|
|
color: #4975fd;
|
|
}
|
|
|
|
.bottom-active {
|
|
margin: 0 auto;
|
|
width: 60rpx;
|
|
border-bottom: 6rpx solid #4975fd;
|
|
}
|
|
|
|
</style>
|