Yo soy la codificación de un simple menú de contexto en vue.js. Cuando me haga un clic derecho en un peculiar elemento, se abre el menú (con @contextmenu.prevenir).Esto funciona.

Pero cuando hago clic fuera del menú, yo quiero que desaparezca. Esto no funciona… estoy usando v-en:desenfoque para esto, también trató de @desenfoque . Ninguno de ellos no funciona. Aquí está mi código html :

<!-- my context menu -->
<ul class="context-menu"
    ref="contextMenuTrack"
    v-if="openedMenu === 'contextMenuTrack'"
    v-bind:style="{top: top, left: left}"
    v-on:blur="closeMenu()">
    <li v-on:click="removeTrack(project.structure.tracks.indexOf(targetOfMenu));closeMenu()">delete track</li>
</ul>
<div>

    [ ...... stuff here ......]

    <!-- Where the menu is called-->
    <li class="track"
         v-for="track in project.structure.tracks">
        <div class="track-name-row">
            <li @contextmenu.prevent="openContextMenuTrack(track,$event)"
                v-on:click="expandTrack(project.structure.tracks.indexOf(track))"
                class="track-color-viewer"></li>

                [ .... other li tags .....]
        </div>
    </li>

    [ ...... stuff here ......]

</div>

Aquí es que los datos utilizados para el menú de mi Vue componente:

data() {
    return {
        //the kind of menu which is opened
        openedMenu: undefined,
        //the coordinate of the menu
        top: "0px",
        left: "0px",
        //the element which is targeted by the menu
        targetOfMenu: undefined
    };
},

Y aquí están los métodos utilizados para el menú en mi Vue.js componente :

 methods: {

    setMenu(top, left) {
        this.top = top - 170 + "px";
        this.left = left + "px";
    },

    //opening menu : calling set menu whith x and y
    openContextMenuTrack(track, event) {
        this.openedMenu = "contextMenuTrack";
        this.targetOfMenu = track;

        this.$nextTick((() => {
            this.$refs.contextMenuTrack.focus();
            this.setMenu(event.y, event.x);
        }).bind(this));
    },

    closeMenu() {
        this.openedMenu = undefined;
        this.targetOfMenu = undefined;
    }
}

3 Comentarios

  1. 6

    la blur caso sólo existe para los controles de formulario (<input> etc.).

    Su problema generalmente se resuelve mediante la creación de una costumbre de la directiva que se ejecuta un método cuando haga clic fuera del menú.

    Algo como esto:

    https://www.npmjs.com/package/v-click-outside

    <ul class="context-menu"
        ref="contextMenuTrack"
        v-if="openedMenu === 'contextMenuTrack'"
        v-bind:style="{top: top, left: left}"
    
        v-click-outside="closeMenu()">
    
        <li v-on:click="removeTrack(project.structure.tracks.indexOf(targetOfMenu));closeMenu()">delete track</li>
    </ul>

    Espero que esto ayude

    Edición:

    Un ejemplo con un mejor paquete (vue-clickaway):

    https://jsfiddle.net/Linusborg/hqkgp4hm/

    • Muchas gracias. Voy a chequear v-haga clic en el exterior, si funciona voy a validar tu respuesta 🙂
    • no funcionó muy bien. De hecho, cuando estoy al hacer clic fuera del elemento, el menú se cierra. Pero cuando hago clic en una opción del menú, el menú se cierra sin hacer la acción vinculada a esta opción. Algún consejo?
    • He añadido un ejemplo con un mejor paquete a mi respuesta anterior
  2. 2

    Esto sería de ayuda si usted está buscando para unrecommended manera 😉 $refs sería complicado tener el mismo resultado.

    let x = document.querySelector('.targetClass).addEventListener('click', (e) => 
    {
      if(e.target.className == 'targetClass') {
        this.close()
      }
     })
  3. 0

    Yo solo hice esto en un proyecto:

      created: function() {
        let self = this;
        window.addEventListener("click", function(e) {
          if (self.$el.querySelector('.targetClass') && !self.$el.querySelector('.targetClass').contains(e.target)) {
            this.close()
          }
        });
      },
      destroyed: function(){
        let self = this;
        window.removeEventListener("click", function(e) {
          if (self.$el.querySelector('.targetClass') && !self.$el.querySelector('.targetClass').contains(e.target)) {
            this.close()
          }
        });
      },

Dejar respuesta

Please enter your comment!
Please enter your name here