fixed tab bug

pull/2/head
baiyaaaaa 2016-08-22 12:42:47 +08:00
parent a90e1769d0
commit 0092a38419
3 changed files with 25 additions and 7 deletions

View File

@ -18,6 +18,14 @@
activeName: '3', activeName: '3',
activeName2: '' activeName2: ''
} }
},
methods: {
handleRemove(tab) {
console.log(tab);
},
handleClick(tab) {
console.log(tab);
}
} }
} }
</script> </script>
@ -70,7 +78,7 @@
## 可关闭的标签 ## 可关闭的标签
<div> <div>
<el-tabs type="card" :closable="true"> <el-tabs type="card" :closable="true" :on-remove="handleRemove" :on-click="handleClick">
<el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane> <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
<el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane> <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
<el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane> <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
@ -80,7 +88,7 @@
{{activeName2}} {{activeName2}}
```html ```html
<el-tabs type="card" :closable="true"> <el-tabs type="card" :closable="true" :on-remove="handleRemove" :on-click="handleClick">
<el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane> <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
<el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane> <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
<el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane> <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>

View File

@ -24,7 +24,7 @@
<span <span
class="el-icon-close" class="el-icon-close"
v-if="closable" v-if="closable"
@click="$emit('onremove', tab, $event)"> @click="$emit('remove', tab, $event)">
</span> </span>
</div> </div>
</template> </template>

View File

@ -1,6 +1,8 @@
<script> <script>
import ElTab from './tab'; import ElTab from './tab';
function noop() {}
module.exports = { module.exports = {
name: 'el-tabs', name: 'el-tabs',
@ -14,6 +16,14 @@
defaultActiveName: String, defaultActiveName: String,
activeName: String, activeName: String,
closable: false, closable: false,
onRemove: {
type: Function,
default: noop
},
onClick: {
type: Function,
default: noop
},
tabWidth: 0 tabWidth: 0
}, },
@ -41,7 +51,7 @@
}, },
methods: { methods: {
removeTab(tab, ev) { handleTabRemove(tab, ev) {
ev.stopPropagation(); ev.stopPropagation();
tab.$destroy(true); tab.$destroy(true);
@ -58,11 +68,11 @@
this.currentName = nextChild ? nextChild.key : prevChild ? prevChild.key : '-1'; this.currentName = nextChild ? nextChild.key : prevChild ? prevChild.key : '-1';
} }
this.$emit('tab.remove', tab); this.onRemove(tab.key);
}, },
handleTabClick(tab) { handleTabClick(tab) {
this.currentName = tab.key; this.currentName = tab.key;
this.$emit('tab.click', tab); this.onClick(tab.key);
}, },
calcBarStyle() { calcBarStyle() {
if (this.type) return {}; if (this.type) return {};
@ -106,7 +116,7 @@
ref="tabs" ref="tabs"
:tab="tab" :tab="tab"
:closable="closable" :closable="closable"
@onremove="removeTab" @remove="handleTabRemove"
@click.native="handleTabClick(tab)"> @click.native="handleTabClick(tab)">
</el-tab> </el-tab>
<div <div