<template>
|
<view>
|
<u-tabbar class="custom-tabbar" zIndex="9999" :value="current" :fixed="true" :active-color="activeColor"
|
:inactive-color="inactiveColor">
|
<u-tabbar-item :text="item.name" @click="changeTabbar(item.url,index,item.name)"
|
v-for="(item,index) in tabbarList" :key="index">
|
<image class="tabbar-icon" slot="active-icon" :src="item.iconPathSelected"></image>
|
<image class="tabbar-icon" slot="inactive-icon" :src="item.iconPath"></image>
|
</u-tabbar-item>
|
</u-tabbar>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
current: Number,
|
list: {
|
type: Array,
|
default: () => []
|
}
|
},
|
data() {
|
return {
|
tabbarList: [],
|
inactiveColor: '#C7CED7',
|
activeColor: '#017BFC',
|
// activeColor: '#003399'
|
}
|
},
|
watch: {
|
list: {
|
handler(newVal) {
|
if (newVal && newVal.length > 0) {
|
this.tabbarList = newVal;
|
if (uni.getStorageSync("activeRole").roleName == "民警") {
|
this.inactiveColor = "#AFB8C3";
|
this.activeColor = "#003399";
|
} else {
|
this.inactiveColor = "#C7CED7"
|
this.activeColor = "#017BFC";
|
}
|
}
|
},
|
deep: true,
|
immediate: true
|
}
|
},
|
|
methods: {
|
changeTabbar(url, index) {
|
if (this.current == index) return
|
uni.switchTab({
|
url
|
})
|
this.$emit("change", index)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.tabbar-icon {
|
width: 56rpx;
|
height: 56rpx;
|
}
|
|
/deep/.u-tabbar {
|
box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(107, 134, 159, 0.2);
|
}
|
</style>
|
