ng-cw-v12
Version:
Angular UI component library
92 lines (87 loc) • 4.5 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, Input, NgModule } from '@angular/core';
class PulsatingDirective {
constructor(el, renderer) {
this.el = el;
this.renderer = renderer;
this.ncDuration = 1500; // ms
this.ncColor = '#0096ff'; // 默认浅蓝色光晕
this.ncSize = '8px'; // 最大光晕宽度
// 为每个实例生成唯一的动画名称
this.animationName = `ncPulse_${Math.random().toString(36).substr(2, 9)}`;
}
ngOnInit() {
this.createPulsatingContainer();
}
createPulsatingContainer() {
this.pulsatingContainer = this.renderer.createElement('div');
this.renderer.addClass(this.pulsatingContainer, 'pulsating-container');
// 设置基础样式
this.renderer.setStyle(this.pulsatingContainer, 'position', 'absolute');
this.renderer.setStyle(this.pulsatingContainer, 'inset', '0');
this.renderer.setStyle(this.pulsatingContainer, 'borderRadius', 'inherit');
this.renderer.setStyle(this.pulsatingContainer, 'pointerEvents', 'none');
this.renderer.setStyle(this.pulsatingContainer, 'zIndex', '-1');
this.renderer.setStyle(this.pulsatingContainer, 'animation', `${this.animationName} ${this.ncDuration}ms ease-in-out infinite`);
const elementPosition = this.el.nativeElement.style.position;
if (!elementPosition || elementPosition === 'static') {
this.renderer.setStyle(this.el.nativeElement, 'position', 'relative');
}
// 添加关键帧动画样式
const style = this.renderer.createElement('style');
const keyframes = `
${this.animationName} {
0% {
box-shadow: 0 0 0 0 ${this.ncColor};
}
50% {
box-shadow: 0 0 0 ${this.ncSize} ${this.ncColor};
opacity: 0.5;
}
100% {
box-shadow: 0 0 0 0 ${this.ncColor};
}
}
`;
this.renderer.appendChild(style, this.renderer.createText(keyframes));
this.renderer.appendChild(this.el.nativeElement, style);
// 将容器添加到宿主元素中
this.renderer.appendChild(this.el.nativeElement, this.pulsatingContainer);
}
}
PulsatingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: PulsatingDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
PulsatingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.5", type: PulsatingDirective, selector: "[ncPulsating]", inputs: { ncDuration: "ncDuration", ncColor: "ncColor", ncSize: "ncSize" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: PulsatingDirective, decorators: [{
type: Directive,
args: [{
selector: '[ncPulsating]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { ncDuration: [{
type: Input
}], ncColor: [{
type: Input
}], ncSize: [{
type: Input
}] } });
class NcPulsatingModule {
}
NcPulsatingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcPulsatingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NcPulsatingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcPulsatingModule, declarations: [PulsatingDirective], exports: [PulsatingDirective] });
NcPulsatingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcPulsatingModule, imports: [[]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcPulsatingModule, decorators: [{
type: NgModule,
args: [{
declarations: [
PulsatingDirective
],
imports: [],
exports: [
PulsatingDirective
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { NcPulsatingModule, PulsatingDirective };
//# sourceMappingURL=ng-cw-v12-pulsating.js.map