@prleasing/use
Кастомные Vue 3 хуки
Установка
Добавьте пакет в свои dependencies, используя npm или yarn
npm i @prleasing/use
# или
yarn add @prleasing/use
Использование
<template>
<button @click="decrement">-</button>
{{ current }}
<button @click="increment">+</button>
</template>
<script lang="ts">
import { useCounter } from '@prleasing/use';
import { defineComponent} from 'vue';
export default defineComponent({
setup() {
const {current, increment, decrement} = useCounter({
min: 0,
max: 20
});
return {current, increment, decrement};
}
);
</script>
Список функций
Состояние
Функция | Описание |
---|---|
useState | Создает стейт |
useToggle | Создает переключатель статуса |
useModel | Обертка над v-model} |
События
Функция | Описание |
---|---|
useEventListener | Вешает обработчик события |
useWindowResize | Вешает обработчик на изменение окна браузера |
Слежка
Функция | Описание |
---|---|
useIntersectionObserver | Слежка за появлением элемента в области видимости документа |
useMutationObserver | Слежка за изменением DOM-элементов |
useResizeObserver | Слежка за изменением размера элемента или его потомков |
Работа с датой
Функция | Описание |
---|---|
useNow | Получение нового инстанса DateTime |
useCurrentTime | Получение текущей даты и времени |
useToday | Получение текущего дня |
useCalendar | Создает календарь |
useCountdown | Создает таймер обратного отсчета |
useDateFormat | Форматирует дату DateTime в заданный формат |
Анимации
Функция | Описание |
---|---|
useRequestAnimationFrame | Обработчик RequestAnimationFrame |
useTweenNumber | Плавное изменение числа |
Утилиты
Функция | Описание |
---|---|
useEndlessLading | Постепенная загрузка элементов |
Утилиты
Функция | Описание |
---|---|
useVisible | Видимость элемента |
useCounter | Счетчик |
useGeolocation | Определение геолокации |
useInterval | Вызов функции с заданным интервалом |
useBodyOverflow | Блокировка скола страницы |
Localstorage
Функция | Описание |
---|---|
useLocalStorage | Работа с LocalStorage |
useLocalStorageReactive | Реактивная работа с LocalStorage |
Mount
Функция | Описание |
---|---|
useRef | Связывает DOM элемент/ы с реактивным объектом |