使用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 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
javascript面向对象之this关键词用法分析
Jan 13 Javascript
js简单实现网页换肤功能
Apr 07 Javascript
Bootstrap实现翻页效果
Nov 27 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 Javascript
vue实现在线翻译功能
Sep 27 Javascript
Echarts实现单条折线可拖拽效果
Dec 19 Javascript
JavaScript简单编程实例学习
Feb 14 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 Javascript
JavaScript 防篡改对象的用法示例
Apr 24 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
一个PHP分页类的代码
2011/05/18 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
jQuery 1.0.2
2006/10/11 Javascript
JavaScript 事件的一些重要说明
2009/10/25 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
Python实现保证只能运行一个脚本实例
2015/06/24 Python
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
Python 忽略warning的输出方法
2018/10/18 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
使用python将多个excel文件合并到同一个文件的方法
2019/07/09 Python
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
Python实现名片管理系统
2020/02/14 Python
金鑫耀Java笔试题
2014/09/06 面试题
大学生专科毕业生自我评价
2013/11/17 职场文书
大学校庆策划书
2014/01/31 职场文书
保卫科工作岗位职责
2014/03/01 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
mysql事务隔离级别详情
2021/10/24 MySQL
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android