FirstUI UNIX版

# Utils 工具类 V1.1.0+

概述

Utils 工具类，常用的数据处理工具。

# 支持平台

目前开发小程序与H5推荐使用 FirstUI nvue版本 (opens new window)。

安卓系统版本 安卓uni-app 安卓uniapp-x iOS系统版本 iOS uniapp iOS uniapp-x 小程序 H5/Web
5.0 × ✓ 9.0 × × × ✓

# 引入

在页面中script标签内顶部引入需要使用的方法
 import {
	sleep,
	trim,
	trimAll,
	replaceAll,
	numberFormatter,
	moneyFormatter,
	dateFormatter,
	rgbToHex,
	hexToRGB,
	unique,
	getUrlParam,
	getDateTimeSlot,
	formatTimeAgo,
	rpx2px,
	getRandomHexColor,
    convertCurrency
} from '@/components/firstui/fui-utils/index.uts';
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 代码演示

部分示例演示，完整使用请参考示例程序以及文档API。
页面示例展示
<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
		<view class="fui-wrap">
			<view class="fui-page__hd">
				<text class="fui-page__title">Utils</text>
				<text class="fui-page__desc">Utils 工具类，更多使用请查看文档。</text>
			</view>
			<view class="fui-page__bd fui-page__spacing">
				<text class="fui-section__title">等待多少毫秒再执行 ，同步阻塞</text>
				<view class="fui-btn__flex-center">
					<fui-button type="gray" btn-size="medium" text="等待 1000毫秒" :bold="true" margin="24rpx 0"
						@onclick="sleep"></fui-button>
				</view>
				<text class="fui-section__title">去字符串左右空格</text>
				<view class="fui-btn__flex-center">
					<text class="fui-page__desc">字符串 abcd </text>
					<fui-button type="gray" btn-size="medium" text="去左右空格" :bold="true" margin="24rpx 0"
						@onclick="trim"></fui-button>
				</view>
				<text class="fui-section__title">去字符串所有空格</text>
				<view class="fui-btn__flex-center">
					<text class="fui-page__desc">字符串 a b c d </text>
					<fui-button type="gray" btn-size="medium" text="去所有空格" :bold="true" margin="24rpx 0"
						@onclick="trimAll"></fui-button>
				</view>
				<text class="fui-section__title">替换所有相同字符串</text>
				<view class="fui-btn__flex-center">
					<text class="fui-page__desc">将字符串：##a###b#######c# 中#替换为空</text>
					<fui-button type="gray" btn-size="medium" text="替换" :bold="true" margin="24rpx 0"
						@onclick="replaceAll"></fui-button>
				</view>
				<text class="fui-section__title">格式化手机号码</text>
				<view class="fui-btn__flex-center">
					<text class="fui-page__desc">手机号：15715600012</text>
					<fui-button type="gray" btn-size="medium" text="格式化" :bold="true" margin="24rpx 0"
						@onclick="numberFormatter"></fui-button>
				</view>
				<text class="fui-section__title">格式化金额，保留两位小数</text>
				<view class="fui-btn__flex-center">
					<text class="fui-page__desc">金额：2021</text>
					<fui-button type="gray" btn-size="medium" text="格式化" :bold="true" margin="24rpx 0"
						@onclick="moneyFormatter"></fui-button>
				</view>

				<text class="fui-section__title">格式化日期</text>
				<view class="fui-btn__flex-center">
					<text class="fui-page__desc">日期原数据：2023-10-30 22:36:15</text>
					<fui-button type="gray" btn-size="medium" text="年-月-日 时:分" :bold="true" margin="24rpx 0"
						@onclick="dateFormatter(1)"></fui-button>
					<fui-button type="gray" btn-size="medium" text="年/月/日" :bold="true"
						@onclick="dateFormatter(2)"></fui-button>
					<fui-button type="gray" btn-size="medium" text="月-日" :bold="true" margin="24rpx 0"
						@onclick="dateFormatter(3)"></fui-button>
					<fui-button type="gray" btn-size="medium" text="时:分" :bold="true"
						@onclick="dateFormatter(4)"></fui-button>
					<fui-button type="gray" btn-size="medium" text="分:秒" :bold="true" margin="24rpx 0"
						@onclick="dateFormatter(5)"></fui-button>
					<fui-button type="gray" btn-size="medium" text="*年*月*日 *时*分*秒" :bold="true"
						@onclick="dateFormatter(6)"></fui-button>
				</view>
				<text class="fui-section__title">RGB颜色转十六进制颜色</text>
				<view class="fui-btn__flex-center">
					<text class="fui-page__desc">颜色：rgb(33,33,33)</text>
					<fui-button type="gray" btn-size="medium" text="转化" :bold="true" margin="24rpx 0"
						@onclick="rgbToHex"></fui-button>
				</view>
				<text class="fui-section__title">十六进制颜色转RGB颜色</text>
				<view class="fui-btn__flex-center">
					<text class="fui-page__desc">颜色：#333</text>
					<fui-button type="gray" btn-size="medium" text="转化" :bold="true" margin="24rpx 0"
						@onclick="hexToRGB"></fui-button>
				</view>
				<text class="fui-section__title">唯一标识，随机数</text>
				<view class="fui-btn__flex-center">
					<fui-button type="gray" btn-size="medium" text="获取标识" :bold="true" margin="24rpx 0"
						@onclick="getUnique"></fui-button>
				</view>

				<text class="fui-section__title">获取Url参数</text>
				<view class="fui-btn__flex-center">
					<text class="fui-page__desc">url：https://abc.com?a=1&b=2</text>
					<fui-button type="gray" btn-size="medium" text="转化" :bold="true" margin="24rpx 0"
						@onclick="getUrlParam"></fui-button>
				</view>
				<text class="fui-section__title">获取时间段</text>
				<view class="fui-btn__flex-center">
					<!-- 1-今天 2-昨天 3-本周 4-本月 5-本年 -->
					<fui-button type="gray" btn-size="medium" text="今天" :bold="true" margin="24rpx 0"
						@onclick="getDateSlot(1)"></fui-button>
					<fui-button type="gray" btn-size="medium" text="昨天" :bold="true"
						@onclick="getDateSlot(2)"></fui-button>
					<fui-button type="gray" btn-size="medium" text="本周(不超过当日)" :bold="true" margin="24rpx 0"
						@onclick="getDateSlot(3)"></fui-button>
					<fui-button type="gray" btn-size="medium" text="本月(不超过当日)" :bold="true"
						@onclick="getDateSlot(4)"></fui-button>
					<fui-button type="gray" btn-size="medium" text="本年(不超过当日)" :bold="true" margin="24rpx 0"
						@onclick="getDateSlot(5)"></fui-button>
				</view>
				<text class="fui-section__title">rpx 转 px</text>
				<view class="fui-btn__flex-center">
					<text class="fui-page__desc">rpx：750</text>
					<fui-button type="gray" btn-size="medium" text="转化" :bold="true" margin="24rpx 0"
						@onclick="rpxtopx"></fui-button>
				</view>
				<text class="fui-section__title">日期格式化为多久之前</text>
				<view class="fui-btn__flex-center">
					<text class="fui-page__desc">之前日期：2023-10-15 22:56:15</text>
					<fui-button type="gray" btn-size="medium" text="格式化(简体中文)" :bold="true" margin="24rpx 0"
						@onclick="dateFormatAgo('cn')"></fui-button>
					<fui-button type="gray" btn-size="medium" text="格式化(英文)" :bold="true"
						@onclick="dateFormatAgo('en')"></fui-button>
					<fui-button type="gray" btn-size="medium" text="格式化(繁体中文)" :bold="true" margin="24rpx 0"
						@onclick="dateFormatAgo('tc')"></fui-button>
				</view>
				<text class="fui-section__title">其他功能</text>
				<text class="fui-page__desc">待扩展...</text>
			</view>
		</view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script>
	import {
		sleep,
		trim,
		trimAll,
		replaceAll,
		numberFormatter,
		moneyFormatter,
		dateFormatter,
		rgbToHex,
		hexToRGB,
		unique,
		getUrlParam,
		getDateTimeSlot,
		formatTimeAgo,
		rpx2px
	} from '@/components/firstui/fui-utils/index.uts';
	export default {
		data() {
			return {}
		},
		methods: {
			sleep() {
				sleep(1000)
				this.fui.toast('1000ms后执行！')
			},
			trim() {
				const text = ' abcd ';
				const val = trim(text);
				console.log(val);
				this.fui.toast(`字符串${val}`)
			},
			trimAll() {
				const text = ' a b c d ';
				const val = trimAll(text);
				console.log(val);
				this.fui.toast(`字符串${val}`)
			},
			replaceAll() {
				const text = '##a###b#######c#';
				const val = replaceAll(text, '#', '');
				console.log(val);
				this.fui.toast(val)
			},
			numberFormatter() {
				const text = '15715600012';
				const val = numberFormatter(text);
				console.log(val);
				this.fui.toast(val)
			},
			moneyFormatter() {
				const text = 2021;
				const val = moneyFormatter(text);
				console.log(val);
				this.fui.toast(val)
			},
			dateFormatter(type : number) {
				const date = '2023-10-30 22:36:15'
				// y-m-d h:i:s
				const format = ['y-m-d h:i', 'y/m/d', 'm-d', 'h:i', 'i:s', 'y年m月d日 h时i分s秒'][type - 1]
				const val = dateFormatter(date, format);
				console.log(val)
				this.fui.toast(val)
			},
			rgbToHex() {
				const hex = rgbToHex(33, 33, 33)
				this.fui.toast(hex)
			},
			hexToRGB() {
				const rgb = hexToRGB('#333')
				this.fui.toast(`rgb(${rgb.get('r')},${rgb.get('g')},${rgb.get('b')})`)
			},
			getUnique() {
				this.fui.toast(unique())
			},
			getUrlParam() {
				const url = 'https://abc.com?a=1&b=2'
				const param = getUrlParam(url)
				this.fui.toast(`参数a：${param.get('a')},参数b：${param.get('b')}`)
			},
			getDateSlot(type : number) {
				const slot = getDateTimeSlot(type)
				const start = slot.get('start') as string
				const end = slot.get('end') as string
				console.log(start, end)
				this.fui.toast(`${start}至${end}`)
			},
			rpxtopx() {
				this.fui.toast(rpx2px(750).toString())
			},
			dateFormatAgo(lang : string) {
				const date = '2023-10-15 22:56:15'
				const val = formatTimeAgo(date, 1, lang)
				console.log(val)
				this.fui.toast(val)
			}
		}
	}
</script>

<style>
	.fui-btn__flex-center {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.fui-section__title {
		margin-top: 72rpx;
	}
</style>
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238

# Methods

参数传入顺序从上到下依次传入。
方法名 类型 说明 传入参数
sleep (...args)=>void 等待多少毫秒再执行，同步阻塞
{String} millisecond 毫秒
trim (...args)=>string 去左右空格 {String} value 需要处理的字符串
trimAll (...args)=>string 去所有空格 {String} value 需要处理的字符串
replaceAll (...args)=>string 替换所有相同字符串 {String} text 需要处理的字符串
{String} repstr 被替换的字符
{String} newstr 替换后的字符
numberFormatter (...args)=>string 格式化手机号码 {String} num 手机号码
moneyFormatter (...args)=>string 金额格式化，保留两位小数 {Number} money 金额值
dateFormatter (...args)=>string 日期时间格式化（参数详细说明如下方所示） {String ，Date } date 日期
{String} format 格式化字符串
{Number} type 日期的格式类型
{Boolean} isMs 时间戳精度是否为毫秒
rgbToHex (...args)=>string RGB颜色转十六进制颜色 {Number} r
{Number} g
{Number} b
hexToRGB (...args)=>Map<string, number> 十六进制颜色转RGB颜色 {String} hex 颜色值，如：#333333
unique (...args)=>string 唯一标识，随机数 {Number} n 随机数位数
getDateTimeSlot (...args)=>Map<string, string> 获取日期时间段 {Number} type 1-今天 2-昨天 3-本周 4-本月 5-本年
getUrlParam (...args)=>Map<string, string> 获取Url参数，返回一个对象 {String} url url地址
formatTimeAgo (...args)=>string 日期时间格式化为多久之前，如:1分钟前（参数详细说明如下方说明） {String ，Date} date 日期
{Number} type 日期的格式类型
{String} lang 文字显示语言
{Boolean} isMs 时间戳精度是否为毫秒
{String} suffix 后缀文本
{Number} endUnit 转化截止单位
{Number} seconds 多少秒之前显示为刚刚
{Boolean} fixedDay 是否需要天的固定文本
rpx2px (rpx : number)=>number rpx 转px {Number} rpx 数值
getRandomHexColor V1.2.0+ ()=>string 获取随机颜色 -
convertCurrency V1.2.0+ (money : any) : string 人名币转大写 {String ｜ Number} money 金额
isPC V1.2.1+ () : boolean 判断环境是否为PC -
dateFormatter（日期时间格式化）方法参数详细说明

type 值不同，date 格式也不同。

/**
	 * @desc 日期时间格式化
	 
	 * @param {String | Date} date 需要格式化的日期
	 
	 * @param {String} format 格式化字符串(y-m-d h:i:s)
	 * format的格式可由（y m d h i s）组合，如：y-m，y-m-d，y年m月，h:i，y-m-d h:i 等
	 
	 * @param {Number} type 日期类型 1~4 
	 * 1-date的格式类型：日期字符串(2017/12/04 12:12:12) 
	 * 2-date的格式类型：时间戳(1603676514690) 
	 * 3-date的格式类型：日期字符串，无连接符(20171204121212) 
	 * 4-date的格式类型：new Date()时间格式(Thu Oct 01 2020 00:00:00 GMT+0800 (中国标准时间))
     
	 * @param {Boolean} isMs 时间戳精度是否为毫秒，默认为true（当精度为秒时传false），type=2时有效
 **/
dateFormatter(date : any, format : string, type : number = 1, isMs : boolean = true) : string
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
formatTimeAgo（日期时间格式化为多久之前）方法参数详细说明

其中date、type、 isMs 参数同上方 dateFormatter方法一致。

/**
 * @desc 日期时间格式化为多久之前 如:1分钟前

 * @param {String | Date} date 需要格式化的日期

 * @param {Number} type 日期类型 1~4 
 * 1-date的格式类型：日期字符串(2017/12/04 12:12:12) 
 * 2-date的格式类型：时间戳(1603676514690) 
 * 3-date的格式类型：日期字符串，无连接符(20171204121212) 
 * 4-date的格式类型：new Date()时间格式(Thu Oct 01 2020 00:00:00 GMT+0800 (中国标准时间))
 
 * @param {String} lang 文字显示语言，仅支持简体中文（cn）、英文（en）、繁体中文（tc），默认cn
 
 * @param {Boolean} isMs  时间戳精度是否为毫秒，默认为true（当精度为秒时传false），type=2时有效

 * @param {String} suffix 后缀，如：30小时+ 后缀。[刚刚、昨天、前天 等为固定文本，后缀无效]

 * @param {Number} endUnit 转化截止单位，1-秒 2-分钟 3-小时 4-天 5-月 6-年，如传3（小时），则天，月，年不做转化直接返回空

 * @param {Number} seconds 多少秒之前显示为刚刚，不可超过60

 * @param {Boolean} fixedDay 是否需要天的固定文本，如昨天、前天
 **/
formatTimeAgo(date : any, type : number = 1, lang : string = 'cn', isMs : boolean = true, suffix : string = '前', endUnit : number = 6, seconds : number = 10, fixedDay : boolean = true) : string
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

示例预览

Last Updated: 2/2/2024, 9:07:46 PM

← Validator 表单验证 →