Javascript 如何在Vuejs中添加v-click-outside？

{{item}}

以下是我在项目中使用的指令：

从“Vue”导入Vue；
const有_WINDOWS=typeof window！='未定义'；
const有_NAVIGATOR=typeof NAVIGATOR！='未定义'；
const IS_TOUCH=HAS_WINDOWS&（'ontouchstart'在window | | |）（HAS_NAVIGATOR&&NAVIGATOR.msMaxTouchPoints>0））；
const EVENTS=是否触摸？['touchstart']：['click']；
常量标识=（项）=>项；
常量指令={
实例：[]，
};
函数processDirectiveArguments（bindingValue）
{
const isFunction=typeof bindingValue=='function'；
如果（！isFunction&&typeof bindingValue！=='object'）
{
抛出新错误（“v-click-outside:绑定值必须是函数或对象”）；
}
返回{
handler:isFunction？bindingValue:bindingValue.handler，
中间件：bindingValue.middleware | | IDENTITY，
事件：bindingValue.events | | events，
isActive:！（bindingValue.isActive==false），
};
}
函数onEvent（{el，事件，处理程序，中间件}）
{
const isClickOutside=event.target！==el&&！el.contains（event.target）；
如果（！isclickout）
{
返回；
}
if（中间件（事件，el））
{
处理程序（事件，el）；
}
}
函数createInstance（{el，事件，处理程序，中间件}）
{
返回{
埃尔，
EventHandler:events.map（（eventName）=>({
事件：eventName，
处理程序：（事件）=>onEvent({
事件
埃尔，
handler，
中间件
}),
})),
};
}
功能removeInstance（el）
{
const instanceIndex=directive.instances.findIndex（（instance）=>instance.el==el）；
如果（instanceIndex==-1）
{
//注意：当活动状态从false变为false时，可能会发生这种情况
返回；
}
const instance=directive.instances[instanceIndex]；
forEach（（{event，handler}）=>
document.removeEventListener（事件，处理程序）
);
指令.instances.splice（instanceIndex，1）；
}
函数绑定（el，绑定）
{
const{events，handler，middleware，isActive}=processDirectiveArguments（binding.value）；
如果（！isActive）
{
返回；
}
const instance=createInstance({
埃尔，
事件，
handler，
中间件
});
forEach（（{event，handler}）=>
setTimeout（（）=>document.addEventListener（事件，处理程序），0）
);
指令.instances.push（实例）；
}
函数更新（el，{value，oldValue}）
{
if（JSON.stringify（value）==JSON.stringify（oldValue））
{
返回；
}
const{events，handler，middleware，isActive}=processDirectiveArguments（值）；
如果（！isActive）
{
抗议（el）；
返回；
}
让instance=directive.instances.find（（instance）=>instance.el==el）；
如果（实例）
{
forEach（（{event，handler}）=>
document.removeEventListener（事件，处理程序）
);
instance.eventHandlers=events.map（（eventName）=>({
事件：eventName，
处理程序：（事件）=>onEvent({
事件
埃尔，
handler，
中间件
}),
}));
}
其他的
{
instance=createInstance({
埃尔，
事件，
handler，
中间件
});
指令.instances.push（实例）；
}
forEach（（{event，handler}）=>
setTimeout（（）=>document.addEventListener（事件，处理程序），0）
);
}
directive.bind=bind；
directive.update=更新；
directive.unbind=抗议；
Vue.指令（“点击外部”，指令）；

可以从在输入中添加

@focusout=“closesesearch”

事件开始？然后关闭搜索：）为@focusout=“closeSearch”编写的方法，closeSearch（）{this.showSearchHistory=true；}，但现在的问题是，即使我也单击li标记，li标记也会关闭如果我在li标记外单击，那么li标记应该关闭。。我已经更新了我的代码，你能检查一下吗。这里的两个方面，焦点输出工作正常，在输入之外的任何地方，它都会触发事件并关闭li标记。现在的问题是，即使点击li标签，它也会关闭标签，如果我理解正确的话。对于可用性，我建议保持这种行为所有应用程序的全局搜索，甚至谷歌搜索，你得到列表，你点击搜索框外或列表项（搜索结果），它填充输入，列表消失。这就是用户适应使用的方式？我可以知道你为什么不这样做吗？是的，你是对的。但在这种情况下，在列表项（搜索结果）上，它填充输入，然后列表消失。问题是，它没有填充输入，只是关闭了li标记。在添加代码closeSearch（）{this.showSearchHistory=true；}之后，感谢上面的代码，我尝试了这么做。。。但在开始时，与我的代码相关的字符串被删除。您将有一个变量

showLI

，它最初为FALSE。当您在搜索字段内聚焦时-您将此变量设置为TRUE，以便

可以做出反应。您将在搜索字段中添加

v-click-outside=“closeLI”

。

closeLI

函数将变量

showLI

设置为FALSE。