update Tabs

examples/routers/tabs.vue

@@ -1,21 +1,30 @@
 <template>
-    <div style="height: 5000px">
-        <Tabs type="card">
-            <TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</TabPane>
-            <Button @click="handleTabsAdd" size="small" slot="extra">增加</Button>
+    <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>
-    </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                tabs: 20
+                contextData: null
             }
         },
         methods: {
-            handleTabsAdd () {
-                this.tabs ++;
+            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);
             }
         }
     }

src/components/tabs/tabs.vue

@@ -15,7 +15,7 @@
                     <div ref="navScroll" :class="[prefixCls + '-nav-scroll']" @DOMMouseScroll="handleScroll" @mousewheel="handleScroll">
                         <div ref="nav" :class="[prefixCls + '-nav']" :style="navStyle">
                             <div :class="barClasses" :style="barStyle"></div>
-                            <div :class="tabCls(item)" v-for="(item, index) in navList" @click="handleChange(index)" @dblclick="handleDblclick(index)" @contextmenu.stop="handleContextmenu(index, $event)">
+                            <div :class="tabCls(item)" v-for="(item, index) in navList" @click="handleChange(index)" @dblclick="handleDblclick(index)" @contextmenu.stop="handleContextmenu(index, $event)" @selectstart.stop="handlePreventSelect(index, $event)">
                                 <Icon v-if="item.icon !== ''" :type="item.icon"></Icon>
                                 <Render v-if="item.labelType === 'function'" :render="item.label"></Render>
                                 <template v-else>{{ item.label }}</template>
@@ -333,6 +333,13 @@
             handleClickContextMenuOutside () {
                 this.contextMenuVisible = false;
             },
+            // 禁用右键选择文本
+            handlePreventSelect (index, event) {
+                const nav = this.navList[index];
+                if (!nav || nav.disabled || !nav.contextMenu) return;
+
+                event.preventDefault();
+            },
             handleTabKeyNavigation(e){
                 if (e.keyCode !== 37 && e.keyCode !== 39) return;
                 const direction = e.keyCode === 39 ? 1 : -1;