javascript - 自定义指令进行组件渲染

Question

我正在使用这篇文章中的自定义 click-outside 指令:

Detect click outside element

这是我的元素:

<div class="datepicker panel panel-default" v-click-outside="close">

自定义指令:

module.exports = {
    bind(el, binding, vnode) {
        el.event = (event) => {
            // Check that click was outside the el and his children.
            if (!(el === event.target || el.contains(event.target))) {
                console.log('Clicked outside');

                // Call the method provided as the attribute value.
                vnode.context[binding.expression](event);
            }
        };

        document.body.addEventListener('click', el.event);
    },

    unbind(el) {
        document.body.removeEventListener('click', el.event);
    }
};

它有效，据我所知，绑定(bind)发生在元素的渲染上。因为我只想在我的日期选择器出现时注册点击事件，所以我用 v-if 包装了它。

问题是，当我使用按钮切换日期选择器上 v-if 的显示时，指令中的 close 方法会立即触发。

bind 中的事件似乎发生在元素显示之前，因此它会立即关闭，根本不会显示任何内容。

这看起来很奇怪，因为按钮负责显示日期选择器，我希望绑定(bind)在日期选择器呈现时发生。不在同一时间或之前。

现在它似乎甚至在元素完全呈现之前就发生了。这会导致我的显示按钮引发 v-click-outside 事件。

这是什么原因造成的？

编辑:

做了一个 Jsfiddle 来演示这个问题(打开控制台):

https://jsfiddle.net/stephanv/qqjnngdz/2/

Answer 1

嗯，这听起来绝对合乎逻辑。这是发生了什么:

1. 您点击“显示日期选择器”，它实际上是一个按钮
2. show方法被调用，因为在按钮上你有 @click="show"

3. visible属性更改为 true。

4. 指令被评估，因为点击事件

5. if-else 到位，说明 el (带指令的 div)不同于 event.target (按钮)

6. 绑定(bind)表达式 ( hide ) 被调用是因为之前的 if-else

7. hide函数被调用，visible属性设置为 false，因此组件被隐藏!

与示例相比，您在这里缺少的是您打开来自另一个目标(在您的案例中为按钮)的日期选择器。这意味着默认情况下您是点击元素外部以显示它。

您有两个选择 - 一个是检查日期选择器的当前状态 - 添加另一个属性 ( justOpened )，将其设置为 true里面show , 当你检查它是否在外面被点击时，如果属性是 true , 将其设置为 false并返回。这样您就可以“跳过”此类事件。

如果您可以简单地执行此操作，则不需要所有这些:

<button type="button" @click.stop="show">Show datepicker</button>

这.stop修饰符实际上会调用 stopImmediatePropagation()在 native 单击事件上，因此当您单击此按钮时，您的指令根本不会被调用。它就像一个魅力，但要注意，如果你打开日期选择器，然后再次点击同一个按钮，日期选择器将不会被隐藏(因为它不知道你点击了外部)!

希望对您有所帮助:)