通过uview让tabbar根据权限显示相应数量的tabbar
搭好uview-app架子
正常配置好page.json的tabbar项
配置完成后通过vuex 来控制 tabbar list的变化
这上面的配置中的路径前面必须加 /
index.js
import Vue from 'vue';
import Vuex from 'vuex'
Vue.use(Vuex)
const tabbar=[{
"pagePath": "/pages/index/index",
"iconPath": "/static/index.png",
"selectedIconPath": "/static/index-selected.png",
"text": "首页",
"midButton": false,
}, {
"pagePath": "/pages/center/index",
"iconPath": "/static/center.png",
"selectedIconPath": "/static/center-selected.png",
"text": "我",
"midButton": false,
},{
"pagePath": "/pages/perms/perms",
"iconPath": "/static/center.png",
"selectedIconPath": "/static/center-selected.png",
"text": "权限页",
"midButton": false,
}]
const store=new Vuex.Store({
state:{
tabbar_readonly:tabbar,
tabbar:tabbar
},
mutations:{
$uStore(state, payload) {
// 判断是否多层级调用,state中为对象存在的情况,诸如user.info.score = 1
let nameArr = payload.name.split('.');
let saveKey = '';
let len = nameArr.length;
if(nameArr.length >= 2) {
let obj = state[nameArr[0]];
for(let i = 1; i < len - 1; i ++) {
obj = obj[nameArr[i]];
}
obj[nameArr[len - 1]] = payload.value;
saveKey = nameArr[0];
} else {
// 单层级变量,在state就是一个普通变量的情况
state[payload.name] = payload.value;
saveKey = payload.name;
}
}
}
})
export default store
$u.mixin.js
import {
mapState
} from 'vuex'
import store from "@/store"
// 尝试将用户在根目录中的store/index.js的vuex的state变量,全部加载到全局变量中
let $uStoreKey = [];
try {
$uStoreKey = store.state ? Object.keys(store.state) : [];
} catch (e) {}
module.exports = {
created() {
// 将vuex方法挂在到$u中
// 使用方法为:如果要修改vuex的state中的user.name变量为"史诗" => this.$u.vuex('user.name', '史诗')
// 如果要修改vuex的state的version变量为1.0.1 => this.$u.vuex('version', '1.0.1')
this.$u.vuex = (name, value) => {
this.$store.commit('$uStore', {
name,
value
})
}
},
computed: {
// 将vuex的state中的所有变量,解构到全局混入的mixin中
...mapState($uStoreKey)
}
}
main.js
import store from './store/index.js'
const storeMixins = require('./store/$u.mixin.js');
Vue.mixin(storeMixins)
const app = new Vue({
store,
...App
})
app.$mount()
在每个tabbar页面当中使用 u-tabbar 组件
-
由于 vuex 中的state.tabbar已经全局混入了,所以每个tabbar页面已经有 this.tabbar 这个变量.
-
在组件的list属性放入tabbar就行