Vue 中自定義指令的使用

官網介紹

需求分析 : 當vue內建的指令滿足不了需求的時候, 可以自己定義指令

鉤子函式

2.1 乙個指令定義物件可以提供如下幾個鉤子函式 (均為可選)：

2.2bind只呼叫一次，指令第一次繫結到元素時呼叫。在這裡可以進行一次性的初始化設定。

2.3inserted被繫結元素插入父節點時呼叫 (僅保證父節點存在，但不一定已被插入文件中)。

2.4update所在元件的 vnode 更新時呼叫，但是可能發生在其子 vnode 更新之前。

2.5componentupdated指令所在元件的 vnode 及其子 vnode 全部更新後呼叫。

2.6unbind只呼叫一次，指令與元素解綁時呼叫。

鉤子函式引數

3.1el: 指令所繫結的元素，可以用來直接操作 dom

3.2binding乙個物件

3.3vnode: vue 編譯生成的虛擬節點

3.4oldvnode: 上乙個虛擬節點，僅在update和componentupdated鉤子中可用

最基本的寫法

drag.js 檔案

js中部分屬性用到的屬性說明

主要用來處理拖曳需要的邏輯

/* eslint-disable */

export
default
else})
// 滑鼠按下
dialoghead.
onmousedown
=(e)
=>
else
if(move_mousetobodyl < mouse_moveminx)
if(move_mousetobodyt > mouse_movemaxy)
else
if(move_mousetobodyt < mouse_moveminy)
// 設定位移
dialogbox.style.left = move_boxx + existedleft +
"px"
dialogbox.style.top = move_boxy + existedtop +
"px"
}            document.
onmouseup=(
)=>}}
}

用來註冊全域性的自定義指令

import drag from

"./drag"
import vue from
"vue"
vue.
directive
("el-drag-dialog"
, drag)
export
default drag

註冊的全域性指令el-drag-dialog通過v-el-drag-dialog使用

v-el-drag-dialog

:visible.sync
="dialo**isible"
width
="30%"
:close-on-click-modal
="false"
@closed
="dialog_closed"
class
="dialog-box"
ref="dialogref"
>
slot
="footer"
class
="dialog-footer"
>
@click
="dialo**isible = false"
>
取 消el-button
>
type
="primary"
@click
="dialo**isible = false"
>
確 定el-button
>
span
>
el-dialog
>

// 匯入指令

import dragdialog from
"@/directives/index.js"
export
default
}

vue中自定義指令的使用

vue中除了內建的指令 v show,v model 還允許我們自定義指令 想要建立自定義指令，就要註冊指令 以輸入框獲取焦點為例 一 註冊全域性指令 註冊乙個全域性自定義指令 v focus vue.directive focus 二 註冊區域性指令 directives 使用也很簡單 直接在元素...

vue中的指令 自定義指令

之前我們已經了解過了內建指令，這些內建指令可以滿足我們學大部分的需求，但是在某些特殊情況下我們要對dom進行操作，這個時候我們就需要用到自定義智力了。自定義指令只有在註冊之後才能使用，兩種註冊方式 1.全域性註冊，這種定義方式可以在全域性進行使用 第一次引數是指令id，第二個引數是乙個定義物件或函式...

vue中自定義指令

鉤子函式 mounted 鉤子函式 會自動觸發的函式 生命週期 乙個例項從建立到銷毀的整個過程 vue中對元素進行識別 ref 相當於元素的id，可以使用ref為元素設定乙個唯一的標識 編號 type text v model newcar.id ref iidd this.ref s th is ...