mirror of https://github.com/ElemeFE/element
* add support of tab penl lazy render * add docs * fix test * Tabs: update tab-pane.d.ts * Docs: update Tabs docspull/11323/head
parent
1fe51c9295
commit
49473ffafc
|
@ -393,3 +393,4 @@ Only card type Tabs support addable & closeable.
|
|||
| disabled | whether Tab is disabled | boolean | — | false |
|
||||
| name | identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane | string | — | ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '1' |
|
||||
| closable | whether Tab is closable | boolean | — | false |
|
||||
| lazy | whether Tab is lazy to render | boolean | — | false |
|
|
@ -393,3 +393,4 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre.
|
|||
| disabled | si la Tabulación está deshabilitada | boolean | — | false |
|
||||
| name | identificador correspondiente al activeName de la Tabulación, representando el alias del tab-pane | string | — | número ordinal del tab-pane en la secuencia, p.ej el primer tab-pane de pestañas es '1' |
|
||||
| closable | si el Tab es cerrable | boolean | — | false |
|
||||
| lazy | whether Tab is lazy to render | boolean | — | false |
|
||||
|
|
|
@ -391,3 +391,4 @@
|
|||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| name | 与选项卡 activeName 对应的标识符,表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值,如第一个选项卡则为'1' |
|
||||
| closable | 标签是否可关闭 | boolean | — | false |
|
||||
| lazy | 标签是否延迟渲染 | boolean | — | false |
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div
|
||||
class="el-tab-pane"
|
||||
v-if="!lazy || active"
|
||||
v-show="active"
|
||||
role="tabpanel"
|
||||
:aria-hidden="!active"
|
||||
|
@ -21,7 +22,8 @@
|
|||
labelContent: Function,
|
||||
name: String,
|
||||
closable: Boolean,
|
||||
disabled: Boolean
|
||||
disabled: Boolean,
|
||||
lazy: Boolean
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
|
@ -471,6 +471,36 @@ describe('Tabs', () => {
|
|||
});
|
||||
}, 100);
|
||||
});
|
||||
it('should work with lazy', done => {
|
||||
vm = createVue({
|
||||
template: `
|
||||
<el-tabs ref="tabs">
|
||||
<el-tab-pane label="用户管理" name="A">A</el-tab-pane>
|
||||
<el-tab-pane label="配置管理" name="B">B</el-tab-pane>
|
||||
<el-tab-pane label="角色管理" name="C">C</el-tab-pane>
|
||||
<el-tab-pane label="定时任务补偿" lazy name="D">D</el-tab-pane>
|
||||
</el-tabs>
|
||||
`
|
||||
}, true);
|
||||
|
||||
expect(vm.$el.querySelector('.el-tabs__content').children.length).to.be.equal(3);
|
||||
expect(vm.$el.querySelector('.el-tabs__content > #pane-D')).to.be.equal(null);
|
||||
|
||||
setTimeout(_ => {
|
||||
vm.$el.querySelector('.el-tabs__nav > #tab-D').click();
|
||||
vm.$nextTick(() => {
|
||||
expect(vm.$el.querySelector('.el-tabs__content').children.length).to.be.equal(4);
|
||||
expect(vm.$el.querySelector('.el-tabs__content > #pane-D')).not.to.be.equal(null);
|
||||
|
||||
vm.$el.querySelector('.el-tabs__nav > #tab-A').click();
|
||||
vm.$nextTick(() => {
|
||||
expect(vm.$el.querySelector('.el-tabs__content').children.length).to.be.equal(3);
|
||||
expect(vm.$el.querySelector('.el-tabs__content > #pane-D')).to.be.equal(null);
|
||||
done();
|
||||
});
|
||||
});
|
||||
}, 100);
|
||||
});
|
||||
it('before leave', done => {
|
||||
vm = createVue({
|
||||
template: `
|
||||
|
|
|
@ -13,4 +13,7 @@ export declare class ElTabPane extends ElementUIComponent {
|
|||
|
||||
/** Whether Tab is closable */
|
||||
closable: boolean
|
||||
|
||||
/** Whether Tab is lazy to render */
|
||||
lazy: boolean
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue