Contains hides elements outside the location of the click element

API:

The contains testing an element is contained within another element A: www.runoob.com/jquery/misc…

Principle:

Listen to the click event, when click to determine whether the click position is included in the target element, if it passes the detection will hide

Code:

// Create a click listener

mounted () {

document.addEventListener('click', this.queryHide)
Copy the code

},

// Clear the click listener

beforeDestroy () {

document.removeEventListener('click',this.queryHide)
Copy the code

},

methods: {

queryHide (e) { if ((! this.$refs.queryBox.contains(e.target)) && (! This.$refs.queryDown.contains(e.get))) {/* Close element */ this.show = false}}Copy the code

}

Note:

1. The listener must be cleared, otherwise the console will report an error, although it does not affect the use

2. General Check Determine the element to close and the button to enable the element

3. Ref replaces the DOM selection of jquery and JS. When vUE is not applicable, you can directly use the DOM selector to complete the above operations