# 全局配置 V1.6.0+
针对组件 props 做全局配置，优先级：全局配置props < 直接设置组件props 。
特别说明
该功能目前仅针对部分常用基础组件处理。
自 V1.9.8+ 开始，Nvue端加入主色配置，组件内主色默认使用配置中颜色。
自 V1.9.8+ 开始，加入部分全局方法调用，引入配置文件后可使用 uni.$fui.xx 调用。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 |
|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
# 配置文件内容
目前支持配置的组件：fui-button、fui-icon、fui-text、fui-input、fui-form-item、fui-list-cell，可配置的属性值如下：
/*
组件属性全局配置文件。优先级：全局配置文件props < 直接设置组件props
目前支持配置的组件：fui-button、fui-icon、fui-text、fui-input、fui-form-item、fui-list-cell
*/
// 主色（V1.9.8+），仅Nvue端以及无法使用css变量控制颜色的组件使用【保持与fui-theme中一致】
const color = {
primary: '#465CFF',
success: '#09BE4F',
warning: '#FFB703',
danger: '#FF2B2B',
purple: '#6831FF',
link: '#465CFF'
}
//全局方法（V1.9.8+）
const app = {
//text：提示内容，icon：参考uni.showToast 中icon
toast: function(text, icon = 'none') {
text && uni.showToast({
title: text,
icon: icon,
duration: 2000
})
},
// title:标题，content：内容，callback：回调函数，showCancel：是否显示取消按钮，confirmColor：确定按钮颜色（App端不支持），confirmText：确定按钮文本
modal: function(title, content, callback, showCancel, confirmColor, confirmText) {
uni.showModal({
title: title,
content: content,
showCancel: showCancel || false,
// #ifndef MP-TOUTIAO
cancelColor: "#7F7F7F",
confirmColor: confirmColor || color.primary,
// #endif
confirmText: confirmText || "确定",
success(res) {
if (res.confirm) {
callback && callback(true)
} else {
callback && callback(false)
}
},
fail(err) {
console.log(err)
}
})
},
// url:跳转页面路径，isMain：是否为tabbar内主页面
href(url, isMain) {
if (isMain) {
uni.switchTab({
url: url
})
} else {
uni.navigateTo({
url: url
});
}
}
}
const fuiConfig = {
//组件名称，小驼峰命名
//如fui-button写成fuiButton
fuiButton: {
//组件属性值
height: '96rpx',
size: 32,
radius: '16rpx'
},
fuiIcon: {
size: 64,
unit: 'rpx',
//V1.9.8+
color: ''
},
fuiText: {
size: 32,
unit: 'rpx',
//仅Nvue有效，black 默认颜色，V1.9.8+
color: ''
},
fuiInput: {
labelSize: 32,
size: 32
},
fuiFormItem: {
labelSize: 32,
labelWidth: 160,
labelRight: 30,
labelWeight: 400,
labelAlign: 'left',
asteriskPosition: 'left'
},
// V1.9.8+
fuiListCell: {
padding: ['32rpx', '32rpx'],
arrowColor: '',
//仅Nvue有效
borderColor: '',
bottomLeft: 32
},
// V1.9.9+
fuiSection: {
size: 32,
color: '#181818',
fontWeight: 600,
descrSize: 28,
descrColor: '#B2B2B2',
descrTop: 12
},
color,
...app
}
export default fuiConfig
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
# 配置文件引入
在根目录main.js中全局引入
import fuiConfig from './components/firstui/fui-config'
//组件全局配置，$fui 为约定值不可修改
uni.$fui = fuiConfig
1
2
3
4
2
3
4
# 全局方法调用
引入全局配置文件后，即可使用（V1.9.8+）
//toast 提示
uni.$fui.toast('提示~')
//跳转页面
uni.$fui.href('/pages/common/pageA/pageA')
//modal 弹框
uni.$fui.modal('title','content',(res)=>{
if(res){
// 确定
}else{
// 取消
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14