From c66bfc72b5a845621ae59b5447531b6e5aac4c21 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8D=A1=E8=89=B2?= Date: Thu, 9 Jul 2020 13:20:23 +0800 Subject: [PATCH] feat(module:tab): `icon` support valid image resoure url (#168) --- components/tab/index.md | 5 ++-- components/tab/tab.directive.ts | 10 +++++-- components/tab/tab.spec.ts | 32 ++++++++++++++++------ components/tab/tabbar.component.html | 27 ++++++------------ src/app/example/tabbar/tabbar.component.ts | 12 ++++---- 5 files changed, 49 insertions(+), 37 deletions(-) diff --git a/components/tab/index.md b/components/tab/index.md index 3728e74..2bb230d 100644 --- a/components/tab/index.md +++ b/components/tab/index.md @@ -11,8 +11,9 @@ module: TabModule ----|------|-----|------ heading | 选项卡名称 | `string` | - disabled | 是否禁用 | `boolean` | - -icon | icon图标，支持HTML | `string` | - -activeIcon | 激活时icon图标，支持HTML | `string` | - +iconClassName | Icon类名，一般用于雪碧图 | `string` | - +icon | icon图标，支持HTML、支持有效图像资源结尾的扩展名URL地址 | `string` | - +activeIcon | 激活时icon图标，支持HTML、支持有效图像资源结尾的扩展名URL地址 | `string` | - badge | 徽章内容，支持数字或圆点 | `number,'dot'` | - active | 是否激活 | `boolean` | - select | 当tab激活时触发 | `EventEmitter` | - diff --git a/components/tab/tab.directive.ts b/components/tab/tab.directive.ts index 409cb95..7f47f48 100644 --- a/components/tab/tab.directive.ts +++ b/components/tab/tab.directive.ts @@ -10,13 +10,18 @@ import { BarComponent } from './bar.component'; }, }) export class TabDirective implements OnDestroy, OnChanges { + iconUrl = false; /** 选项卡名称 */ @Input() heading: string; /** 是否禁用 */ @Input() @InputBoolean() disabled: boolean; - /** icon图标，支持HTML */ + /** + * Icon类名，一般用于雪碧图 + */ + @Input() iconClassName: string; + /** icon图标，支持HTML、支持有效图像资源结尾的扩展名URL地址 */ @Input() icon: string; - /** 激活时icon图标，支持HTML */ + /** 激活时icon图标，支持HTML、支持有效图像资源结尾的扩展名URL地址 */ @Input() activeIcon: string; /** 徽章内容，支持数字或圆点 */ @Input() badge: number | 'dot'; @@ -59,6 +64,7 @@ export class TabDirective implements OnDestroy, OnChanges { } ngOnChanges(): void { + this.iconUrl = /(webp|svg|png|gif|jpg|jpeg|jfif|bmp|dpg)$/i.test(this.icon); if (!this.activeIcon) { this.activeIcon = this.icon; } diff --git a/components/tab/tab.spec.ts b/components/tab/tab.spec.ts index 2ab9b03..b112140 100644 --- a/components/tab/tab.spec.ts +++ b/components/tab/tab.spec.ts @@ -2,18 +2,20 @@ import { Component } from '@angular/core'; import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; import { TabModule } from './tab.module'; -const TABS: any[] = [ +const TABS = [ { heading: 'tab1', content: 'tab1 content', active: true, - icon: '', + iconClassName: '', + icon: './assets/images/icon_tabbar.png', badge: 8, }, { heading: 'tab2', content: 'tab2 content', active: false, + iconClassName: '', icon: '', badge: 'dot', }, @@ -26,6 +28,7 @@ const navbar_html = ` [heading]="item.heading" [disabled]="item.disabled" [active]="item.active" + [iconClassName]="item.iconClassName" [icon]="item.icon" [badge]="item.badge" (select)="_select($event)" @@ -39,6 +42,7 @@ const tabbar_html = ` [heading]="item.heading" [disabled]="item.disabled" [active]="item.active" + [iconClassName]="item.iconClassName" [icon]="item.icon" [badge]="item.badge" (select)="_select($event)" @@ -51,8 +55,8 @@ function getItems(nativeEl: HTMLElement): NodeListOf { return nativeEl.querySelectorAll('.weui-navbar__item'); } -function getItemsByTabbar(nativeEl: HTMLElement): NodeListOf { - return nativeEl.querySelectorAll('.weui-tabbar__item'); +function getItemsByTabbar(nativeEl: HTMLElement, index: number): HTMLElement { + return nativeEl.querySelectorAll('.weui-tabbar__item')[index] as HTMLElement; } function getContents(nativeEl: HTMLElement): NodeListOf { @@ -79,7 +83,7 @@ function expectActiveTabs(nativeEl: HTMLElement, action: boolean[]): void { describe('Component: Tabs', () => { let fixture: ComponentFixture; let context: TestTabComponent; - let el: any; + let el: HTMLElement; describe('[Navbar]', () => { beforeEach(fakeAsync(() => { @@ -160,15 +164,27 @@ describe('Component: Tabs', () => { })); it('should set tab has icon', () => { - expect((getItemsByTabbar(el)[0] as HTMLElement).querySelector('.weui-tabbar__icon')).not.toBeNull(); + expect(getItemsByTabbar(el, 0).querySelector('.weui-tabbar__icon')).not.toBeNull(); }); it('should set tab badge number value', () => { - expect((getItemsByTabbar(el)[0] as HTMLElement).querySelector('.weui-badge')!.innerHTML).toBe('8'); + expect(getItemsByTabbar(el, 0).querySelector('.weui-badge')!.innerHTML).toBe('8'); }); it('should set tab badge dot value', () => { - expect((getItemsByTabbar(el)[1] as HTMLElement).querySelector('.weui-badge')!.classList).toContain('weui-badge_dot'); + expect(getItemsByTabbar(el, 1).querySelector('.weui-badge')!.classList).toContain('weui-badge_dot'); + }); + + it('should be support valid image url', () => { + context.tabs = [{ icon: '1.jpg' }]; + fixture.detectChanges(); + expect(getItemsByTabbar(el, 0).querySelector('.weui-tabbar__icon')).not.toBeNull(); + }); + + it('#iconClassName', () => { + context.tabs = [{ iconClassName: 'aaa' }]; + fixture.detectChanges(); + expect(getItemsByTabbar(el, 0).querySelector('.weui-tabbar__icon')!.classList).toContain('aaa'); }); }); }); diff --git a/components/tab/tabbar.component.html b/components/tab/tabbar.component.html index af72879..6e1bf42 100644 --- a/components/tab/tabbar.component.html +++ b/components/tab/tabbar.component.html @@ -1,24 +1,13 @@
-
-
-
- {{ item.badge }} - +
+
+
+ +
+
+ {{ item.badge }} +

{{ item.heading }}

diff --git a/src/app/example/tabbar/tabbar.component.ts b/src/app/example/tabbar/tabbar.component.ts index 8b1f2cc..1194edf 100644 --- a/src/app/example/tabbar/tabbar.component.ts +++ b/src/app/example/tabbar/tabbar.component.ts @@ -10,17 +10,17 @@ import { timer } from 'rxjs'; }) export class DemoTabbarComponent { time: number; - icon = ``; - activeIcon = ``; - - onSelect(): void { - this.time = new Date().getTime(); - } + icon = `./assets/images/icon_tabbar.png`; + activeIcon = `./assets/images/momentloader.png`; items: any[] = Array(20) .fill(0) .map((_v: any, i: number) => i); + onSelect(): void { + this.time = new Date().getTime(); + } + onLoadMore(comp: InfiniteLoaderComponent): void { timer(1500).subscribe(() => { this.items.push(