先上效果图
1、安装插件
@H_
502_8@npm install ngx-color-picker --save
2、配置插件
@H_
502_8@import { ColorPickerModule } from 'ngx-color-picker';
@NgModule({
...
imports: [
...
ColorPickerModule
]
})
3、使用
@H_
502_8@<input [(colorPicker)]="color" [style.background]="color"/>
4、过多细节，不再啰嗦，参考下面两个网址，我们主要展示封装组件实例。
@H_
502_8@https://github.com/zefoy/ngx-color-picker
https://zefoy.github.io/ngx-color-picker/
封装颜色选择组件步骤
1、定义组件
@H_
502_8@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);
}
}
@H_
502_8@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',64)']"
/>
<input style="width: 16px; border: none;" [style.background]="color" [(colorPicker)]="color" [cpPresetColors]="['#fff',64)']"
/>
2、使用定义公共组件
@H_
502_8@A: html
文件
<!--
[color]: 初始化颜色
[sentColor]: 子模块中发射
获取颜色的
方法
-->
<select-color [color]="initColor" (sentColor)="getChangeColor($event)"></select-color>
@H_
502_8@B: ts
文件
export class AppComponent {
// 初始化颜色
public initColor: string = "#468dcc";
//
获取颜色的
方法Ï
getChangeColor(event) {
console.log(event);
}
}
