# 全局配置 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

# 配置文件引入

在根目录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: 6/26/2023, 1:40:33 PM