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


代码如下 如何实现右键点击 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>

回答

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>

以上是 element-ui 组件如何自定义鼠标右键事件 的全部内容， 来源链接： utcz.com/a/28953.html

回到顶部