通过uview让tabbar根据权限显示相应数量的tabbar_uview tabbar 全局引入

通过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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

$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)
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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()

1
2
3
4
5
6
7
8
9
10
11
12
13

在每个tabbar页面当中使用 u-tabbar 组件

• 由于 vuex 中的state.tabbar已经全局混入了,所以每个tabbar页面已经有 this.tabbar 这个变量.

• 在组件的list属性放入tabbar就行