![](/img/trans.png)
[英]clickoutside directive preventing other click events to fire in vue component
[英]Dynamically Growing Dropdown Component with clickoutside directive
我有一个动态增长的下拉组件(其他下拉菜单被添加到屏幕上)并且在组件内部,我使用了一个 click 外部指令,当我在屏幕上只有 1 个下拉菜单时它完美地工作,但是当出现多个下拉菜单时,点击外面会发生冲突,导致没有下拉菜单打开。
我想在下拉列表关闭时解决解除绑定,但我不知道该怎么做。
指令clickoutside.js
export default {
bind(el, binding, vNode) {
console.log('bind');
// Provided expression must evaluate to a function.
if (typeof binding.value !== 'function') {
const compName = vNode.context.name;
let warn = `[Vue-click-outside:] provided expression '${binding.expression}' is not a function, but has to be`;
if (compName) { warn += `Found in component '${compName}'` }
console.warn(warn);
}
// Define Handler and cache it on the element
// eslint-disable-next-line prefer-destructuring
const bubble = binding.modifiers.bubble;
const handler = (e) => {
if (bubble || (!el.contains(e.target) && el !== e.target)) {
binding.value(e);
}
};
// eslint-disable-next-line no-underscore-dangle
el.__vueClickOutside__ = handler;
// add Event Listeners
document.addEventListener('click', handler);
},
unbind(el, binding) {
// Remove Event Listeners
console.log('unbind');
// eslint-disable-next-line no-underscore-dangle
document.removeEventListener('click', el.__vueClickOutside__);
// eslint-disable-next-line no-underscore-dangle
el.__vueClickOutside__ = null;
},
};
下拉组件.vue
<template>
<div v-for="type in criticalityTypes" :key="type" id="users-list-form" class="users-list-form neo-col" :class="type">
<div class="neo-form-select neo-form-select__filter"
v-click-outside="currentOpenType ? closeList : doNothing"
:class="{'neo-is-open': open[type]}">
<input type="text"
class="neo-form-field neo-form-select__field"
@click="showList(type)"
:placeholder="inputPlaceholder(type)"
v-model="searchQuery[type]">
<span class="neo-form-select__icon" @click="showList(type)"></span>
<div class="neo-form-select__options">
// OMMITED CODE
</div>
</div>
</div>
</template>
<script>
import clickOutside from '../../../../directives/clickoutside.js';
export default {
name: 'ConfigUsersNotification',
props: [
'data',
'criticalityTypes',
],
directives: {
clickOutside,
},
data() {
return {
open: {
CRITICALITY_HIGH: false,
CRITICALITY_MEDIUM: false,
CRITICALITY_LOW: false,
},
searchQuery: {
CRITICALITY_HIGH: '',
CRITICALITY_MEDIUM: '',
CRITICALITY_LOW: '',
},
currentOpenType: '',
};
},
methods: {
showList(type) {
if (!this.open[type]) {
this.open[type] = !this.open[type];
}
this.currentOpenType = type;
this.closeOthers(type);
if (this.data.length === 0) {
this.$emit('loadUsers');
}
},
closeList() {
this.open[this.currentOpenType] = false;
this.currentOpenType = '';
},
closeOthers(type) {
Object.keys(this.open).forEach((item) => {
if (item !== type) {
this.open[item] = false;
}
});
},
},
};
</script>
在criticalityTypes
我收到一个数组,有时我只有一个项目,有时两个......
简历:当我只有一个下拉列表时,效果很好,但是当我有多个点击外部冲突时,我认为解决该问题的方法是在关闭下拉列表时取消绑定外部点击,并在打开时绑定,但我不知道该怎么做。
有什么帮助吗?
防止对元素的点击冒泡到document
上将阻止它们触发页面中任何其他元素的外部点击功能。
所以添加一个
el.addEventListener('click', function(e) { e.stopPropagation(); });
... 在绑定函数的末尾
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.