Determine the element under the mouse with popup-proxy



  • Hi,

    This question probably has a simple solution, but I can’t find it in the docs / Google / this forum. I’m creating a context menu and I need to determine the element under the mouse when the menu was called. Specifically, I want a right-click in a tab and move it left or right. Something like this:

    <q-tabs
      v-model="selectedTab"
      >
    
      <q-tab
        v-for="tab in tabs"
        :key="tab.name"
        :name="tab.name"
        :label="tab.label"
        >
    
        <q-popup-proxy context-menu>
    
          <q-list>
    
            <q-item
              clickable
              @click="moveRight(selectedTab)"
              >
              <q-item-section>Move right</q-item-section>
            </q-item>
    
            <q-item
              clickable
              @click="moveLeft(selectedTab)"
              >
              <q-item-section>Move left</q-item-section>
            </q-item>
    
          </q-list>
    
        </q-popup-proxy>
    
      </q-tab>
    
    </q-tabs>
    

    In the code above, the argument passed to moveRight() and moveLeft() won’t do what I need. I want it to move the tab where the context menu was called, not the currently selected tab.

    Thanks in advance.



  • @rubs You should be able to just reference the tab variable from the v-for, so like:

            <q-item
              clickable
              @click="moveRight(tab.name)"
              >
              <q-item-section>Move right</q-item-section>
            </q-item>
    

    Edit: made the example more clear



  • @rubs
    The easy way I know how to do this is by having a context menu for each tab rather then trying to detect what menu the context tab was activated on.
    https://codepen.io/turigeza/pen/yLOxbvB?editors=1010

    <!--
      Forked from:
      https://pdanpdan.github.io/quasar-docs/vue-components/tabs#Example--Basic
    -->
    <div id="q-app">
      <div class="q-pa-md">
        <div class="q-gutter-y-md" style="max-width: 600px">
          <q-tabs v-model="tab" class="text-teal">
            <q-tab v-for="tab in tabs" :key="tab.name" :name="tab.name" :icon="tab.icon" :label="tab.label">
              <q-popup-proxy context-menu>
    
                <q-list>
    
                  <q-item clickable @click="moveRight(tab)">
                    <q-item-section>Move right</q-item-section>
                  </q-item>
                  <q-item clickable @click="moveLeft(tab)">
                    <q-item-section>Move left</q-item-section>
                  </q-item>
                </q-list>
    
              </q-popup-proxy>
            </q-tab>
    
          </q-tabs>
    
        </div>
      </div>
    </div>
    
    new Vue({
      el: "#q-app",
      data() {
        return {
          tab: "mails",
          tabs: [
            { name: "mails", icon: "mail", label: "Mails" },
            { name: "alarms", icon: "alarm", label: "Alarms" },
            { name: "movies", icon: "movie", label: "Movies" },
            { name: "photos", icon: "photo", label: "Photos" },
            { name: "videos", icon: "slow_motion_video", label: "Videos" }
          ]
        };
      },
      methods: {
        moveRight(tab){
          const index = this.tabs.indexOf(tab);
          let new_index = 0;
          if(index !== this.tabs.length - 1){
            console.log('tes');
            new_index = index+1;
          }
          
          this.tabs.splice(index, 1);
          this.tabs.splice(new_index, 0, tab);
        },
        moveLeft(tab){
          const index = this.tabs.indexOf(tab);
          let new_index = this.tabs.length - 1;
          if(index !== 0){
            new_index = index-1;
          }
          
          this.tabs.splice(index, 1);
          this.tabs.splice(new_index, 0, tab);
        }
      }
    });
    
    


  • Thank you guys for the great answers. Much appreciated!


Log in to reply