vue自定義指令合集(超實用!)
一、什么是自定義指令
vue官方提供很多指令,如:v-model,v-show,v-if,v-if等,他們都以v-開頭。當這些指令不能滿足我們實際開發(fā)需求時,我們還可以自定義指令。自定義指令主要分為全局自定義指令和局部自定義指令。
二、全局自定義指令directive
在main.js中寫全局自定義指令
// 自動獲取焦點
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})三、局部自定義指令directives
可以在任意組件中定義自定義指令,directives是一個對象,他的每一個屬性就只一個自定義指令,這里定義了一個focus指令。
directives: {
focus: {
inserted: function (el) {
el.focus()
}
}
}四、自定義指令的調(diào)用
和普通指令的使用方式一樣v-自定義指令名稱
如v-focus
五、自定義指令的鉤子函數(shù)
有以下五個鉤子函數(shù):
bind:只調(diào)用一次,指令第一次綁定到元素時調(diào)用。在這里可以進行一次性的初始化設置。inserted:被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在,但不一定已被插入文檔中)。update:所在組件的 VNode 更新時調(diào)用,但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變,也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新。componentUpdated:指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。unbind:只調(diào)用一次,指令與元素解綁時調(diào)用。
每個鉤子函數(shù)有以下參數(shù):
- el:指令所綁定的元素,可以用來直接操作 DOM。
- binding:一個對象,包含以下 property:
- name:指令名,不包括 v- 前綴。
- value:指令的綁定值,例如:v-my-directive="1 + 1" 中,綁定值為 2。
- oldValue:指令綁定的前一個值,僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
- expression:字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中,表達式為 "1 + 1"。
- arg:傳給指令的參數(shù),可選。例如 v-my-directive:foo 中,參數(shù)為 "foo"。
- modifiers:一個包含修飾符的對象。例如:v-my-directive.foo.bar 中,修飾符對象為 { foo: true, bar: true }。
- vnode:Vue 編譯生成的虛擬節(jié)點。
- oldVnode:上一個虛擬節(jié)點,僅在 update 和 componentUpdated 鉤子中可用。
注意:bind和insert都只調(diào)用一次;bind在insert前執(zhí)行,也就是bind在dom樹繪制前調(diào)用,insert在dom樹繪制后調(diào)用;涉及dom操作的,我們一般都用insert,如自動獲取焦點指令,只能用insert函數(shù)。
六、自定義指令傳參
<div v-test:[data1]>這是測試頁。。。。</div>
可以用binding.arg去接收":"后的參加參數(shù),這里傳遞了data1這個變量,data1必須用[]包裹,否則就是‘data1’這個字符串,[]中只能傳遞一個變量,多個變量可以用對象或數(shù)組組裝。binding.value去接收"="后的參數(shù),這里是個函數(shù)所以用bingding.value()去調(diào)用。
<div v-test:[data1]='func'>這是測試頁。。。。</div>
test: {
inserted(el, binding, vnode) {
// 獲取參數(shù)
console.log('test',binding.arg);
// 執(zhí)行傳遞的函數(shù)
binding.value({success: true,data:{}});
},
}七、常見自定義指令
1、拖拽
dragV: {
bind(drag, binding, vNode) {
drag.style.position = 'absolute';
drag.style.zIndex = '9999';
//當鼠標按下時
drag.onmousedown = e => {
//做到瀏覽器兼容
e = e || window.event
let diffX = e.clientX - drag.offsetLeft
let diffY = e.clientY - drag.offsetTop
//當拉著box移動時
document.onmousemove = e => {
// 瀏覽器兼容
e = e || window.event;
let left = e.clientX - diffX;
let top = e.clientY - diffY;
drag.style.left = left + 'px';
drag.style.top = top + 'px';
}
// 當鼠標抬起時
document.onmouseup = function() {
this.onmousemove = null
this.onmouseup = null
}
}
}
},2、防抖
<div v-debounce:[time]="debounceFunc">這是測試頁。。。。</div>
debounce:{
inserted(el, binding) {
let timer;
let delay = binding.arg || 500;
el.addEventListener('click', () => {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
binding.value()
}, delay)
})
},
}八. 應用場景
8.1 自動獲取焦點(官方示例)
// 注冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
// 當被綁定的元素插入到 DOM 中時……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
8.2 一鍵 Copy的功能
- 首先建一個 js 文件(v-copy.js)。定義一個對象。( 指令實際就是一個對象 )
import { Message } from 'ant-design-vue';
const vCopy = { // 名字愛取啥取啥
/*
bind 鉤子函數(shù),第一次綁定時調(diào)用,可以在這里做初始化設置
el: 作用的 dom 對象
value: 傳給指令的值,也就是我們要 copy 的值
*/
bind(el, { value }) {
el.$value = value; // 用一個全局屬性來存?zhèn)鬟M來的值,因為這個值在別的鉤子函數(shù)里還會用到
el.handler = () => {
if (!el.$value) {
// 值為空的時候,給出提示,我這里的提示是用的 ant-design-vue 的提示,你們隨意
Message.warning('無復制內(nèi)容');
return;
}
// 動態(tài)創(chuàng)建 textarea 標簽
const textarea = document.createElement('textarea');
// 將該 textarea 設為 readonly 防止 iOS 下自動喚起鍵盤,同時將 textarea 移出可視區(qū)域
textarea.readOnly = 'readonly';
textarea.style.position = 'absolute';
textarea.style.left = '-9999px';
// 將要 copy 的值賦給 textarea 標簽的 value 屬性
textarea.value = el.$value;
// 將 textarea 插入到 body 中
document.body.appendChild(textarea);
// 選中值并復制
textarea.select();
// textarea.setSelectionRange(0, textarea.value.length);
const result = document.execCommand('Copy');
if (result) {
Message.success('復制成功');
}
document.body.removeChild(textarea);
};
// 綁定點擊事件,就是所謂的一鍵 copy 啦
el.addEventListener('click', el.handler);
},
// 當傳進來的值更新的時候觸發(fā)
componentUpdated(el, { value }) {
el.$value = value;
},
// 指令與元素解綁的時候,移除事件綁定
unbind(el) {
el.removeEventListener('click', el.handler);
},
};
export default vCopy;總結
到此這篇關于vue自定義指令的文章就介紹到這了,更多相關vue自定義指令內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
使用Electron打包vue文件變成exe應用程序的全過程
這篇文章主要給大家介紹了使用Electron打包vue文件變成exe應用程序的全過程,文中通過代碼示例和圖文結合的方式給大家講解的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-01-01
使用vue打包時vendor文件過大或者是app.js文件很大的問題
這篇文章主要介紹了使用vue打包時vendor文件過大或者是app.js文件很大問題的解決方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06

