Fusions

Appearance

便携工具 ​

此内容为一些方便开发者快速，便捷使用的小工具，可能是 fusions-ui 的一些方法的简易版，或者对uni的一些方法的二次封装，方便开发者快速使用

按需引入 ​

如果未做全局配置，可以按需引入:

javascript
// 引入，示例中未列出所有方法，可以根据自己的需求写
import { sys, os, trim } from '@/node_modules/fusions-ui/libs/function/index.js';
import { isNull } from '@/node_modules/fusions-ui/libs/function/check.js';

sys() ​

此方法用于获取设备的信息，相当于 uni.getSystemInfoSync() 的效果

javascript
uni.$fu.sys()

os() ​

此方法用于获取设备的操作系统信息，返回值为 ios 或 android

javascript
uni.$fu.os()

isNull() ​

此方法用于判断是否为空，返回值为 true 或 false

javascript
// 校验结果为 true
uni.$fu.isNull(null)

// 校验结果为 true
uni.$fu.isNull(undefined)

// 校验结果为 true
uni.$fu.isNull([])

// 校验结果为 true
uni.$fu.isNull({})

// 校验结果为 true
uni.$fu.isNull(0)

// 校验结果为 true
uni.$fu.isNull('')

rangeVerify(value, [min, max]) ​

此方法用于判断 value 是否在 min 和 max 之间，如果在其 min 和 max 之间，返回 true，否则返回 false

javascript
// 校验结果为 true
uni.$fu.rangeVerify(5, [1, 10])

// 校验结果为 false
uni.$fu.rangeVerify(15, [1, 10])

range(min, max, value) ​

此方法用于限制 value 的大小，如果在其 min 和 max 之间，则返回 value，否则小于 min 返回 min，大于 max 返回 max

javascript
// 最终结果为 5
uni.$fu.range(1, 10, 5) // 5

// 最终结果为 10
uni.$fu.range(1, 10, 15) // 10

// 最终结果为 1
uni.$fu.range(1, 10, 0) // 1

getPx(value, unit=false) ​

此方法用于返回带有单位的值的结果，如果第二个参数为 true，返回的结果将会带上 px 单位，可接收的值如下：

  • upx 和 rpx 单位，返回使用 uni.upx2px 转换后，为 px 单位的数值结果
  • px 单位，返回去掉 px 单位的具体数值
  • 具体数值，如 25，将会返回 25
  • 其他单位，如 rem，返回去掉单位后的具体数值
javascript
// 最终结果为 25
uni.$fu.getPx('25px')

// 最终结果为 10
uni.$fu.getPx('20rpx')

// 最终结果为 10
uni.$fu.getPx('20upx')

// 最终结果为 25
uni.$fu.getPx(25)

// 最终结果为 25
uni.$fu.getPx('25rem')

// 最终结果为 25px
uni.$fu.getPx('25px', true)

sleep(value) ​

此方法为延迟一定时间进行回调，类似于 promise 的使用方式

  • value数值，单位默认为 ms
javascript
// 200ms后触发回调
uni.$fu.sleep(200).then(() => {
  console.log('延迟200ms执行')
})

$parent(instance, name) ​

此方法用于磨平各端差异，在组件中向上获取父组件或者页面的实例

  • instance 组件实例，Vue2传 this 即可，Vue3传 getCurrentInstance().proxy
  • name 可选，页面或父组件的 name 属性值，不传则默认查找页面（最顶层）的实例
html
<template>
    <view></view>
</template>

<script setup>
    import { getCurrentInstance } from 'vue';

    defineOptions({
        name: 'page'
    });

    // data数据
    const instance = getCurrentInstance().proxy;

    uni.$fu.$parent.call(instance, 'page')
</script>

addUnit(value, unit = 'px') ​

此用法给值加上单位，如果值已有单位，则直接返回值，如果值为 数值，则加上 unit 参数的单位后返回

  • value 要加单位的值, 可为 5、15px、25rpx、35upx、100%等格式的值
  • unit 可选，默认为 px，如果第一个参数为 数值，则拼接此单位后返回
javascript
// 最后结果为 25px
uni.$fu.addUnit(25)
uni.$fu.addUnit('25px')

// 最后结果为 25rpx
uni.$fu.addUnit(25, 'rpx')

addStyle(style, target = "object") ​

此方法用于将 字符串 形式的内联样式转为 对象 形式，或者将 对象 形式的样式转为 字符串 形式

  • style 要转换的样式，可以是 字符串 形式的样式，也可以是 对象 形式的样式
  • target 可选，默认为 object，如果 style 为 字符串 形式，则指定转换的目标格式，可选 object 或 string
javascript
// 字符串形式的样式转为对象形式
const styleObj = uni.$fu.addStyle('width: 100px; height: 200px;')
console.log(styleObj) // {width: '100px', height: '200px'}

// 对象形式的样式转为字符串形式
const styleStr = uni.$fu.addStyle({width: '100px', height: '200px'}, 'string')
console.log(styleStr) // 'width: 100px; height: 200px;'

priceFormat(value, decimals = 0, decimalPoint = '.', thousandsSeparator = ',') ​

此方法用于对数值形式的金额进行格式化

  • value 需要格式化的金额数值，只能为数值，如：150.01，150，而不能为带千分位的写法 1,500.01
  • decimals 可选，格式化后小数点的位数，默认为 0，小数最后一位会进行四舍五入
  • decimalPoint 可选，默认为 '.'，表示小数点的符号
  • thousandsSeparator 可选，默认为英文逗号 ','，表示千分位的分隔符号
javascript
// 最终结果为 123,456,789.01
uni.$fu.priceFormat(123456789.01, 2, '.', ',')

// 最终结果为 1001
uni.$fu.priceFormat(1001.345)