mirror of https://github.com/ElemeFE/element
fixed tab bug
parent
a90e1769d0
commit
0092a38419
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue