低代码高性能原生UI框架

Appearance

本页导读

工具库 ​

集成了一些常用的小工具，持续上新

平台兼容性 ​

AndroidiOSweb鸿蒙 Next小程序
√√√xx

使用 ​

ts
import { $ux } from '@/uni_modules/ux-frame'

// 工具
$ux.Util.doSomething()

// 随机数
$ux.Random.doSomething()

// 数据格式化
$ux.Fmt.doSomething()
import { $ux } from '@/uni_modules/ux-frame'

// 工具
$ux.Util.doSomething()

// 随机数
$ux.Random.doSomething()

// 数据格式化
$ux.Fmt.doSomething()

Util Api ​

事件名参数说明
getPx{value: any}任意单位转Px数值
addUnit{value: any, unit: string = this.core.Conf.unit.value}添加单位
$findEl{context : ComponentPublicInstance / null, refs: string[]}查找父级或平级指定元素
$dispatch{context : ComponentPublicInstance,componentName : string, eventName : string, ...params : any[]}查找父组件实例 执行操作
throttle{func : () => void, wait : number}节流：在一定时间内，只能触发一次
debounce{func : () => void, wait : number}防抖：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数
debouncek{func : () => void, wait : number, key: string}防抖：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数
trim{str : string, pos : string}去除空格

Random Api ​

事件名参数说明
uuid-uuid
range{min : number, max : number, value : number}如果value小于min，取min；如果value大于max，取max
random{min : number, max : number}取一个区间数
generateRandom{n : number}随机生成N位的数字
shuffleArray{array : any[]}打乱数组

Fmt Api ​

事件名参数说明
encryptText{text : string}脱敏加密
upperMoney{money : string}大写金额
fmtMoney{money : string, wfz : boolean}格式化金额

示例代码 ​

ts
<script setup>
	import { $ux } from '@/uni_modules/ux-frame'
	
	let title = ''
	const data1 = ref('李小二')
	const data2 = ref('2654655.64')
	const data3 = ref('')
	const data4 = ref('')
	
	onLoad((e: OnLoadOptions) => {
		title = e['title'] ?? ''
	})
	
	function onEncrypt() {
		data1.value = $ux.Fmt.encryptText('李小二')
	}
	
	function upperMoney() {
		data2.value = $ux.Fmt.upperMoney('2654655.64')
	}
	
	function onUUID() {
		data3.value = $ux.Random.uuid()
	}
	
	function onRandom() {
		data4.value = `${$ux.Random.generateRandom(6)}`
	}
	
	function throttle() {
		let f = () => {
			uni.showToast({
				title: '节流',
				icon: 'none'
			})
		}
		
		$ux.Util.throttle(f, 200)
	}
	
	function debounce() {
		let f = () => {
			uni.showToast({
				title: '防抖',
				icon: 'none'
			})
		}
		
		$ux.Util.debounce(f, 200)
	}
</script>
<script setup>
	import { $ux } from '@/uni_modules/ux-frame'
	
	let title = ''
	const data1 = ref('李小二')
	const data2 = ref('2654655.64')
	const data3 = ref('')
	const data4 = ref('')
	
	onLoad((e: OnLoadOptions) => {
		title = e['title'] ?? ''
	})
	
	function onEncrypt() {
		data1.value = $ux.Fmt.encryptText('李小二')
	}
	
	function upperMoney() {
		data2.value = $ux.Fmt.upperMoney('2654655.64')
	}
	
	function onUUID() {
		data3.value = $ux.Random.uuid()
	}
	
	function onRandom() {
		data4.value = `${$ux.Random.generateRandom(6)}`
	}
	
	function throttle() {
		let f = () => {
			uni.showToast({
				title: '节流',
				icon: 'none'
			})
		}
		
		$ux.Util.throttle(f, 200)
	}
	
	function debounce() {
		let f = () => {
			uni.showToast({
				title: '防抖',
				icon: 'none'
			})
		}
		
		$ux.Util.debounce(f, 200)
	}
</script>
html
<template>
	<ux-page>
		<ux-navbar :title="title" :border="false"></ux-navbar>
		
		<ux-scroll>
			<ux-card direction="column" icon="flag-filled" title="工具库" :bold="true">
				<ux-text text="集成了一些常用的小工具，持续上新"></ux-text>
				<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
					<ux-text text="详细文档："></ux-text>
					<ux-text style="flex: 1" name="工具库" text="https://www.uxframe.cn/libs/util.html" path="/pages/webview/webview" mode="link"</ux-text>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="数据格式化" :bold="true">
				<ux-text theme="primary" :text="data1"></ux-text>
				<ux-button :mt="10" text="脱敏" @click="onEncrypt()"></ux-button>
				
				<ux-text :mt="10" theme="primary" :text="data2"></ux-text>
				<ux-button :mt="10" text="大写金额" @click="upperMoney()"></ux-button>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="随机数" :bold="true">
				<ux-text theme="primary" :text="data3"></ux-text>
				<ux-button :mt="10" text="UUID" @click="onUUID()"></ux-button>
				
				<ux-text :mt="10" theme="primary" :text="data4"></ux-text>
				<ux-button :mt="10" text="随机6位数字" @click="onRandom()"></ux-button>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="其他函数" :bold="true">
				<ux-button text="节流" @click="throttle()"></ux-button>
				<ux-button :mt="10" text="防抖" @click="debounce()"></ux-button>
			</ux-card>
			
			<ux-placeholder :height="200">
				<ux-row justify="center" align="center" style="height: 100%;">
					<ux-text prefix-icon="soapbubble-filled" text="真的没有了~"></ux-text>
				</ux-row>
			</ux-placeholder>
		</ux-scroll>
		
	</ux-page>
</template>
<template>
	<ux-page>
		<ux-navbar :title="title" :border="false"></ux-navbar>
		
		<ux-scroll>
			<ux-card direction="column" icon="flag-filled" title="工具库" :bold="true">
				<ux-text text="集成了一些常用的小工具，持续上新"></ux-text>
				<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
					<ux-text text="详细文档："></ux-text>
					<ux-text style="flex: 1" name="工具库" text="https://www.uxframe.cn/libs/util.html" path="/pages/webview/webview" mode="link"</ux-text>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="数据格式化" :bold="true">
				<ux-text theme="primary" :text="data1"></ux-text>
				<ux-button :mt="10" text="脱敏" @click="onEncrypt()"></ux-button>
				
				<ux-text :mt="10" theme="primary" :text="data2"></ux-text>
				<ux-button :mt="10" text="大写金额" @click="upperMoney()"></ux-button>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="随机数" :bold="true">
				<ux-text theme="primary" :text="data3"></ux-text>
				<ux-button :mt="10" text="UUID" @click="onUUID()"></ux-button>
				
				<ux-text :mt="10" theme="primary" :text="data4"></ux-text>
				<ux-button :mt="10" text="随机6位数字" @click="onRandom()"></ux-button>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="其他函数" :bold="true">
				<ux-button text="节流" @click="throttle()"></ux-button>
				<ux-button :mt="10" text="防抖" @click="debounce()"></ux-button>
			</ux-card>
			
			<ux-placeholder :height="200">
				<ux-row justify="center" align="center" style="height: 100%;">
					<ux-text prefix-icon="soapbubble-filled" text="真的没有了~"></ux-text>
				</ux-row>
			</ux-placeholder>
		</ux-scroll>
		
	</ux-page>
</template>
css
<style lang="scss">
	
</style>
<style lang="scss">
	
</style>