常用工具类 CommonUtils

提供各种高性能工具类。

禁止双指放大(缩小) | 禁止双击放大(缩小)

方法 disableZoom

import { disableZoom } from 'usuuu'

//在需要禁止的页面调用该方法即可(也可以放到Header和Footer)
disableZoom()

防抖节流

方法 debounce

import { debounce } from 'usuuu'

//一个需要防抖的函数
const handleResize = () => {
    console.log('00', new Date())
}
//创建防抖函数,延迟为500毫秒
const debouncedResize = debounce(handleResize, 500)
//监听窗口resize事件
window.addEventListener('resize', debouncedResize)

转换为对象

方法 toObject

import { toObject } from 'usuuu'

//示例数组
const array = [
    ['name', 'Alice'],
    ['age', 30],
    ['isStudent', true]
]
//将键值对数组转换为对象
const obj = toObject(array)
//输出转换后的对象
console.log(obj)//{ name: 'Alice', age: 30, isStudent: true }

获取元素位置和大小

方法 getOffset

import { getOffset } from 'usuuu'

//HTML元素
const element = document.getElementById('myElement')
//vue中建议使用
const element = ref<HTMLDivElement | null>(null)
if (element) {
    const offsetData = getOffset(element)
    //输出结果到控制台
    console.log(offsetData)
}
if (element.value) {
    const offsetData = getOffset(element)
    //输出结果到控制台
    console.log(offsetData)
}

获取窗口大小

方法 getWindow

import { getWindow } from 'usuuu'

//取窗口的大小
const windowSize = getWindow()
//输出结果到控制台
console.log('Window Size:', windowSize)

随机返回String

方法 getRandomString

import { getRandomString } from 'usuuu'

//定义一个字符串数组
const stringsArray = ['apple', 'banana', 'cherry', 'date', 'elderberry']
//随机获取数组中的一个字符串
const randomString = getRandomString(stringsArray)
//输出结果到控制台
console.log('Random String:', randomString)

点击指定元素外部触发指定方法

方法 useClickOutside

<template>
    <!-- 定义元素 -->
    <div ref="usuuu">usuuu</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useClickOutside } from 'usuuu'

/**
 * 元素实例
 */
const usuuu = ref<HTMLDivElement | null>(null)
/**
 * 关闭方法
 */
const handleClose = () => {
    console.log('执行了')
}
/**
 * 点击usuuu外部执行handleClose
 */
useClickOutside(usuuu, handleClose)
</script>

处理单事件监听

方法 useEventListeners

import { useEventListeners } from 'usuuu'

/**
 * useEventListeners('事件名', 事件处理函数, '事件目标', 事件监听选项(boolean | AddEventListenerOptions))
 */
useEventListeners('scroll', handleScroll, 'window', true)
useEventListeners('resize', handleScroll, 'window')
useEventListeners('click', documentClick, 'document')