# 全局配置 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、fui-section、fui-white-space、fui-wing-blank、fui-number,可配置的属性值如下:
/*
  组件属性全局配置文件。优先级:全局配置文件props < 直接设置组件props
  目前支持配置的组件:fui-button、fui-icon、fui-text、fui-input、fui-form-item、fui-list-cell、fui-section、fui-white-space、fui-wing-blank、fui-number
*/

// 主色(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: ''
	},
	//v2.3.0+
	fuiNumber: {
		size: 32,
		unit: 'rpx'
	},
	fuiInput: {
		labelSize: 32,
		size: 32
	},
	fuiFormItem: {
		labelSize: 32,
		labelWidth: 164,
		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
	},
	//v2.1.0+
	fuiWhiteSpace: {
		size: 'default',
		//设置了height则size失效
		height: 0,
		background: 'transparent'
	},
	//v2.1.0+
	fuiWingBlank: {
		size: 'default',
		//设置了gap则size失效
		gap: 0,
		background: 'transparent'
	},
	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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

# 配置文件引入

在根目录main.js中全局引入
import fuiConfig from './components/firstui/fui-config'

//组件全局配置,$fui 为约定值不可修改
uni.$fui = fuiConfig
1
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
Last Updated: 11/11/2023, 1:55:15 PM