Vue.directive 實現(xiàn)元素scroll邏輯復(fù)用

更新時間：2019年11月29日 09:17:00 作者：三只萌新

這篇文章主要介紹了Vue.directive 實現(xiàn)元素scroll邏輯復(fù)用功能，文中給大家提到元素實現(xiàn)滾動的條件有兩個，具體內(nèi)容詳情大家參考下本文

繼上篇Vue 滾動觸底 mixins,將對于文檔滾動觸底的邏輯遷移到某個dom上，將會用到 Vue.directive 來實現(xiàn)代碼邏輯復(fù)用。

元素滾動

如何實現(xiàn)滾動

元素實現(xiàn)滾動的條件有兩個:

有父子兩個元素
子元素的高度 > 父元素的高度, 并且父元素設(shè)置 overflow:scroll / auto;

scrollHeight 計算

Element.scrollHeight這個只讀屬性是一個元素內(nèi)容高度的度量，包括由于溢出導(dǎo)致的視圖中不可見內(nèi)容。

可以簡單的理解為，滾動高度是元素可以滾動的最大值，分為兩種情況

滾動高度 = 當前元素的 clientHeight = height + padding

滾動高度 = 當前元素的padding + 子元素的clientHeight + 子元素的(padding,margin,border) + 偽元素(:after,:before)
scrollTop

Element.scrollTop 屬性可以獲取或設(shè)置一個元素的內(nèi)容垂直滾動的像素數(shù)。

需要注意的是，scrollTop 是針對產(chǎn)生滾動條的元素而言，所以分為兩種情況

不符合滾動條件, scrollTop 為0
符合滾動條件，可以通過 Element.scrollTop 來獲取它的子元素的頂部到父級元素頂部的距離，不包括(border,padding)。

判斷觸底

為了簡單起見，假設(shè) father 和 child 都只設(shè)置了寬高。

<div class="father" ref="father">
 <div class="child" ref="child"></div>
</div>
// 若為真說明觸底
father.clientHeight + father.scrollTop >= child.scrollHeight

抽離成 Vue-directive

基本語法

參數(shù)1

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

參數(shù)2

options配置項，包含以下的鉤子函數(shù)，分別在對應(yīng)的生命周期觸發(fā)

// 注冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
 bind(){
 // 只調(diào)用一次，指令第一次綁定到元素時調(diào)用。在這里可以進行一次性的初始化設(shè)置。
 },
 // 當被綁定的元素插入到 DOM 中時……
 inserted: function (el) {
 // 聚焦元素
 el.focus()
 },
 update(){
 // 所在組件的 VNode 更新時調(diào)用
 },
 componentUpdated(){
 // 指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
 },
 unbind(){
 // 只調(diào)用一次，指令與元素解綁時調(diào)用。
 }
})

鉤子函數(shù)的回調(diào)參數(shù)

上面的鉤子函數(shù)都接受 el、binding、vnode 和 oldVnode 這些回調(diào)參數(shù)，對常用的參數(shù)做下解釋

el : 指令所綁定的元素，可以用來直接操作 DOM 。
binding : { name,value ,arg}

是綁定組件的data中的變量名

來說下 value 和 arg 的區(qū)別，假設(shè)我們想向指令傳遞特定的數(shù)據(jù)，可以通過下面的方式 arg傳遞值，和 value綁定值只能使用一種

// 通過 binding.value 接收
<div v-test="title">這里是測試</div>
// 通過 binding.arg 接收
<div v-test:id1>測試2</div>

如何注冊指令

全局注冊

// 在單獨一個文件中單獨管理所有 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選項來注冊

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 源碼

// 接收一個 plugin 參數(shù)可以是 Function 也可以是 Object
 Vue.use = function (plugin: Function | Object) {
 // 如果傳入的是對象，需要有一個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 中

如果子元素有多個，需要計算每個子元素的 height + padding + border + margin 所以為了方便使用，滾動目標的子元素有多個的情況下，用一個標簽統(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)
 }
})

總結(jié)

以上所述是小編給大家介紹的Vue.directive 實現(xiàn)元素scroll邏輯復(fù)用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: