提供各种高性能工具类。
方法 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)
方法 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')