demand
One day, the product felt uncomfortable clicking x to close the window. So there is A requirement to automatically close window A when you click outside of window A. It also requires that when you click on certain B Windows, you can’t close A. And the projects always use these things very frequently. So just feel the stones and change and come up with your own cache.
Test kit
Expected result: Execute the close function when clicking outside A and C
The resulting GIF looks like this
Method of use
/ / parameters description 1. IgnoreParentClasses: the String / / need to skip the CSS class, separated by Spaces when multiple, "" 2. By default onClick: Function / / trigger events, 3. ListenerName :String // Name of the listener event, default click event //1. CSS class v-clickOutside ="close" //2 V-clickoutside ="{ignoreParentClasses: 'ignore-a ', onClick: close listenerName:" mouseDown "}"Copy the code
The complete code is as follows
Train of thought
This kind of operation basically revolves around DOM. After understanding various parameters of vue Directive, it is easy to handle with event binding