angular2倒计时组件使用详解 - 行业资讯 - 肥雀云

项目中遇到倒计时需求,考虑到以后在其他模块也会用的到,就自己封装了一个组件。便于以后复用。

组件需求如下:
　　——接收父级组件传递截止日期
　　——接收父级组件传递标题

组件效果

变量　　

　　& lt; div类=暗辜剖薄北? 　　& lt; div类="标题"比; 　　& lt; h5> 　　{{标题}} 　　& lt;/h5> 　　& lt;/div> 　　& lt; div类=吧硖濉北? 　　& lt; div类=澳谌荨北? 　　& lt; div类=岸ゼ丁北? 　　{{小时}} 　　& lt;/div> 　　& lt; div类="底"比; 　　小时　　& lt;/div> 　　& lt;/div> 　　& lt; div类=澳谌荨北? 　　& lt; div类=岸ゼ丁北? 　　{{一}} 　　& lt;/div> 　　& lt; div类="底"比; 　　分钟　　& lt;/div> 　　& lt;/div> 　　& lt; div类=澳谌荨北? 　　& lt; div类=岸ゼ丁北? 　　{{二}} 　　& lt;/div> 　　& lt; div类="底"比; 　　秒　　& lt;/div> 　　& lt;/div> 　　& lt;/div> 　　& lt;/div> 　　之前　　　　

组件countdown.scss代码

　　　　　　.count-down { 　　宽度:100%; 　　身高:100 px; 　　背景:rgba (0, 0, 0, 0.5); 　　填充:2 px 0; 　　.body { 　　margin-top: 8 px; 　　.content { 　　宽度:29%; 　　浮:左; 　　保证金:0 2%; 　　.top { 　　字体大小:20 px;; 　　行高:30 px; 　　颜色:黑色; 　　背景:白色; 　　边界底部:2 px固体黑色; 　　} 　　.bottom { 　　字体大小:14 px; 　　行高:20 px; 　　背景:灰色; 　　} 　　} 　　} 　　} 　　之前　　　　

组件countdown.component.ts代码

　　　　　　进口{组件,[endDate]=" endDate祝辞& lt;/roy-countdown>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。