VUE如何实现给几个按钮绑定相同的右键弹出菜单，但是在右键菜单中能识别出当前右键所点击的按钮？

Question

1、现在项目遇到这样一个问题，设备上的单盘用按钮来展示，然后每个按钮都有右键菜单，需要给不同的单盘使用右键弹出菜单的时候选择配置之类的，这时就需要识别出当前的单盘类型，以便弹出不同的弹框。

<v-contextmenu ref='contextmenu' :theme='theme'>
  <v-contextmenu-item v-on:click='setClick()'>板卡配置</v-contextmenu-item>
  <v-contextmenu-item v-on:click='getClick()'>查看明细</v-contextmenu-item>
</v-contextmenu>

<el-row style='margin-top: 10px'>
  <el-col :span='1'>
    <div class='mainSubrack-front-view-css'>正面视图</div>
  </el-col>
  <el-col :span='21'>
    <div>
      <el-button v-contextmenu:contextmenu :key="index" class='slotCss3' v-for='(card, index) in cards'
                 v-if='index >15 && index <22'>
        <template v-if='card.flag'>
          <span>{{index + 1}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span v-for='aaa in card.name'>{{aaa}}</span>
        </template>
        <template v-if='!card.flag'>
          <span>{{index + 1}}</span>
        </template>
      </el-button>
    </div>
    <div style='margin-bottom: 2px'>
      <el-button v-contextmenu:contextmenu :key="index" class='slotCss2' v-for='(card, index) in cards'
                 v-if='index >= 14 && index <= 15'>
        <template v-if='card.flag'>
          <span>{{index + 1}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span v-for='aaa in card.name'>{{aaa}}</span>
        </template>
        <template v-if='!card.flag'>
          <span>{{index + 1}}</span>
        </template>
      </el-button>
    </div>
  </el-col>
  <el-col :span='1'>
    <el-button v-contextmenu:contextmenu :key="index" v-for='(card, index) in cards'
               class="mainSubrack-card-slot-23-css" v-if='index === 22'>
      {{index + 1}}
      <br/><br/><br/>
      <template v-if='card.flag'>
        <div v-for="aaa in card.name">
          {{ aaa }}<br/><br/>
        </div>
      </template>
      <template v-else>
        <div v-for="aaa in card.name">
          <br/>
        </div>
      </template>
      <br/><br/><br/><br/><br/><br/>
    </el-button>
  </el-col>
</el-row>

<el-row>
  <el-col :span='1'>
    <div class='mainSubrack-back-view-css'>背面视图</div>
  </el-col>
  <el-col :span='23'>
    <div style='margin-top: 40px'>
      <el-button v-contextmenu:contextmenu :key="index" class='mainSubrack-back-view-1-14-css'
                 v-for='(card, index) in cards' v-if='index < 14'>
        {{index + 1}}<br/><br/>
        <template v-if='card.flag'>
          <div v-for='aaa in card.name'>{{aaa}}</div>
        </template>
        <template v-else>
          <div v-for='aaa in card.name'><br/></div>
        </template>
        <br/><br/><br/><br/><br/><br/><br/>
      </el-button>
    </div>
  </el-col>
</el-row>
<!-- 弹窗-->
<div>
  <mcpCardConfig v-if="cardConfigVisiable[0].mcp" ref="mcpCardConfig"></mcpCardConfig>
  <mcpCardDetail v-if="cardDetailVisiable[0].mcp" ref="mcpCardDetail"></mcpCardDetail>
  <rbCardConfig v-if="cardConfigVisiable[1].rb" ref="rbCardConfig"></rbCardConfig>
  <rbCardDetail v-if="cardDetailVisiable[1].rb" ref="rbCardDetail"></rbCardDetail>
</div>

3、

4、如上图所示，不同的单盘类型在点击右键选择配置或查看的时候能识别出当前的按钮的一些属性（比如MCP、RB之类的）

Answer 1

方法很多, 具体根据需求来

1. 几个按钮加载的顺序是一样的 绑定事件时候传入$index索引, 通过索引去做判断
2. 直接传入名称做判断,如截图上的RB、MCP等等

Answer 2

打印下$event.target就清楚了，

$event.target.innerText可以取到按钮的值

Answer 3

我这个代码可以实现你的功能，但是我不知道selectedTag怎么传进去的，如果你知道可以回复下