使用AngularJS2中的指令實(shí)現(xiàn)按鈕的切換效果
之前在AngularJS2中一種button切換效果的實(shí)現(xiàn)(二)中實(shí)現(xiàn)了按鈕的切換效果,但是方法比較low,這次我們使用Angular2的指令來實(shí)現(xiàn)。
指令實(shí)現(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)的代碼。
指令實(shí)現(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"; } //設(shè)置當(dāng)前點(diǎn)擊對象的背景色 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的背景顏色重置,然后再設(shè)置當(dāng)前點(diǎn)擊對象的背景顏色,這樣就達(dá)到了點(diǎn)擊后背景顏色變化的效果。
指令實(shí)現(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"; } //設(shè)置當(dāng)前點(diǎn)擊對象的背景色 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代碼就可以實(shí)現(xiàn)click和hover的組合效果,此處務(wù)必使用hover偽類,并用!important來提升樣式的優(yōu)先級,如果用@HostListener裝飾器,mouseenter、mouseleave、click三者會打架:
以上所述是小編給大家介紹的使用AngularJS2中的指令實(shí)現(xiàn)按鈕的切換效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- AngularJS實(shí)現(xiàn)動(dòng)態(tài)切換樣式的方法分析
- AngularJS標(biāo)簽頁tab選項(xiàng)卡切換功能經(jīng)典實(shí)例詳解
- 詳解AngularJS ng-class樣式切換
- angularJs的ng-class切換class
- AngularJS路由切換實(shí)現(xiàn)方法分析
- AngularJS實(shí)現(xiàn)使用路由切換視圖的方法
- AngularJS入門教程之多視圖切換用法示例
- 用AngularJS的指令實(shí)現(xiàn)tabs切換效果
- 使用AngularJS實(shí)現(xiàn)可伸縮的頁面切換的方法
- angularjs實(shí)現(xiàn)Tab欄切換效果
相關(guān)文章
Angular的Bootstrap(引導(dǎo))和Compiler(編譯)機(jī)制
這篇文章主要介紹了Angular的Bootstrap(引導(dǎo))和Compiler(編譯)機(jī)制的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06angular4 共享服務(wù)在多個(gè)組件中數(shù)據(jù)通信的示例
本篇文章主要介紹了angular4 共享服務(wù)在多個(gè)組件中數(shù)據(jù)通信的示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03詳解AngularJs路由之Ui-router-resolve(預(yù)加載)
本篇文章主要介紹了詳解AngularJs路由之Ui-router-resolve(預(yù)加載),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機(jī)制)
本篇文章主要介紹了淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機(jī)制),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12angularjs $http調(diào)用接口的方式詳解
今天小編就為大家分享一篇angularjs $http調(diào)用接口的方式詳解,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08