Vue.directive 實現元素scroll邏輯複用

前言

繼上篇 Vue 滾動觸底 mixins,將對於文檔滾動觸底的邏輯遷移到某個dom上，將會用到 Vue.directive 來實現代碼邏輯複用。

元素滾動

如何實現滾動

元素實現滾動的條件有兩個:

1. 有父子兩個元素
2. 子元素的高度 > 父元素的高度, 而且父元素設置 overflow:scroll / auto;

   

scrollHeight 計算

Element.scrollHeight這個只讀屬性是一個元素內容高度的度量，包括因爲溢出致使的視圖中不可見內容。

能夠簡單的理解爲，滾動高度是元素能夠滾動的最大值，分爲兩種狀況

1. 當元素不知足滾動條件時，滾動高度 = 當前元素的 clientHeight = height + padding
2. 當元素知足滾動條件時, 滾動高度 = 當前元素的padding + 子元素的clientHeight + 子元素的(padding,margin,border) + 僞元素(:after,:before)

scrollTop

Element.scrollTop 屬性能夠獲取或設置一個元素的內容垂直滾動的像素數。

須要注意的是，scrollTop 是針對產生滾動條的元素而言，因此分爲兩種狀況

1. 不符合滾動條件, scrollTop 爲0
2. 符合滾動條件，能夠經過 Element.scrollTop 來獲取它的子元素的頂部到父級元素頂部的距離，不包括(border,padding)。

判斷觸底

爲了簡單起見，假設 father 和 child 都只設置了寬高。

<div class="father" ref="father">
  <div class="child" ref="child"></div>
</div>
// 若爲真說明觸底
father.clientHeight + father.scrollTop >= child.scrollHeight
複製代碼

抽離成 Vue-directive

基本語法

參數1
指令名稱，如focus 使用的時候就經過 v-focus 去綁定指定dom

參數2
options配置項，包含如下的鉤子函數，分別在對應的生命週期觸發

// 註冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
  bind(){
    // 只調用一次，指令第一次綁定到元素時調用。在這裏能夠進行一次性的初始化設置。
  },
  // 當被綁定的元素插入到 DOM 中時……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  },
  update(){
    // 所在組件的 VNode 更新時調用
  },
  componentUpdated(){
    // 指令所在組件的 VNode 及其子 VNode 所有更新後調用。
  },
  unbind(){
    // 只調用一次，指令與元素解綁時調用。
  }
})
複製代碼

鉤子函數的回調參數

上面的鉤子函數都接受 el、binding、vnode 和 oldVnode這些回調參數，對經常使用的參數作下解釋

• el : 指令所綁定的元素，能夠用來直接操做 DOM 。
• binding : { name,value ,arg}
  • name 指令名稱
  • value 指令的綁定值，是綁定組件的data中的變量名
  • arg 傳給指令的參數，可選。例如 v-my-directive:foo 中，參數爲 "foo"。 註冊或獲取全局指令。

來講下 value 和 arg 的區別，假設咱們想向指令傳遞特定的數據，能夠經過下面的方式arg傳遞值，和 value綁定值只能使用一種

// 經過 binding.value 接收
<div v-test="title">這裏是測試</div>
// 經過 binding.arg 接收
<div v-test:id1>測試2</div>
複製代碼

如何註冊指令

1. 全局註冊

// 在單獨一個文件中單獨管理全部 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])
})
複製代碼

2. 局部註冊,經過directives選項來註冊

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

3. 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 函數接受 Vue構造函數做爲第一入參`
Vue.use(Directives);
複製代碼

4. Vue.use 源碼

// 接收一個 plugin 參數能夠是 Function 也能夠是 Object
  Vue.use = function (plugin: Function | Object) {
    // 若是傳入的是對象，須要有一個install 方法，並執行該方法
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args)
    // 若是傳入的是是函數則當即執行
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
  }
複製代碼

將scroll 邏輯添加到 v-directive 中

若是子元素有多個，須要計算每一個子元素的 height + padding + border + margin 因此爲了方便使用，滾動目標的子元素有多個的狀況下，用一個標籤統一包裹

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)
  }
})
複製代碼

最後

重點:

1. 實現滾動的條件
2. 滾動觸底判斷的依據
   若是想將 v-scroll 不單單使用元素中，也能夠將 Vue 滾動觸底 mixins的邏輯添加進來