<template>
    <div class="ht-base-tabs-right-menu-demo">
      <ht-base-tabs type="card" @on-contextmenu="handleContextMenu">
        <ht-base-tab-pane label="标签一" name="tab1" context-menu>标签一的内容</ht-base-tab-pane>
        <ht-base-tab-pane label="标签二" name="tab2" context-menu>标签二的内容</ht-base-tab-pane>
        <ht-base-tab-pane label="标签三" name="tab3" context-menu>标签三的内容</ht-base-tab-pane>
        <template slot="contextMenu">
            <ht-base-dropdown-item @click.native="handleContextMenuEdit">编辑</ht-base-dropdown-item>
            <ht-base-dropdown-item @click.native="handleContextMenuDelete" style="color: #ed4014">删除</ht-base-dropdown-item>
        </template>
    </ht-base-tabs>
    </div>
</template>

<script>
  export default {
    name: 'HtBaseTabsRightMenuDemo',
    data(){
      return{
        contextData: null
      }
    },
    methods:{
      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);
      }
    }
  }
</script>
<style lang="less">
    .ht-base-tabs-right-menu-demo {

    }
</style>

