mirror of https://github.com/ElemeFE/element
change tabs box-model to 'block' & remove 'label-content' property (#2064)
baiyaaaaa
cinwell.li
parent
d896c83860
commit
cf028a42f4
|
|
@ -22,9 +22,6 @@
|
|||
},
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
},
|
||||
renderTab(h, tab) {
|
||||
return <span><i class="el-icon-date"></i> {tab.label}</span>;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -148,25 +145,19 @@ Border card tabs.
|
|||
|
||||
### Custom Tab
|
||||
|
||||
You can use `label-content` property to customize the tab
|
||||
You can use named slot to customize the tab label content.
|
||||
|
||||
:::demo `label-content` is a render function,which return the vnode of the tab.
|
||||
:::demo
|
||||
```html
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="Route" :label-content="renderTab">Route</el-tab-pane>
|
||||
<el-tab-pane>
|
||||
<span slot="label"><i class="el-icon-date"></i> Route</span>
|
||||
Route
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Config">Config</el-tab-pane>
|
||||
<el-tab-pane label="Role">Role</el-tab-pane>
|
||||
<el-tab-pane label="Task">Task</el-tab-pane>
|
||||
</el-tabs>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
renderTab(h, tab) {
|
||||
return <span><i class="el-icon-date"></i> {tab.label}</span>;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -188,7 +179,6 @@ You can use `label-content` property to customize the tab
|
|||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| label | title of the tab | string | — | — |
|
||||
| label-content | render function for tab title | Function(h, tab:vueInstance) | - | - |
|
||||
| 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, i.e. the first tab-pane is '1' |
|
||||
| closable | whether Tab is closable | boolean | — | false |
|
||||
|
|
|
|||
|
|
@ -22,9 +22,6 @@
|
|||
},
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
},
|
||||
renderTab(h, tab) {
|
||||
return <span><i class="el-icon-date"></i> {tab.label}</span>;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -145,25 +142,19 @@
|
|||
|
||||
### 自定义标签页
|
||||
|
||||
可以通过 `label-content` 属性来实现自定义标签页的内容
|
||||
可以通过具名 `slot` 来实现自定义标签页的内容
|
||||
|
||||
:::demo `label-content` 是一个 render function，在这个方法里返回的 vnode 会被渲染到标签页中。
|
||||
:::demo
|
||||
```html
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="我的行程" :label-content="renderTab">我的行程</el-tab-pane>
|
||||
<el-tab-pane>
|
||||
<span slot="label"><i class="el-icon-date"></i> 我的行程</span>
|
||||
我的行程
|
||||
</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-tabs>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
renderTab(h, tab) {
|
||||
return <span><i class="el-icon-date"></i> {tab.label}</span>;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -200,7 +191,6 @@
|
|||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| label | 选项卡标题 | string | — | — |
|
||||
| label-content | 选项卡的标题的渲染 Function | Function(h, tab:vueInstance) | - | - |
|
||||
| disabled | 是否禁用 | boolean | - | false |
|
||||
| name | 与选项卡 activeName 对应的标识符，表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1' |
|
||||
| closable | 标签是否可关闭 | boolean | — | false |
|
||||
|
|
|
|||
|
|
@ -112,9 +112,7 @@
|
|||
? <span class="el-icon-close" on-click={(ev) => { handleTabRemove(tab, ev); }}></span>
|
||||
: null;
|
||||
|
||||
const tabLabelContent = tab.labelContent
|
||||
? tab.labelContent.call(this._renderProxy, h, tab)
|
||||
: tab.label;
|
||||
const tabLabelContent = tab.$slots.label || tab.label;
|
||||
|
||||
return (
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -3,8 +3,6 @@
|
|||
|
||||
@component-namespace el {
|
||||
@b tabs {
|
||||
display: inline-block;
|
||||
|
||||
@e header {
|
||||
border-bottom: 1px solid #d3dce6;
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -220,27 +220,6 @@ describe('Tabs', () => {
|
|||
});
|
||||
});
|
||||
});
|
||||
it('tab title render function', done => {
|
||||
vm = createVue({
|
||||
template: `
|
||||
<el-tabs ref="tabs" >
|
||||
<el-tab-pane :label-content="renderTitle">A</el-tab-pane>
|
||||
<el-tab-pane label="配置管理">B</el-tab-pane>
|
||||
<el-tab-pane label="角色管理" ref="pane-click">C</el-tab-pane>
|
||||
<el-tab-pane label="定时任务补偿">D</el-tab-pane>
|
||||
</el-tabs>
|
||||
`,
|
||||
methods: {
|
||||
renderTitle(h) {
|
||||
return <span>用户管理</span>;
|
||||
}
|
||||
}
|
||||
}, true);
|
||||
vm.$nextTick(_ => {
|
||||
expect(vm.$el.querySelector('.el-tabs__item span').innerText).to.equal('用户管理');
|
||||
done();
|
||||
});
|
||||
});
|
||||
it('disabled', done => {
|
||||
vm = createVue({
|
||||
template: `
|
||||
|
|
|
|||
Loading…
Reference in New Issue