我要评论
文章目录
前言
在uniapp的开发过程中，为了针对不同角色用户登录后的个性化需求，本文集成了uview-ui框架的tabbar组件。通过动态权限配置机制，能够根据用户的角色信息灵活地调整tabbar的属性，从而实现个性化的tabbar界面展示，以满足不同用户群体的特定需求。
最终效果
用户角色：
售后客服：
一、实现步骤
1.配置page.json中的tabbar属性
代码如下：
2.创建自定义tabbar文件
位置示例如下：
具体代码如下：
// 普通用户展示的页面
const publicbar = [{
"pagepath": "/pages/sys/home/index",
"text": "首页",
"iconpath": "/static/aidex/tabbar/home_1.png",
"selectediconpath": "/static/aidex/tabbar/home_2.png"
},
{
"pagepath": "/pages/sys/msg/index",
"text": "消息",
"iconpath": "/static/aidex/tabbar/msg_1.png",
"selectediconpath": "/static/aidex/tabbar/msg_2.png"
},
{
"pagepath": "/pages/sys/aftersales/aftersales-order",
"text": "我的售后",
"iconpath": "/static/aidex/tabbar/book_1.png",
"selectediconpath": "/static/aidex/tabbar/book_2.png"
},
{
"pagepath": "/pages/sys/user/index",
"text": "我的",
"iconpath": "/static/aidex/tabbar/my_1.png",
"selectediconpath": "/static/aidex/tabbar/my_2.png",
}
]
// 售后客服展示的页面
const selfbar = [{
"pagepath": "/pages/sys/home/index",
"text": "工作台",
"iconpath": "/static/aidex/tabbar/home_1.png",
"selectediconpath": "/static/aidex/tabbar/home_2.png"
},
{
"pagepath": "/pages/sys/msg/index",
"text": "消息",
"iconpath": "/static/aidex/tabbar/msg_1.png",
"selectediconpath": "/static/aidex/tabbar/msg_2.png"
},
{
"pagepath": "/pages/sys/aftersales/staff-order",
"text": "售后进度",
"iconpath": "/static/aidex/tabbar/book_1.png",
"selectediconpath": "/static/aidex/tabbar/book_2.png"
},
{
"pagepath": "/pages/sys/user/index",
"text": "我的",
"iconpath": "/static/aidex/tabbar/my_1.png",
"selectediconpath": "/static/aidex/tabbar/my_2.png",
}
]
export {
publicbar,
selfbar
}
3.配置vuex
位置示例如下：
具体代码如下：
// 引入vue和vuex
import vue from 'vue'
import vuex from 'vuex'
vue.use(vuex)
// 创建一个新的vuex store实例
const store = new vuex.store({
state: {
// 存储动态tabbar的数据
dynamictabbar: []
},
getters: {},
actions: {
changetabbar({ commit }, payload) {
// 使用commit方法提交一个mutation，更新state中的dynamictabbar
commit('updatetabbar', payload)
}
},
mutations: {
updatetabbar(state, payload) {
state.dynamictabbar = payload
}
}
})
export default store
4.在main.js中引入并挂载store：
具体代码如下：
5.登录页内引入自定义tabbar，根据角色进行登录验证
6.在每个导航页中使用自定义的tabbar
具体使用如下：
<!-- home/index.vue 页面 -->
<u-tabbar v-model="current" :list="tabbarlist" :active-color="activecolor" :inactive-color="inactivecolor"
:border-top="bordertop" />
data() {
return {
title: '首页', // 导航栏的标题，这会显示在页面的顶部或作为当前视图的标题
tabbarlist: this.$store.state.dynamictabbar, // 导航栏的列表项，来源于vuex状态管理中的dynamictabbar
current: 0, // 当前激活的导航项的索引，0表示第一个导航项
bordertop: true, // 控制是否有顶部边框，true表示有边框
inactivecolor: '#909399', // 未激活的tabbaritem的颜色
activecolor: '#5098ff' // 激活的tabbaritem的颜色
}
}
发表评论