在Vue中，常見(jiàn)的操作是通過(guò)點(diǎn)擊元素來(lái)觸發(fā)一些事件。但有時(shí)候，我們希望能夠點(diǎn)擊元素以外的區(qū)域來(lái)取消或隱藏一些操作。這時(shí)候就可以使用Vue 2.0中提供的clickoutside指令了。
clickoutside指令是Vue.js框架提供的一個(gè)自定義指令，用于在元素外部觸發(fā)相應(yīng)的事件。在使用該指令時(shí)需要先引入官方提供的相關(guān)代碼，代碼示例如下：
// clickoutside.js代碼
const nodeList = [];
const ctx = '@@clickoutsideContext';
document.addEventListener('click', e =>{
nodeList.forEach(node =>node[ctx].documentHandler(e));
});
export default {
bind(el, binding, vnode) {
const id = nodeList.push(el) - 1;
const documentHandler = function (e) {
if (!vnode.context || el.contains(e.target) || (vnode.context.popperElm && vnode.context.popperElm.contains(e.target))) {
return;
}
if (binding.expression && el[ctx].methodName && vnode.context[el[ctx].methodName]) {
vnode.context[el[ctx].methodName]();
} else {
el[ctx].bindingFn(e);
}
};
el[ctx] = {
id,
documentHandler,
methodName: binding.expression,
bindingFn: binding.value
};
},
update(el, binding) {
el[ctx].methodName = binding.expression;
el[ctx].bindingFn = binding.value;
},
unbind(el) {
const len = nodeList.length;
for (let i = 0; i< len; i++) {
if (nodeList[i][ctx].id === el[ctx].id) {
nodeList.splice(i, 1);
break;
}
}
delete el[ctx];
}
};然后在需要使用clickoutside功能的元素上添加v-clickoutside指令即可。當(dāng)元素外部被點(diǎn)擊時(shí)，相應(yīng)的處理函數(shù)也會(huì)被觸發(fā)。代碼示例如下：
< template >< div v-clickoutside = "handleClickOutside" >我是一個(gè)需要使用clickoutside指令的元素
此時(shí)，當(dāng)點(diǎn)擊元素外部時(shí)，控制臺(tái)會(huì)輸出"outside clicked"。
在實(shí)際開(kāi)發(fā)中，經(jīng)常需要取消一些操作，例如點(diǎn)擊彈出層外部關(guān)閉彈出層等。使用clickoutside指令，我們可以很方便地實(shí)現(xiàn)這些功能。例如，在彈出層上使用clickoutside指令，當(dāng)彈出層外部被點(diǎn)擊時(shí)，關(guān)閉該層。代碼示例如下：
< template >
以上就是Vue 2.0中clickoutside指令的使用方法。使用clickoutside指令可以簡(jiǎn)化我們的代碼，提高開(kāi)發(fā)效率，同時(shí)也可以使得頁(yè)面交互更加友好。在實(shí)際開(kāi)發(fā)中，如果遇到需要點(diǎn)擊元素外部觸發(fā)事件的情況，可以嘗試使用該指令。