Shulou(Shulou.com)05/31 Report--

This article mainly introduces how to click on the blank drop-down box in vue through instructions to achieve the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, with a certain reference value, I believe you will have something to gain after reading this article on how to click on the blank drop-down box in vue through instructions, let's take a look at it.

Vue custom directive

Explain (refer to the official document)

In addition to the default built-in directives for core functions (v-model and v-show), Vue also allows you to register custom directives. Note that in Vue2.0, the main form of code reuse and abstraction is components. However, there are cases where you still need to perform low-level operations on ordinary DOM elements, and custom instructions are used.

For example:

We want such an input box to get focus when the page loads

We can register custom instructions

Global registration:

/ / register a global custom directive `v-focus`Vue.directive ('focus', {/ / when the bound element is inserted into the DOM. Inserted: function (el) {/ / focus element el.focus ()})

Local registration

/ / definition of directives in the component: {focus: {/ / directive inserted: function (el) {el.focus ()}

You can then use the custom v-focus attribute on the relevant elements in the template: (here the v-focus is obtained from the custom focus)

Hook function (refer to official documentation)

The hook we use in the above example is inserted, which is called when the bound element is inserted into the parent node (only the parent node is guaranteed to exist, but not necessarily inserted into the document).

There are some hooks in the official vue documentation for our reference:

Bind: called only once, the first time an instruction is bound to an element. One-time initialization settings can be made here.

Inserted: called when the bound element is inserted into the parent node (only the parent node is guaranteed to exist, but not necessarily inserted into the document).

Update: called when the VNode of the component in which it is located is updated, but may occur before its child VNode update. The value of the instruction may or may not have changed. However, you can ignore unnecessary template updates by comparing the values before and after the update (see below for detailed hook function parameters).

ComponentUpdated: called after the VNode and its child VNode of the component to which the instruction belongs are all updated.

Unbind: called only once, when the instruction is unbound from the element.

Click on the blank space to hide the drop-down box through custom instructions

Let's not say any more about custom directives, but let's talk about how to implement our requirements through instructions.

First register the global directive

/ / generally add the instruction Vue.directive ('click-outside', {bind: function (el, binding, vnode) {el.clickOutsideEvent = function (event) {/ / here I check that click was outside the el and his childrens if (! (el = = event.target | | el.contains (event.target) in the blank space in the main.js in the vue project) {/ / and if it did Call method provided in attribute value vnode.context [binding.expression] (event)}} document.body.addEventListener ('click', el.clickOutsideEvent)}, unbind: function (el) {document.body.removeEventListener (' click', el.clickOutsideEvent)}})

Add custom instructions to the component elements that need to be monitored

/ / the clickOutSide here is listening to the click, not

The element whose id is dropdown1 triggers the clickOutSide method when the monitor hears that it is not clicking on itself.

Define response methods in components

/ / Click the blank space to make topBar hide clickOutSide () {this.flag = false;}. This is the end of the article on "how to click on the blank drop-down box in vue through instructions". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to click on the blank space to put away the drop-down box in vue". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.