[英]clickoutside directive preventing other click events to fire in vue component
我已经为关闭侧边栏实现了点击外部指令。 指令工作正常,但侧栏的内容(任何点击事件都不会触发)。 如何停止传播该事件?
这是我的 clickoutside.js
import Vue from 'vue';
const nodeList = [];
const ctx = '@@clickoutsideContext';
let startClick;
const counter = 0;
const isServer = Vue.prototype.$isServer;
/**
* added this on event function for direct dom manipulation
*/
const onEvent = (function() {
if (!isServer && document.addEventListener) {
return function(element, event, handler) {
if (element && event && handler) {
element.addEventListener(event, handler, false);
}
};
}
return function(element, event, handler) {
if (element && event && handler) {
element.attachEvent(`on${event}`, handler);
}
};
})();
!isServer &&
onEvent(document, 'mousedown', e => {
startClick = e;
});
!isServer &&
onEvent(document, 'mouseup', e => {
nodeList.forEach(node => node[ctx].documentHandler(e, startClick));
});
// setting up mouse events
function createDocumentHandler(el, binding, vnode) {
return function(mouseup = {}, mousedown = {}) {
if (
!vnode ||
!vnode.context ||
!mouseup.target ||
!mousedown.target ||
el.contains(mouseup.target) ||
el.contains(mousedown.target) ||
el === mouseup.target ||
(vnode.context.popperElm &&
(vnode.context.popperElm.contains(mouseup.target) ||
vnode.context.popperElm.contains(mousedown.target)))
)
return;
if (
binding.expression &&
el[ctx].methodName &&
vnode.context[el[ctx].methodName]
) {
vnode.context[el[ctx].methodName]();
} else {
el[ctx].bindingFn && el[ctx].bindingFn();
}
};
}
/**
* v-clickoutside
* @desc Only trigger when click outside
* @example
* ```vue
* <div v-element-clickoutside="handleClose">
* ```
*/
export default {
bind(el, binding, vnode) {
nodeList.push(el);
const id = counter + 1;
el[ctx] = {
id,
documentHandler: createDocumentHandler(el, binding, vnode),
methodName: binding.expression,
bindingFn: binding.value
};
},
update(el, binding, vnode) {
el[ctx].documentHandler = createDocumentHandler(el, binding, vnode);
el[ctx].methodName = binding.expression;
el[ctx].bindingFn = binding.value;
},
unbind(el) {
const len = nodeList.length;
for (let i = 0; i < len; i += 1) {
if (nodeList[i][ctx].id === el[ctx].id) {
nodeList.splice(i, 1);
break;
}
}
delete el[ctx];
}
};
这是我在组件模板中添加指令的地方
<v-main :style="{ paddingTop: '48px' }" >
<div v-clickoutside = "closeEvent">
<v-container fluid class="pa-0">
<keep-alive>
<router-view name="layout" />
</keep-alive>
<router-view />
</v-container>
</div>
<keep-alive>
<SideBar v-model="drawer" />
</keep-alive>
</v-main>
在此侧边栏有多个按钮,但 onclick 不工作,边栏在单击这些按钮时关闭。
@mousedown 在 @click 事件之前运行,这就是您无法单击侧边栏内容的原因。 我建议从官方文档https://v2.vuejs.org/v2/guide/events.html中查看事件修饰符(特别是 .stop)或确定要触发的适当事件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.