ngx-color-picker angular4封装颜色选择器组件

先上效果图

clipboard.png

1、安装插件

npm install ngx-color-picker --save

2、配置插件

import { ColorPickerModule } from 'ngx-color-picker';

@NgModule({
  ...
  imports: [
    ...
    ColorPickerModule
  ]
})

3、使用

<input [(colorPicker)]="color" [style.background]="color"/>

4、过多细节,不再啰嗦,参考下面两个网址,我们主要展示封装组件实例。

https://github.com/zefoy/ngx-color-picker
https://zefoy.github.io/ngx-color-picker/

封装颜色选择组件步骤
1、定义组件

A: select-color.component.ts

import { Component, Output, Input, EventEmitter } from "@angular/core";
@Component({
    selector: "select-color",
    templateUrl: "./select-color.component.html"
})
export class SelectColorComponent {
    // 初始化颜色是从父组件中传递过来的,属性
    @Input() color: string;
    // 选择颜色以后调用父组件中的方法,将数据传递出去,方法
    @Output() sentColor = new EventEmitter();

    // 当选择颜色以后
    colorPickerChangeFun() {
        this.sentColor.emit(this.color);
    }

}
B: select-color.component.html

<input type="text" [value]="color" disabled/>
<input 
    [style.background]="color" 
    [(colorPicker)]="color" 
    (colorPickerChange)="colorPickerChangeFun()" 
    [cpPresetColors]="['#fff', '#000', '#2889e9', '#e920e9', '#fff500', 'rgb(236,64,64)']"
    readonly 
    style="width: 15px; height: 15px; border: none; cursor: pointer;" 
    title="单机选择颜色" 
/>

<!--支持修改色值-->
<input [value]="color" [(colorPicker)]="color" [cpPresetColors]="['#fff', '#000', '#2889e9', '#e920e9', '#fff500', 'rgb(236,64,64)']"
/>
<input style="width: 16px; border: none;" [style.background]="color" [(colorPicker)]="color" [cpPresetColors]="['#fff', '#000', '#2889e9', '#e920e9', '#fff500', 'rgb(236,64,64)']"
/>

2、使用定义公共组件

A: html文件

<!-- 
  [color]: 初始化颜色
  [sentColor]: 子模块中发射获取颜色的方法
 -->
<select-color [color]="initColor" (sentColor)="getChangeColor($event)"></select-color>
B: ts文件

export class AppComponent {
   // 初始化颜色
  public initColor: string = "#468dcc";
    // 获取颜色的方法Ï
  getChangeColor(event) {
    console.log(event);
  }
}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值