Vue.js Implementation You Click on the drop-down list of the drop-down list area (custom drop-down list)

In the development process, in order to look good effect, themselves often need to develop a drop-down list, instead of using HTML itself select the drop-down list. However, when writing custom drop-down list and they will run into a problem: If the user clicks the mouse to operate outside the scope of the drop-down list, how to turn off the drop-down list has been opened?

Solutions are as follows: to add a click event on a DOM root node, while the default behavior of the drop-down list and stop the event bubbling inside. When the response to this click event when the note is click outside the drop-down list range (because prevents bubbling event in the drop-down list), you can close the drop-down list has been opened.

If it is pure JS code, someone might use document.onclick to add a root node events. However, I now use Vue.js, will choose to use Vue.js way to deal with this problem.

Vue.js organize using components of the code, there is a root component can be added @click root component in this event, in response to click events outside the region. In a complete application, there may be a variety of scenarios need to click outside this area off function. In addition to the most common form in the drop-down list, may also be a message box top right corner of the site, or a menu. More appropriate approach is to click on a specific event processing logic to go into the various components.

then how to make the various sub-components of the response to the click event on the root component of it? You can use Vuex to do this. Play a role here Vuex mutual transfer of information between the components.

the reader can be downloaded at this URL Demo project I wrote:

The reader is advised to use yarn install to install the required dependencies.

Here the point of the key code:

Program Entry main.js:

  import Vue from 'vue'import App from './App.vue'import VueRouter from' vue-router'import routes from './router'import VueSuperagent from' vue-superagent'import Vuex from 'vuex'import' babel-polyfill '; import store from './vuex/store';Vue.use (Vuerouter );Vue.use (VueSuperature );Vue.use (Vuex ); Const Router = new Vuerouter ({Mode:' History ', routes}) New Vue ({EL) NEW VUE : '#App', Router, Store, Render: h => h (app)})  
The root node app.Vue adds a click event.

   Export Default {Methods: {ClickRoot (Event) {THIS. $. Store.dispatch ("ClickrootNumAction", 1);}}} 
The above is the Vue.js that Xiaobian introduced to everyone is implemented in the drop-down list area. Click outside, turn off the function of the drop-down list (custom drop-down list), I hope to help everyone, if you have any questions, please leave a message, Xiaobian will reply to everyone in time!
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment