如何注冊指令

全局注冊

// 在單獨(dú)一個(gè)文件中單獨(dú)管理所有 directive 
import Vue from 'vue'
import inputClear from './input-clear'
import forNested from './picker-item-for-nested'
import copy from "./copy";

const directives = {
 copy,
 'input-clear':inputClear,
 'for-nested':forNested
}
Object.keys(directives).forEach(key=>{
 Vue.directive(key,directives[key])
})

局部注冊,通過directives選項(xiàng)來注冊

export default {
 directives:{
 // 自定義指令的名字
 autoFocus:{
  inserted(el){
  el.focus()
  console.log( 'inserted' );
  }
 }
 }
}

Vue.install的方式來安裝

// directive.js
export default {
 install(Vue){
 Object.keys(directives).forEach(key=>{
  Vue.directive(key,directives[key])
 })
 }
}

// main.js
import Directives from "./directive/index";
// Vue.use 通過注冊插件的方式來注冊指令 `Vue 插件中 install 函數(shù)接受 Vue構(gòu)造函數(shù)作為第一入?yún)
Vue.use(Directives);

Vue.use 源碼

// 接收一個(gè) plugin 參數(shù)可以是 Function 也可以是 Object
 Vue.use = function (plugin: Function | Object) {
 // 如果傳入的是對(duì)象，需要有一個(gè)install 方法，并執(zhí)行該方法
 if (typeof plugin.install === 'function') {
  plugin.install.apply(plugin, args)
 // 如果傳入的是是函數(shù)則立即執(zhí)行
 } else if (typeof plugin === 'function') {
  plugin.apply(null, args)
 }
 }

將scroll 邏輯添加到 v-directive 中

如果子元素有多個(gè)，需要計(jì)算每個(gè)子元素的 height + padding + border + margin 所以為了方便使用，滾動(dòng)目標(biāo)的子元素有多個(gè)的情況下，用一個(gè)標(biāo)簽統(tǒng)一包裹

function isBottom(el){
 const child = el.children[0]
 if(el.clientHeight + el.scrollTop >= child.scrollHeight){
 console.log('觸底了');
 }
}
Vue.directive('scroll',{
 bind(el){
 el.addEventListener('scroll',function(){
  isBottom(el)
 })
 },
 unbind(el){
 el.removeEventListener(isBottom)
 }
})

看完了這篇文章，相信你對(duì)“Vue.directive如何實(shí)現(xiàn)元素scroll邏輯復(fù)用”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！