使用AngularJS2中的指令實現(xiàn)按鈕的切換效果
之前在AngularJS2中一種button切換效果的實現(xiàn)(二)中實現(xiàn)了按鈕的切換效果,但是方法比較low,這次我們使用Angular2的指令來實現(xiàn)。
指令實現(xiàn)hover效果
import { Directive, ElementRef, HostListener, Input } from '@angular/core'; @Directive({ selector: '[myHighlight]' }) export class HighlightDirective { constructor(private el: ElementRef) { } @HostListener('mouseenter') onMouseEnter() { this.highlight('red'); } @HostListener('mouseleave') onMouseLeave() { this.highlight(null); } private highlight(color: string) { this.el.nativeElement.style.backgroundColor = color; } }
<button myHighlight class="btn">按鈕一</button> <button myHighlight class="btn">按鈕二</button> <button myHighlight class="btn">按鈕三</button>
.btn{ height: 50px; width: 100px; background-color: #3399ff; color: white; border: 0; outline: 0; cursor: hand; }
hover的效果直接參考Angular官網(wǎng)的代碼。
指令實現(xiàn)click效果
import { Directive, ElementRef, HostListener, Input } from '@angular/core'; @Directive({ selector: '[myHighlight]' }) export class HighlightDirective { constructor(private el: ElementRef) { } @HostListener('click') onMouseClick() { this.clickhighlight("black"); } private clickhighlight(color: string) { let obj = this.el.nativeElement; let btns = obj.parentNode.children; //背景色全部重置 for(let i=0; i<btns.length; i++){ btns[i].style.backgroundColor = "#3399ff"; } //設置當前點擊對象的背景色 obj.style.backgroundColor = color; } }
<div> <button myHighlight class="btn">按鈕一</button> <button myHighlight class="btn">按鈕二</button> <button myHighlight class="btn">按鈕三</button> </div>
.btn{ height: 50px; width: 100px; background-color: #3399ff; color: white; border: 0; outline: 0; cursor: hand; }
click效果仍然用@HostListener裝飾器引用屬性型指令的宿主元素,首先把所有button的背景顏色重置,然后再設置當前點擊對象的背景顏色,這樣就達到了點擊后背景顏色變化的效果。
指令實現(xiàn)click加hover效果
import { Directive, ElementRef, HostListener, Input } from '@angular/core'; @Directive({ selector: '[myHighlight]' }) export class HighlightDirective { constructor(private el: ElementRef) { } @HostListener('click') onMouseClick() { this.clickhighlight("black"); } private clickhighlight(color: string) { let obj = this.el.nativeElement; let btns = obj.parentNode.children; //背景色全部重置 for(let i=0; i<btns.length; i++){ btns[i].style.backgroundColor = "#3399ff"; } //設置當前點擊對象的背景色 obj.style.backgroundColor = color; } }
<div> <button myHighlight class="btn">按鈕一</button> <button myHighlight class="btn">按鈕二</button> <button myHighlight class="btn">按鈕三</button> </div>
.btn{ height: 50px; width: 100px; background-color: #3399ff; color: white; border: 0; outline: 0; cursor: hand; } .btn:hover{ background: black !important; }
配合上文click效果,只要加上一行css代碼就可以實現(xiàn)click和hover的組合效果,此處務必使用hover偽類,并用!important來提升樣式的優(yōu)先級,如果用@HostListener裝飾器,mouseenter、mouseleave、click三者會打架:
以上所述是小編給大家介紹的使用AngularJS2中的指令實現(xiàn)按鈕的切換效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
Angular的Bootstrap(引導)和Compiler(編譯)機制
這篇文章主要介紹了Angular的Bootstrap(引導)和Compiler(編譯)機制的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-06-06angular4 共享服務在多個組件中數(shù)據(jù)通信的示例
本篇文章主要介紹了angular4 共享服務在多個組件中數(shù)據(jù)通信的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-03-03詳解AngularJs路由之Ui-router-resolve(預加載)
本篇文章主要介紹了詳解AngularJs路由之Ui-router-resolve(預加載),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機制)
本篇文章主要介紹了淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機制),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-12-12