ng-cw-v12
Version:
Angular UI component library
141 lines (136 loc) • 7.39 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, NgModule } from '@angular/core';
class CarouselListComponent {
constructor(eleRef, cdr) {
this.eleRef = eleRef;
this.cdr = cdr;
this.ncTime = 1; //多少秒滚动一格
this.ncRow = 1; //显示多少行
this.liCount = 0; //计算
this.liHeight = 0; //计算
// 将事件处理函数定义为类的属性
this.handleMouseEnter = () => {
const ul = this.eleRef.nativeElement.querySelector('ul');
if (!ul)
return;
ul.style.animationPlayState = 'paused';
Array.from(ul.getElementsByTagName('li')).forEach(li => {
li.style.animationPlayState = 'paused';
});
};
this.handleMouseLeave = () => {
const ul = this.eleRef.nativeElement.querySelector('ul');
if (!ul)
return;
ul.style.animationPlayState = 'running';
Array.from(ul.getElementsByTagName('li')).forEach(li => {
li.style.animationPlayState = 'running';
});
};
}
ngAfterViewInit() {
this.initializeCarousel();
this.setupMutationObserver();
}
initializeCarousel() {
let ul = this.eleRef.nativeElement.querySelector('ul');
if (!ul)
return;
const liElements = Array.from(ul.getElementsByTagName('li')).filter(li => !li.classList.contains('cloned'));
if (liElements.length === 0)
return;
this.liCount = liElements.length;
this.liHeight = liElements[0].offsetHeight;
this.ncRow = this.ncRow <= this.liCount ? this.ncRow : this.liCount;
// 清除之前可能添加的克隆元素
const clonedElements = ul.querySelectorAll('.cloned');
clonedElements.forEach(el => el.remove());
// 添加新的克隆元素
let copy = liElements.slice(0, this.ncRow).map((li) => {
const clonedLi = li.cloneNode(true);
clonedLi.classList.add('cloned');
return clonedLi;
});
copy.forEach(li => ul.appendChild(li));
// 重置动画
ul.style.animation = 'none';
ul.offsetHeight; // 触发重排
ul.style.animation = `move calc(${this.ncTime} * ${this.liCount} * 1s) steps(${this.liCount}) infinite`;
// 重置所有 li 的动画
const allLis = ul.getElementsByTagName('li');
Array.from(allLis).forEach(li => {
li.style.animation = 'none';
li.offsetHeight; // 触发重排
li.style.animation = `liMove calc(${this.ncTime} * 1s) infinite`;
});
// 先移除旧的事件监听器，再添加新的
ul.removeEventListener('mouseenter', this.handleMouseEnter);
ul.removeEventListener('mouseleave', this.handleMouseLeave);
ul.addEventListener('mouseenter', this.handleMouseEnter);
ul.addEventListener('mouseleave', this.handleMouseLeave);
//在操作完 DOM 后调用 detectChanges() 确保变更被正确检测，防止下面的错误，用setTimeout的话该组件存在闪烁的问题
//ERROR RuntimeError: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '0'. Current value: '5'.. Find more at https://angular.io/errors/NG0100
this.cdr.detectChanges();
}
setupMutationObserver() {
const ul = this.eleRef.nativeElement.querySelector('ul');
if (!ul)
return;
this.observer = new MutationObserver(() => {
// console.log('数据发生变化');
this.initializeCarousel();
});
this.observer.observe(ul, {
// childList: true,//该项开启后非常卡顿，initializeCarousel会一直执行
subtree: true,
characterData: true
});
}
ngOnDestroy() {
if (this.observer) {
this.observer.disconnect();
}
// 使用类属性中定义的事件处理函数来移除监听器
const ul = this.eleRef.nativeElement.querySelector('ul');
if (ul) {
ul.removeEventListener('mouseenter', this.handleMouseEnter);
ul.removeEventListener('mouseleave', this.handleMouseLeave);
}
}
}
CarouselListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: CarouselListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
CarouselListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: CarouselListComponent, selector: "nc-carousel-list", inputs: { ncTime: "ncTime", ncRow: "ncRow" }, ngImport: i0, template: "<div class=\"carousel\" style=\"--liCount: {{liCount}};--liHeight: {{liHeight}};--speed: {{ncTime}};--row: {{ncRow}};\">\r\n <ng-content></ng-content>\r\n</div>", styles: ["::ng-deep .carousel{height:calc(var(--liHeight) * 1px * var(--row));overflow:hidden}::ng-deep .carousel ul{margin:0;padding:0}::ng-deep .carousel ul li{list-style:none;cursor:pointer}@keyframes move{0%{transform:translate(0)}to{transform:translateY(calc(var(--liCount) * var(--liHeight) * -1px))}}@keyframes liMove{0%{transform:translate(0)}80%,to{transform:translateY(calc(var(--liHeight) * -1px))}}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: CarouselListComponent, decorators: [{
type: Component,
args: [{
selector: 'nc-carousel-list',
templateUrl: './carousel-list.component.html',
styleUrls: ['./carousel-list.component.less']
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { ncTime: [{
type: Input
}], ncRow: [{
type: Input
}] } });
class NcCarouselListModule {
}
NcCarouselListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcCarouselListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NcCarouselListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcCarouselListModule, declarations: [CarouselListComponent], exports: [CarouselListComponent] });
NcCarouselListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcCarouselListModule, imports: [[]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcCarouselListModule, decorators: [{
type: NgModule,
args: [{
declarations: [
CarouselListComponent
],
imports: [],
exports: [
CarouselListComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { CarouselListComponent, NcCarouselListModule };
//# sourceMappingURL=ng-cw-v12-carousel-list.js.map