使用AngularJS2中的指令实现按钮的切换效果


Posted in Javascript onMarch 27, 2017

使用AngularJS2中的指令实现按钮的切换效果 

之前在AngularJS2中一种button切换效果的实现(二)中实现了按钮的切换效果,但是方法比较low,这次我们使用Angular2的指令来实现。

指令实现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官网的代码。

使用AngularJS2中的指令实现按钮的切换效果 

指令实现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的背景颜色重置,然后再设置当前点击对象的背景颜色,这样就达到了点击后背景颜色变化的效果。

使用AngularJS2中的指令实现按钮的切换效果 

指令实现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代码就可以实现click和hover的组合效果,此处务必使用hover伪类,并用!important来提升样式的优先级,如果用@HostListener装饰器,mouseenter、mouseleave、click三者会打架:

使用AngularJS2中的指令实现按钮的切换效果 

以上所述是小编给大家介绍的使用AngularJS2中的指令实现按钮的切换效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript建立一个语法高亮输入框实现思路
Feb 26 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
基于JQuery实现分隔条的功能
Jun 17 Javascript
js设置文字颜色的方法示例
Dec 30 Javascript
Bootstrap如何激活导航状态
Mar 22 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 Javascript
vue-quill-editor的使用及个性化定制操作
Aug 04 Javascript
解决vue路由name同名,路由重复的问题
Aug 05 Javascript
详解VUE的状态控制与延时加载刷新
Mar 27 #Javascript
vue2.0实战之使用vue-cli搭建项目(2)
Mar 27 #Javascript
js实现三级联动效果(简单易懂)
Mar 27 #Javascript
JS数组去重(4种方法)
Mar 27 #Javascript
JS实现隔行换色的表格排序
Mar 27 #Javascript
JavaScript实现获取远程的html到当前页面中
Mar 26 #Javascript
axios学习教程全攻略
Mar 26 #Javascript
You might like
使用phpQuery采集网页的方法
2013/11/13 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
javascript 特殊字符串
2009/02/25 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
jQuery实现广告条滚动效果
2017/08/22 jQuery
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
React Native react-navigation 导航使用详解
2017/12/01 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
2019/05/06 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
Python 的描述符 descriptor详解
2016/02/27 Python
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
Python外星人入侵游戏编程完整版
2020/03/30 Python
Python 获得13位unix时间戳的方法
2017/10/20 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
python线程优先级队列知识点总结
2021/02/28 Python
html5 div布局与table布局详解
2016/11/16 HTML / CSS
J2EE面试题
2016/03/14 面试题
小学老师寄语大全
2014/04/04 职场文书
教师师德演讲稿
2014/05/06 职场文书
2015年副班长工作总结
2015/05/15 职场文书
小学毕业感言100字
2015/07/30 职场文书
校园运动会广播稿
2015/08/19 职场文书
《所见》教学反思
2016/02/23 职场文书
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js
Consul在linux环境的集群部署
2022/04/08 Servers