按需导入

import { 具体方法 } from 'fk-qaq-utils'

数组去重 uniqArr

返回值是去重后数组

uniqArr(arr: Array<any>)

对象数组去重 uniqObj

第一个参数是被去重数组，

第二个参数是按照对象中的哪一个属性比较是否重复

返回值是去重后数组

 uniqObj(arr: Array<any>, key: string)

从目标数组中移除另一个数组存在的元素 getMinus

第一个参数 目标数组arr

第二个参数 另一个数组arr1

第三个参数 元素对象的主键

const arr = [
  {name: '张三', age: 18, sex: '男'},
  {name: '李四', age: 18, sex: '女'},
  {name: '王五', age: 20, sex: '男'}
]
const arr1 = [
  {name: '张三', age: 99, sex: '未知'},
  {name: '赵六', age: 21, sex: '女'}
]
const result = getMinus(arr, arr1, 'name')

[
  {name: '李四', age: 18, sex: '女'},
  {name: '王五', age: 20, sex: '男'}
]

对象数组分组 groupByObj

第一个参数 数组

第二个参数 分组依据

const data = reactive([
  {name: '张三', age: 18, sex: '男'},
  {name: '李四', age: 18, sex: '女'},
  {name: '王五', age: 20, sex: '男'},
  {name: '赵六', age: 21, sex: '女'},
  {name: '赵六', age: 21, sex: '女'},
  {name: '赵六', age: 21, sex: '女'}
])
onMounted(() => {
  let age = groupByObj(data, 'age')
  let sex = groupByObj(data, 'sex')
  console.log('age', age)
  console.log('sex', sex)
})

第一个打印值

{
    "18": [
        {
            "name": "张三",
            "age": 18,
            "sex": "男"
        },
        {
            "name": "李四",
            "age": 18,
            "sex": "女"
        }
    ],
    "20": [
        {
            "name": "王五",
            "age": 20,
            "sex": "男"
        }
    ],
    "21": [
        {
            "name": "赵六",
            "age": 21,
            "sex": "女"
        },
        {
            "name": "赵六",
            "age": 21,
            "sex": "女"
        },
        {
            "name": "赵六",
            "age": 21,
            "sex": "女"
        }
    ]
}

第二个打印值

{
    "男": [
        {
            "name": "张三",
            "age": 18,
            "sex": "男"
        },
        {
            "name": "王五",
            "age": 20,
            "sex": "男"
        }
    ],
    "女": [
        {
            "name": "李四",
            "age": 18,
            "sex": "女"
        },
        {
            "name": "赵六",
            "age": 21,
            "sex": "女"
        },
        {
            "name": "赵六",
            "age": 21,
            "sex": "女"
        },
        {
            "name": "赵六",
            "age": 21,
            "sex": "女"
        }
    ]
}

获取当前日期 getDate

返回值格式 年-月-日

getDate()

转换时间 精确到秒 getDateString

返回值格式 年-月-日 时:分:秒

getDateString(date: Date | string)

转换时间 精确到日 getDateDayString

返回值格式 年-月-日

getDateDayString(date: Date | string)

undefined,null,false转化为"" parseStrEmpty

parseStrEmpty(str: string)

信息脱敏 desensitization

第一个参数 必传，需要脱敏的字符串

第二个参数 可选，默认保留前四位

第三个参数 可选，默认保留后四位

第四个参数 可选，默认用*脱敏

desensitization = (str: string, beginLen:number=4, endLen:number=-4, star:string='*')

// desensitization('18353246789097654')
// console.log("1835*********7654")

限制输入最多两位小数 inputDecimalNum

inputDecimalNum(val: string)

限制输入整数 inputIntegerNum

inputIntegerNum(val: string)

按照字节长度限制输入内容 byteLimit

第一个参数 被限制字符串

第二个参数 限制最大字节

byteLimit(val: string, max: number)

获取窗口缩放比例 getWindowRadio

getWindowRadio()

获取URL的搜索参数 getQueryByName

第一个参数 当前url

第二个参数 参数关键字

getQueryByName(url: string, name: string)

// const url = 'https://sunday.com?name=fatfish&age=100'
// const name = getQueryByName(url, 'name') // fatfish
// const age = getQueryByName(url, 'age') // 100
// const gender = getQueryByName(url, 'gender') // null

平滑滚动至页面顶部 scrollToTop

scrollToTop()

平滑滚动至页面底部 scrollToBottom

scrollToBottom()

获取当前页面滚动距离 getScrollPosition

getScrollPosition()

// { x: 0, y: 215 }

判断当前操作系统 getOSType

getOSType()

// Windows | macOS | IOS | Android | 其他

格式化金额 formatMoney

formatMoney(money: number)

// formatMoney(123456789) // '123,456,789'
// formatMoney(123456789.123) // '123,456,789.123'
// formatMoney(123) // '123'

手电筒效果 useLightCard

• cardRef 必选项，被照射区域的ref
• light 可选光照配置项，color颜色、width宽度、height高度、blur模糊效果、默认值{ width = 60, height = 60, color = '#ff4132', blur = 40 }
• ==很重要：==被照射区域一定要定义为==相对定位==position: relative;

<template>
  <div class="container">
    <!-- 方块盒子 -->
    <div class="item" ref="cardRef1"></div>
    <!-- 方块盒子 -->
    <div class="item" ref="cardRef2"></div>
    <!-- 方块盒子 -->
    <div class="item" ref="cardRef3"></div>
  </div>
</template>

<script setup lang="ts">
const { cardRef: cardRef1 } = useLightCard();
const { cardRef: cardRef2 } = useLightCard({
  light: {
    color: '#ffffff',
    width: 100,
  },
});
const { cardRef: cardRef3 } = useLightCard({
  light: {
    color: 'yellow',
  },
});
</script>

数字增长动画 useNumberAnimation

必填配置项：

• from 起始数字
• to 最终数字
• duration 延时间隔（ms）
• onProgress 更新回调函数

<template>
	<div>
        {{ num }}
    </div>
</template>
<script setup>
const num = ref('0');
useNumberAnimation({
    from: 0,
    to: 343232.21,
    duration: 3000,
    onProgress: v => {
        num.value = v.toFixed(2);
    }
})
</script>

节流 throttle

• callback 必填，需要节流的函数方法
• time 选填，节流时间（ms），默认2000
• immediate 选填，是否立即执行，默认为true

import { throttle } from 'fk-qaq-utils'

getNewChange: throttle(
  function() {
    this.func();
  },
  1000
)

两个数组匹配属性值 arrayFind

• list 要搜索的数组
• value 要匹配的值
• back 如果存在，则返回对象的该属性值；默认为 undefined，返回整个对象
• key 对象中的键，默认为 "id"

const arr = [
  {id: 1, name: 'a'},
  {id: 2, name: 'b'},
  {id: 3, name: 'c'},
]

const res = this.arrayFind(arr, 'a', 'id', 'name')
console.log(res) // 1

const res1 = this.arrayFind(arr, 2)
console.log(res1) // {id: 2, name: 'b'}