iview/examples/routers/tabs.vue

32 lines
1.1 KiB
Vue
Raw Normal View History

2019-08-27 09:42:40 +08:00
<template>
2020-07-02 09:44:45 +08:00
<Tabs type="card" @on-contextmenu="handleContextMenu">
<TabPane label="标签一" name="tab1" context-menu>标签一的内容</TabPane>
<TabPane label="标签二" name="tab2">标签二的内容</TabPane>
<TabPane label="标签三" name="tab3" context-menu>标签三的内容</TabPane>
<template slot="contextMenu">
<DropdownItem @click.native="handleContextMenuEdit">编辑</DropdownItem>
<DropdownItem @click.native="handleContextMenuDelete" style="color: #ed4014">删除</DropdownItem>
</template>
</Tabs>
2019-08-27 09:42:40 +08:00
</template>
<script>
export default {
data () {
return {
2020-07-02 09:44:45 +08:00
contextData: null
}
},
methods: {
2020-07-02 09:44:45 +08:00
handleContextMenu (data) {
this.contextData = data;
},
handleContextMenuEdit () {
this.$Message.info('Click edit of ' + this.contextData.name);
},
handleContextMenuDelete () {
this.$Message.info('Click delete of ' + this.contextData.name);
2019-08-27 09:42:40 +08:00
}
}
}
</script>