fixed #206

fixed #206

fixed #206
梁灏
1 parent d0788ae9
Showing 3 changed files with 25 additions and 14 deletions Show diff stats
src/components/tabs/pane.vue
src/components/tabs/tabs.vue
test/routers/tabs.vue
@@ -20,6 +20,10 @@
             disabled: {
                 type: Boolean,
                 default: false
+            },
+            closable: {
+                type: Boolean,
+                default: null
             }
         },
         data () {
@@ -9,7 +9,7 @@
                             <div :class="tabCls(item)" v-for="item in navList" @click="handleChange($index)">
                                 <Icon v-if="item.icon !== ''" :type="item.icon"></Icon>
                                 {{ item.label }}
-                                <Icon v-if="closable && type === 'card'" type="ios-close-empty" @click.stop="handleRemove($index)"></Icon>
+                                <Icon v-if="showClose(item)" type="ios-close-empty" @click.stop="handleRemove($index)"></Icon>
                             </div>
                         </div>
                     </div>
@@ -125,7 +125,8 @@
                         label: pane.label,
                         icon: pane.icon || '',
                         key: pane.key || index,
-                        disabled: pane.disabled
+                        disabled: pane.disabled,
+                        closable: pane.closable
                     });
                     if (!pane.key) pane.key = index;
                     if (index === 0) {
@@ -199,6 +200,17 @@
                 }
                 this.$emit('on-tab-remove', tab.key);
                 this.updateNav();
+            },
+            showClose (item) {
+                if (this.type === 'card') {
+                    if (item.closable !== null) {
+                        return item.closable;
+                    } else {
+                        return this.closable;
+                    }
+                } else {
+                    return false;
+                }
             }
         },
         watch: {
 <template>
-    <Tabs :active-key.sync="activeKey" :animated="true">
+    <Tabs active-key="key1">
         <Tab-pane label="标签一" key="key1">标签一的内容</Tab-pane>
         <Tab-pane label="标签二" key="key2">标签二的内容</Tab-pane>
         <Tab-pane label="标签三" key="key3">标签三的内容</Tab-pane>
     </Tabs>
-    <i-button @click="change">change</i-button>
+    <Tabs type="card" >
+        <Tab-pane label="标签一">标签一的内容</Tab-pane>
+        <Tab-pane label="标签二" :closable="true">标签二的内容</Tab-pane>
+        <Tab-pane label="标签三">标签三的内容</Tab-pane>
+    </Tabs>
 </template>
 <script>
     export default {
-        data () {
-            return {
-                activeKey: 'key2'
-            }
-        },
-        methods: {
-            change () {
-                this.activeKey = 'key1';
-            }
-        }
+
     }
 </script>