There is a demand, oneself write a play in the vue box, click a button to play box appears, click on the play outside the box to play box, click the the bounced out of place to play the function of the box disappeared any plan for the great god, thank the

CodePudding user response:

To monitor the document click event as long as it's not playing the dom is hidden window

CodePudding user response:

Disappear body onclick=function () {} code bounced @. Click the stop=""

CodePudding user response:

Using the vue ref property registration reference mask layer, the feeling is one of the most direct method

CodePudding user response:

Play outside the box is typically have a mask layer, add a click event to mask layer

CodePudding user response:

The mask layer to add a click event, it is ok to call closure method, if you use the element frame of box components, it has a closeOnClickModal parameters, set it to false,

CodePudding user response:

Use the UI, for example elementUI
Or tied up outside a click event, tie a stop the click event bubbling, points out, change flag, display become none, point, not a bubble, not trigger this trifle, tied to the window outside or something else, something big

CodePudding user response:

With custom orders!

 
Vue. Directive (' clickout '{
The bind: function (el, binding, vnode) {
The function documentHandler (e) {
If (el. The contains (e. arget)) {
Return false 
} 
If (binding expression) {
Value (e) 
 binding.} 
} 
El. __vueClickOut__=documentHandler 
Document. The addEventListener (' click 'documentHandler) 
}, 
Unbind: function (el, binding) {
Document. The removeEventListener (' click 'el __vueClickOut__) 
The delete el. __vueClickOut__ 
} 
}) 

In the need to use the labels with

 v - clickout="here writing method in operation shows whether or not the function name"