网站首页 » 前端开发 » Angular 2+ » Angular 做一个 SwitchButton (滑动开关)功能模块
上一篇:
下一篇:

Angular 做一个 SwitchButton (滑动开关)功能模块

什么是 SwitchButton 相信你早已有听闻,在这里就不用多说了,现在我们还是来看看怎么用 Angular 做下个 SwitchButton 。

在做之前,我们先来看看效果图:

Anguar 做一个 SwitchButton (开关按钮)功能模块

效果你都见得多了,下面我们来看看代码,首先我们先来看看这个 SwitchButton 的 .html

switch-button.component.html
<div class="switch-button" [ngStyle]="myStyle" [ngClass]="{'switch-button-close':trigger.status}" (click)="triggerFn()">
  <span class="switch-flag"></span>
</div>

接下来看看 SwitchButton 的样式:

switch-button.component.css
/*  开关  */

.switch-button {
  margin: 0 auto;
  position: relative;
  background: #008CEE;
  width: 54px;
  height: 28px;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  border-radius: 14px;
  cursor: pointer;
  -webkit-transition: background-color 0.5s ease-in-out 0s;
  -moz-transition: background-color 0.5s ease-in-out 0s;
  -ms-transition: background-color 0.5s ease-in-out 0s;
  -o-transition: background-color 0.5s ease-in-out 0s;
  transition: background-color 0.5s ease-in-out 0s;
  -webkit-box-shadow: inset 2px 0 2px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 2px 0 2px 1px rgba(0, 0, 0, 0.1);
  box-shadow: inset 2px 0 2px 1px rgba(0, 0, 0, 0.1);
}

.switch-button .switch-flag {
  position: absolute;
  left: 26px;
  width: 28px;
  height: 28px;
  display: block;
  background: #fff;
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
  -webkit-transition: left 0.3s ease-in-out 0s;
  -moz-transition: left 0.3s ease-in-out 0s;
  -ms-transition: left 0.3s ease-in-out 0s;
  -o-transition: left 0.3s ease-in-out 0s;
  transition: left 0.3s ease-in-out 0s;
  -webkit-box-shadow: 1px 0 1px 1px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 1px 0 1px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 1px 0 1px 1px rgba(0, 0, 0, 0.3);
}

.switch-button-close {
  background: #eee!important;
}

.switch-button-close .switch-flag {
  left: 0px;
}
switch-button-component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'switch-button',
  templateUrl: './switch-button.component.html',
  styleUrls: ['./switch-button.component.css']
})
export class SwitchButtonComponent {
  @Input() trigger: any = { status: false }
  @Input() myStyle: any = {}
  @Output() callBack = new EventEmitter<any>();
  triggerFn() {
    this.callBack.emit();
  }
}

在 SwitchButton 组件中通过 EventEmitter  来触发父组件中的方法,一般我们也需要这么做,因为在不同的组件中,我们点击了按钮后很有可能都会添加一些业务逻辑,至此 SwitchButton 开关按钮组件功能就已经完成,接下来,我们就在其它组件中使用它:

app.component.html
<switch-button [myStyle]="{'background':'#449d44'}" [trigger]="{status:buttonStatus}" (callBack)="statusChange()"></switch-button>

<div class="loading" *ngIf="isLoading">
  <div>努力加载中......</div>
  <div>
    <span>来自遥远的</span>
    <span class="yunkus">云库网</span>
  </div>
</div>

通过 myStyle 属性可以自定义按钮的背景颜色,trigger 用于接收按钮状态,callBack 用来调用父组件的方法

app.component.css
.loading {
  margin: 12px 0;
  text-align: center;
}

.loading .yunkus {
  color: #a52a2a;
}
app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  buttonStatus = false;
  private timer = null;
  private isLoading = false;

  statusChange() {
    this.isLoading = true;
    this.timer = setTimeout(() => {
      this.isLoading = false;
      this.buttonStatus = !this.buttonStatus;
    }, 1000);
  }
}

上面代码中,我们用setTimeout 来模拟了服务器请求的延时,即一秒后再触发按钮切换效果。在实际的开发中我们也确实需要根据服务返回的状态来最终决定这个按钮所对应的真实状态。最后,我们还需要在 app.module.ts 中引入 SwitchButton 组件:

app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { SwitchButtonComponent } from './switchButton/switch-button.component';

@NgModule({
  declarations: [
    AppComponent,
    SwitchButtonComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Anguar 做一个 SwitchButton (开关按钮)功能模块到这里就已经接近尾声了,你可以举一反三,做一些你想做的组件功能。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/angular-functional-module-switch-button/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END