主页 / 问题 / 1580939
Accepted
Arteil
Asked:2024-05-20 20:53:42 +0000 UTC2024-05-20 20:53:42 +0000 UTC

单击 div 元素外部

  • 772

有两种类型的自定义选择，可选择一个值和多个值。我使用 跟踪元素外部的点击@focusout。问题是，当您尝试通过单个选择在元素中选择一个值时，它会立即关闭、触发，@focusout并且每隔一段时间就会重新定义该值。同时，在具有多值的元素中，一切正常。

代码位于play.vuejs.org

在元素外部单击时是否有其他替代方法可以实现关闭？

更新。我意识到，如果您单击input，如果在输入之外，但在元素的边界处，则一切正常

vue.js

1 个回答

  1. Best Answer

    我找到了这个问题的解决方案。

    您需要在主 JS 文件中添加指令

    const clickOutside = {
beforeMount: (el, binding) => {
    el.clickOutsideEvent = event => {
        // here I check that click was outside the el and his children
        if (!(el == event.target || el.contains(event.target))) {
            // and if it did, call method provided in attribute value
            binding.value();
        }
    };
    document.addEventListener("click", el.clickOutsideEvent);
},
unmounted: el => {
    document.removeEventListener("click", el.clickOutsideEvent);
},};

createApp(App)
  .directive("click-outside", clickOutside)
  .mount("#app");

    到组件 (div)

    <div class="custom-select" v-click-outside="someFunction()"></div>
    • 0

相关问题