主题
- #自定義指令
- #nuxt.js
durumis AI 总结的文章
- 說明如何在Nuxt.js中使用自定義指令將通用功能應用於頁面或組件。
- 以捲動指令為例,利用`bind`、`inserted`、`update`、`componentUpdated`、`unbind`等鉤子函數實現基於捲動事件的操作,並註冊到Nuxt插件以實現全局使用。
- 詳細說明每個鉤子的作用和使用時機,以實現DOM操作和事件監聽器的管理。
AI 翻译的文章。
durumis AI 总结的文章
將在多個頁面或組件中共同應用於DOM的功能
製作成自訂指令會比較方便。
想要製作捲動指令範例。
- 在首頁或詳細頁面等頁面捲動時載入數據、捲動時顯示吐司訊息等情況下非常有用。
// nuxt.config.js export default { plugins: [ '~/plugins/v-scroll.js', // 註冊插件 ], }
Nuxt config plugins會在Nuxt應用程式初始化時執行已定義的檔案,以啟用特定動作。=可以在全域使用特定功能。
// plugins/v-scroll.js import Vue from 'vue'; // 註冊自訂指令 Vue.directive('scroll', { inserted(el, binding) { const callback = binding.value.callback; // 傳遞的回呼函數 const offset = binding.value.offset || 0; // 使用者自訂偏移量 (預設值 0) // 捲動事件處理器 const onScroll = () => { const scrollPosition = window.scrollY + window.innerHeight; const elementPosition = el.offsetTop + offset; if (scrollPosition >= elementPosition) { callback(); } }; // 註冊捲動事件監聽器 window.addEventListener('scroll', onScroll); // 在元素取消綁定時移除事件監聽器 el._onScroll = onScroll;}, unbind(el) { // 移除捲動事件監聽器 window.removeEventListener('scroll', el._onScroll); delete el._onScroll; } });
實作可以傳遞回呼函數到組件。
<template> <div v-scroll="{callback: loadMore, offset: 100}"> </div> </template> <script> export default { //...省略 methods: { loadMore() { // 取得更多數據 (fetch, axios 等...) } } } </script>
建立自訂指令時可以使用一些鉤子。
1. bind(el, binding, vnode)
說明:指令第一次繫結到元素時只呼叫一次。
可以在此設定已繫結元素的初始設定。
參數
el:指令繫結到的DOM元素
binding:包含指令的值、運算式、引數等的物件
vnode:Vue編譯器建立的虛擬節點
Vue.directive('color', { bind(el, binding) { // 指令繫結時設定文字顏色 el.style.color = binding.value; } });
2. inserted(el, binding, vnode)
說明:繫結的元素插入DOM時呼叫。也就是說,當指令實際新增到DOM時使用。
* 在捲動事件繫結程式碼中,在inserted鉤子時間點執行DOM相關作業。
3. update(el, binding, vnode, oldVnode)
說明:每次繫結元素的屬性或值變更時呼叫。
但是,子組件仍處於更新前的狀態。
當需要在繫結值變更時執行DOM作業時使用。
參數
oldVnode:先前渲染的虛擬節點
4. componentUpdated(el, binding, vnode, oldVnode)
說明:繫結元素的屬性或值更新且子組件也全部更新後呼叫。
也就是說,在最終DOM狀態下執行。等待子組件的值變更後執行。
5. unbind(el, binding, vnode)
說明:指令不再套用於元素,且元素被銷毀時呼叫。
在此時間點移除事件監聽器或執行清理作業。
* 在scroll自訂範例中,在unbind時間點清理事件監聽器。