element-ui 组件如何自定义鼠标右键事件

Question

代码如下 如何实现右键点击 tab-pane 相应 rightClick 事件

<el-tabs v-model="editableTabsValue" type="card" editable>
  <el-tab-pane
    :key="item.name"
    v-for="(item, index) in editableTabs"
    :label="item.title"
    :name="item.name"
    @click.right = "rightClick"
  >
    {{item.content}}
  </el-tab-pane>
</el-tabs>
<script>
  export default {
    data() {
      return {
        editableTabsValue: '2',
        editableTabs: [{
          title: 'Tab 1',
          name: '1',
          content: 'Tab 1 content'
        }, {
          title: 'Tab 2',
          name: '2',
          content: 'Tab 2 content'
        }],
        tabIndex: 2
      }
    },
    methods: {
        //右键事件 目前无效
        rightClick(){
            console.log('右键被点击了')
        }
    }
  }
</script>

Answer 1

el-tab-pane从名字就可以看出来，这是tabs的面板部分，就是下面的写了item.content的地方，你在这里右键是可以触发事件的。而上面的是tab-nav，这部分的事件对外暴漏在Tabs Events中。

tabs有一个slot叫label，这个就是你要的nav部分，你可以把事件绑定在这里

<el-tab-pane label="用户管理" name="first" >
  <span slot="label" @click.right="handClickRight"><i class="el-icon-date"></i> 用户管理</span>
</el-tab-pane>