Создание пользовательских директив в Nuxt.js

Функции, которые применяются к DOM в нескольких страницах или компонентах

удобно создавать в виде пользовательских директив.

Хотим создать пример директивы прокрутки.

- Полезно при загрузке данных при прокрутке на главной странице или странице сведений, отображении тостов при прокрутке и т. д.

1. Сначала создайте файл и зарегистрируйте его в плагине Nuxt.

Плагины nuxt config запускают определенные файлы при инициализации приложения Nuxt для активации определенных действий. = Определенную функцию можно использовать глобально.

2. Реализуйте директиву прокрутки.

Реализуйте возможность передачи функции обратного вызова из компонента.

3. Теперь используйте v-scroll на странице.

Прочее

Есть несколько хуков, которые можно использовать при создании пользовательских директив.

1. bind(el, binding, vnode)
Описание: вызывается только один раз, когда директива впервые привязывается к элементу.

Здесь можно выполнить начальную настройку привязанного элемента.

Аргументы

el: DOM-элемент, к которому привязана директива
binding: объект, содержащий значение, выражение и аргументы директивы
vnode: виртуальный узел, созданный компилятором Vue

2. inserted(el, binding, vnode)

Описание: вызывается, когда привязанный элемент вставлен в DOM. То есть, когда директива фактически добавлена в DOM.

* В коде привязки события прокрутки операции, связанные с DOM, выполняются в момент хука inserted.

3. update(el, binding, vnode, oldVnode)

Описание: вызывается каждый раз, когда изменяются атрибуты или значение привязанного элемента.

Однако это происходит до обновления дочерних компонентов.

Используется, когда необходимо выполнить DOM-операции при изменении значения привязки.

Аргументы

oldVnode: ранее отрисованный виртуальный узел

4. componentUpdated(el, binding, vnode, oldVnode)

Описание: вызывается после обновления атрибутов или значения привязанного элемента и всех дочерних компонентов.

То есть, выполняется в окончательном состоянии DOM. Выполняется после ожидания изменения значений дочерних компонентов.

5. unbind(el, binding, vnode)

Описание: вызывается, когда директива больше не применяется к элементу и элемент уничтожается.

На этом этапе удаляются обработчики событий или выполняются действия по очистке.

* В примере пользовательской директивы scroll обработчики событий очищаются в момент unbind.