From 28aeeeb0cfa20e77a125ad707a03bb280f9f1a33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=A4=E6=B5=B7=E9=B9=8F10210844?= Date: Tue, 25 Dec 2018 17:39:06 +0800 Subject: [PATCH] =?UTF-8?q?[=E4=BC=98=E5=8C=96]=20=E4=BC=98=E5=8C=96tab?= =?UTF-8?q?=E5=9C=A8ie=E4=B8=8B=E5=88=87=E6=8D=A2=E5=8D=A1=E9=A1=BF?= =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98=EF=BC=8Cfixes=20#843?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: Ie68e200b36c0f609118c997370a990b67a41aa3c --- src/app/demo/tab/demo-set.module.ts | 7 +- .../tab/with-table-in-ie/demo.component.html | 32 +++++++ .../tab/with-table-in-ie/demo.component.ts | 95 +++++++++++++++++++ .../demo/tab/with-table-in-ie/demo.module.ts | 16 ++++ src/jigsaw/component/tabs/tab.scss | 5 +- src/jigsaw/component/tabs/tab.ts | 12 ++- 6 files changed, 163 insertions(+), 4 deletions(-) create mode 100644 src/app/demo/tab/with-table-in-ie/demo.component.html create mode 100644 src/app/demo/tab/with-table-in-ie/demo.component.ts create mode 100644 src/app/demo/tab/with-table-in-ie/demo.module.ts diff --git a/src/app/demo/tab/demo-set.module.ts b/src/app/demo/tab/demo-set.module.ts index e1bb10ad05..6f433c4b55 100644 --- a/src/app/demo/tab/demo-set.module.ts +++ b/src/app/demo/tab/demo-set.module.ts @@ -23,6 +23,8 @@ import {TabsUpdateTitleDemoComponent} from "./update-title/demo.component"; import {TabsUpdateTitleDemoModule} from "./update-title/demo.module"; import {TabsEditableDemoComponent} from "./editable/demo.component"; import {TabsEditableDemoModule} from "./editable/demo.module"; +import {TabsWithTableInIEComponent} from "./with-table-in-ie/demo.component"; +import {TabsWithTableInIEDemoModule} from "./with-table-in-ie/demo.module"; export const routerConfig = [ { @@ -57,6 +59,9 @@ export const routerConfig = [ { path: 'editable', component: TabsEditableDemoComponent }, + { + path: 'with-table-in-ie', component: TabsWithTableInIEComponent + }, ]; @NgModule({ @@ -64,7 +69,7 @@ export const routerConfig = [ RouterModule.forChild(routerConfig), TabsBasicDemoModule, TabsDestroyDemoModule, TabsHideTabDemoModule, TabsShowTabDemoModule, DynamicTabDemoModule, TabsWithInputDemoModule, TabsWithNgForDemoModule, TabsUpdateTitleDemoModule, - TabsEditableDemoModule + TabsEditableDemoModule, TabsWithTableInIEDemoModule ], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) diff --git a/src/app/demo/tab/with-table-in-ie/demo.component.html b/src/app/demo/tab/with-table-in-ie/demo.component.html new file mode 100644 index 0000000000..3bdd84f4bd --- /dev/null +++ b/src/app/demo/tab/with-table-in-ie/demo.component.html @@ -0,0 +1,32 @@ + + + + + + +
+ + +
{{tabData}}
+ + + + + + +
+ + diff --git a/src/app/demo/tab/with-table-in-ie/demo.component.ts b/src/app/demo/tab/with-table-in-ie/demo.component.ts new file mode 100644 index 0000000000..5d823cecaa --- /dev/null +++ b/src/app/demo/tab/with-table-in-ie/demo.component.ts @@ -0,0 +1,95 @@ +import {Component, Input, OnInit} from '@angular/core'; +import {LocalPageableTableData, PageableTableData, TableData} from "../../../../jigsaw/core/data/table-data"; +import {HttpClient} from "@angular/common/http"; + +@Component({ + templateUrl: "./demo.component.html" +}) +export class TabsWithTableInIEComponent implements OnInit { + tabDatas: Array; + + ngOnInit() { + this.tabDatas = ["Tab1", "Tab2", "Tab3", "Tab4"] + } + + testEvent() { + console.info("tab页点击"); + } + + pageable: PageableTableData | LocalPageableTableData; + + constructor(http: HttpClient) { + this.pageable = new LocalPageableTableData(); + this.pageable.http = http; + this.pageable.dataReviser = data => { + const dataTemp = { + header: data.header.concat(), + field: data.field.concat(), + data: data.data.concat().map(row => {return row.concat()}), + paging: data.paging + }; + for(let i = 0; i < 3; i++) { + dataTemp.header.push(...data.header); + dataTemp.field.push(...data.field); + dataTemp.data.forEach((row, i) => row.push(...data.data[i])); + } + console.log(data, dataTemp); + return dataTemp; + }; + this.pageable.pagingInfo.pageSize = 20; + this.pageable.fromAjax('mock-data/hr-list'); + } + + + + // ==================================================================== + // ignore the following lines, they are not important to this demo + // ==================================================================== + summary: string = ''; + description: string = ''; + tags: string[] = [ + 'JigsawTab', + ]; +} + +@Component({ + selector: 'table-content', + template: ` + {{tabData}} Content + + + ` +}) +export class TableContent { + @Input() + tabData: string; + + pageable: PageableTableData | LocalPageableTableData; + + constructor(http: HttpClient) { + this.pageable = new LocalPageableTableData(); + this.pageable.http = http; + this.pageable.dataReviser = data => { + const dataTemp = { + header: data.header.concat(), + field: data.field.concat(), + data: data.data.concat().map(row => {return row.concat()}), + paging: data.paging + }; + for(let i = 0; i < 3; i++) { + dataTemp.header.push(...data.header); + dataTemp.field.push(...data.field); + dataTemp.data.forEach((row, i) => row.push(...data.data[i])); + } + console.log(data, dataTemp); + return dataTemp; + }; + this.pageable.pagingInfo.pageSize = 20; + this.pageable.fromAjax('mock-data/hr-list'); + } +} diff --git a/src/app/demo/tab/with-table-in-ie/demo.module.ts b/src/app/demo/tab/with-table-in-ie/demo.module.ts new file mode 100644 index 0000000000..95bff31435 --- /dev/null +++ b/src/app/demo/tab/with-table-in-ie/demo.module.ts @@ -0,0 +1,16 @@ +import {NgModule} from '@angular/core'; +import {CommonModule} from "@angular/common"; +import {JigsawTabsModule} from "jigsaw/component/tabs/index"; +import {TabsWithTableInIEComponent, TableContent} from './demo.component'; +import {JigsawDemoDescriptionModule} from "app/demo-description/demo-description"; +import {JigsawTableModule} from "../../../../jigsaw/component/table/table"; +import {JigsawPaginationModule} from "../../../../jigsaw/component/pagination/pagination"; + +@NgModule({ + imports: [CommonModule, JigsawTabsModule, JigsawDemoDescriptionModule, JigsawTableModule, JigsawPaginationModule], + declarations: [TabsWithTableInIEComponent, TableContent], + exports: [TabsWithTableInIEComponent], + entryComponents: [TableContent] +}) +export class TabsWithTableInIEDemoModule { +} diff --git a/src/jigsaw/component/tabs/tab.scss b/src/jigsaw/component/tabs/tab.scss index 2201f3a44b..9a76f4c605 100644 --- a/src/jigsaw/component/tabs/tab.scss +++ b/src/jigsaw/component/tabs/tab.scss @@ -179,7 +179,6 @@ $tab-prefix: #{$jigsaw-prefix}-tabs; .#{$tab-prefix}-tabpane { display: block; - flex-shrink: 0; width: 100%; height: 100%; transition: transform 0.5s; @@ -196,4 +195,8 @@ $tab-prefix: #{$jigsaw-prefix}-tabs; } } } + + &-in-ie &-content &-tabpane, &-in-ie &-nav-container &-ink-bar { + transition: null; + } } diff --git a/src/jigsaw/component/tabs/tab.ts b/src/jigsaw/component/tabs/tab.ts index 9e37bea4c3..722491fb8f 100644 --- a/src/jigsaw/component/tabs/tab.ts +++ b/src/jigsaw/component/tabs/tab.ts @@ -23,6 +23,7 @@ import {JigsawTabContent, JigsawTabLabel, TabTitleInfo} from "./tab-item"; import {AbstractJigsawComponent, IDynamicInstantiatable} from "../common"; import {PopupService, PopupSize, PopupInfo, PopupPositionValue} from "../../service/popup.service"; import {Subscription} from "rxjs/Subscription"; +import {CommonUtils} from "../../core/utils/common-utils"; /** * 使用`JigsawTab`来将一组视图叠加在同一个区域使用，并以页签的方式来切换这些视图。 @@ -41,6 +42,7 @@ import {Subscription} from "rxjs/Subscription"; templateUrl: 'tab.html', host: { '[class.jigsaw-tabs-host]': 'true', + '[class.jigsaw-tabs-in-ie]': '_$isIE', '[style.width]': 'width', '[style.height]': 'height' } @@ -53,8 +55,14 @@ export class JigsawTab extends AbstractJigsawComponent implements AfterViewInit, private _elementRef: ElementRef, private _popupService: PopupService) { super(); + this._$isIE = CommonUtils.isIE(); } + /** + * @internal + */ + public _$isIE: boolean; + /** * @internal */ @@ -282,12 +290,12 @@ export class JigsawTab extends AbstractJigsawComponent implements AfterViewInit, const tabElem = this._tabsInkBar.nativeElement; if (tabElem.offsetWidth != labelPos.width) { - this._asyncSetStyle(this.selectedIndex); + this._setInkBarStyle(this.selectedIndex); } else { const match = (tabElem.style.transform + '').match(/\btranslate3d\s*\((\d+)px\s*,/); const offset = match ? match[1] : -1; if (offset != labelPos.offSet + this._tabLeftMap.get(this.selectedIndex)) { - this._asyncSetStyle(this.selectedIndex); + this._setInkBarStyle(this.selectedIndex); } } }