Vue自定義指令directive的使用方法分享
1. 一個指令定義對象可以提供如下幾個鉤子函數(均為可選)
bind:隻調用一次，指令第一次綁定到元素時調用。在這裡可以進行一次性的初始化設置。
inserted:被綁定元素插入父節點時調用(僅保證父節點存在，但不一定已被插入文檔中)。
update:隻要當前元素不被移除，其他操作幾乎都會觸發這2個生命周期，先觸發update後觸發componentUpdate。虛擬DOM什麼時候更新：隻要涉及到元素的隱藏、顯示（display）值的改變、內容的改變等都會觸發虛擬DOM更新.
componentUpdated:組件更新
unbind:當使用指令的元素被卸載的時候會執行，就是當前元素被移除的時候,隻調用一次
Vue.directive 內置瞭五個鉤子函數 ：
bind(綁定觸發)、inserted(插入觸發)、update(更新觸發)、componentUpdated(組件更新觸發)和unbind(解綁觸發)函
// 註冊
Vue.directive('my-directive',{
bind: function () {},
inserted: function () {},
update: function () {},
componentUpdated: function () {},
unbind: function() {}
})
2.指令鉤子函數會被傳入以下參數
el：指定所綁定的元素，可以用來直接操作DOM
binding:一個對象，包含以下屬性：
- name:指令名，不包含前綴v-
- value:指令的綁定值，例如：v-my-directive="1+1"中，綁定值為2
- oldValue:指令綁定的前一個值，僅在update和componentUpdated鉤子中可用，無論值是否改變都可用。
- expression: 綁定值的字符串形式。 例如 v-my-directive=“1 + 1” ， expression 的值是 “1 + 1”。
- arg: 傳給指令的參數。例如 v-my-directive:foo， arg 的值是 “foo”。
- modifiers: 一個包含修飾符的對象。 例如： v-my-directive.foo.bar, 修飾符對象 modifiers 的值是{ foo: true, bar: true }。
- vnode: Vue 編譯生成的虛擬節點
- oldVnode: 上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用
vnode：vue編譯生成的虛擬節點
oldVnode：上一個虛擬節點，僅在update和componentUpdated鉤子中可用
除瞭el之外，其他參數都應該是隻讀的，不能修改。如果需要在鉤子之間共享數據，建議通過元素的 dataset 來進行。
3.使用自定義指令場景的示例
drag.js
import Vue from 'vue'
import { Message } from 'element-ui';
// 自定義指令示例1：彈窗拖拽
Vue.directive('dialogDrag',{
bind(el,binding,vnode,oldVnode){
const dialogHeader = el.querySelector('.el-dialog__header');
const dialogDom = el.querySelector('.el-dialog');
dialogHeader.style.cursor = 'move'
/**
* 不同瀏覽器獲取行內樣式屬性
* ie瀏覽器： dom元素.currentStyle
* 火狐瀏覽器：window.getComputedStyle(dom元素, null)
*/
const sty = dialogDom.currentStyle || window.getComputedStyle(dialogDom, null)
dialogHeader.onmousedown = (e) => {
//按下鼠標，獲取點擊的位置 距離 彈窗的左邊和上邊的距離
//點擊的點距離左邊窗口的距離 - 彈窗距離左邊窗口的距離
const distX = e.clientX - dialogHeader.offsetLeft;
const distY = e.clientY - dialogHeader.offsetTop;
//彈窗的left屬性值和top屬性值
let styL, styT
//註意在ie中，第一次獲取到的值為組件自帶50%，移動之後賦值為Px
if(sty.left.includes('%')){
styL = +document.body.clientWidth * (+sty.left.replace(/%/g,'') / 100)
styT = +document,body.clientHeight * (+sty.top.replace(/%/g,'') / 100)
}else{
styL = +sty.left.replace(/px/g,'');
styT = +sty.top.replace(/px/g,'');
}
document.onmousemove = function(e) {
//通過事件委托，計算移動距離
const l = e.clientX - distX
const t = e.clientY - distY
//移動當前的元素
dialogDom.style.left = `${l + styL}px`
dialogDom.style.top = `${t + styT}px`
}
document.onmouseup = function(e){
document.onmousemove = null
document.onmouseup = null
}
}
}
})
//自定義指令示例2：v-dialogDragWidth 可拖動彈窗寬度（右側邊）
Vue.directive('dragWidth',{
bind(el) {
const dragDom = el.querySelector('.el-dialog');
const lineEl = document.createElement('div');
lineEl.style = 'width: 5px; background: inherit; height: 80%; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; z-index: 1; cursor: w-resize;';
lineEl.addEventListener('mousedown',
function (e) {
// 鼠標按下，計算當前元素距離可視區的距離
const disX = e.clientX - el.offsetLeft;
// 當前寬度
const curWidth = dragDom.offsetWidth;
document.onmousemove = function (e) {
e.preventDefault(); // 移動時禁用默認事件
// 通過事件委托，計算移動的距離
const l = e.clientX - disX;
if(l > 0){
dragDom.style.width = `${curWidth + l}px`;
}
};
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
};
}, false);
dragDom.appendChild(lineEl);
}
})
// 自定義指令示例3：v-dialogDragWidth 可拖動彈窗高度（右下角）
Vue.directive('dragHeight',{
bind(el) {
const dragDom = el.querySelector('.el-dialog');
const lineEl = document.createElement('div');
lineEl.style = 'width: 6px; background: inherit; height: 10px; position: absolute; right: 0; bottom: 0; margin: auto; z-index: 1; cursor: nwse-resize;';
lineEl.addEventListener('mousedown',
function(e) {
// 鼠標按下，計算當前元素距離可視區的距離
const disX = e.clientX - el.offsetLeft;
const disY = e.clientY - el.offsetTop;
// 當前寬度 高度
const curWidth = dragDom.offsetWidth;
const curHeight = dragDom.offsetHeight;
document.onmousemove = function(e) {
e.preventDefault(); // 移動時禁用默認事件
// 通過事件委托，計算移動的距離
const xl = e.clientX - disX;
const yl = e.clientY - disY
dragDom.style.width = `${curWidth + xl}px`;
dragDom.style.height = `${curHeight + yl}px`;
};
document.onmouseup = function(e) {
document.onmousemove = null;
document.onmouseup = null;
};
}, false);
dragDom.appendChild(lineEl);
}
})
// 自定義指令示例4：圖片加載前填充背景色
Vue.directive('imgUrl',function(el,binding){
var color=Math.floor(Math.random()*1000000);//設置隨機顏色
el.style.backgroundColor='#'+color;
var img=new Image();
img.src=binding.value;// -->binding.value指的是指令後的參數
img.onload=function(){
el.style.backgroundColor='';
el.src=binding.value;
}
})
// 自定義指令示例5：輸入框聚焦
Vue.directive("focus", {
// 當被綁定的元素插入到 DOM 中時……
inserted (el) {
// 聚焦元素
el.querySelector('input').focus()
},
});
// 自定義指令示例6：設置防抖自定義指令
Vue.directive('throttle', {
bind: (el, binding) => {
let setTime = binding.value; // 可設置防抖時間
if (!setTime) { // 用戶若不設置防抖時間，則默認2s
setTime = 1000;
}
let cbFun;
el.addEventListener('click', event => {
if (!cbFun) { // 第一次執行
cbFun = setTimeout(() => {
cbFun = null;
}, setTime);
} else {
/*如果多個事件監聽器被附加到相同元素的相同事件類型上，當此事件觸發時，
它們會按其被添加的順序被調用。如果在其中一個事件監聽器中執行 stopImmediatePropagation() ，那麼剩下的事件監聽器都不會被調用*/
event && event.stopImmediatePropagation();
}
}, true);
},
});
// 自定義指令示例7：點擊按鈕操作頻繁給出提示
Vue.directive('preventReClick', {
inserted: function (el, binding) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
Message.warning('操作頻繁')
setTimeout(() => {
el.disabled = false
//可設置時間
}, binding.value || 3000)
}
})
}
})
main.js中引入文件：
import '@/assets/js/drag.js'
頁面使用：
<template>
<div>
<el-button type="text" @click="dialogVisible = true">點擊打開 Dialog</el-button>
<div style="display:flex">
<img v-imgUrl="url"></img>
<img v-imgUrl="url"></img>
<img v-imgUrl="url"></img>
<img v-imgUrl="url"></img>
<img v-imgUrl="url"></img>
<img v-imgUrl="url"></img>
<img v-imgUrl="url"></img>
<img v-imgUrl="url"></img>
</div>
<div>
<el-input placeholder="請選擇日期" suffix-icon="el-icon-date" v-model="input1"></el-input>
<el-input v-focus placeholder="請輸入內容" prefix-icon="el-icon-search" v-model="input2"></el-input>
</div>
<div>
<el-button type="danger" v-throttle @click="throttleBtn">危險按鈕</el-button>
<el-button @click="submitForm()">創建</el-button>
</div>
<el-dialog title="提示" v-dialogDrag v-dragWidth v-dragHeight :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
<span>這是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">確 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
url:'//www.baidu.com/img/flexible/logo/pc/result.png',
input1: '',
input2: '',
}
},
methods: {
handleClose(done) {
console.log('彈窗打開')
},
throttleBtn(){
console.log('我的用來測試防抖的按鈕')
},
submitForm(){
this.$message.error('Message 消息提示每次隻能1個');
}
},
}
</script>
<style>
img{
width: 100px;
height: 100px;
}
</style>
看下效果吧：
首先進入頁面，
1.第二個輸入框會鼠標聚焦，
2.點擊按鈕，會有防止重復點擊
3.圖片加載前有默認背景色
4.彈窗 可以隨處移動。右邊可拖拽變寬，右下角可以整體變大
到此這篇關於Vue自定義指令directive的使用方法分享的文章就介紹到這瞭,更多相關Vue自定義指令directive內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！