这是什么？

基于 angular12 的一些个人常用的小组件。

联系方式

534519082@qq.com

欢迎反馈bug或者优化建议！

使用说明

1、npm i cheese-tool@latest

2、完整引入：
- app.modules.ts 中 import { CheeseToolModule } from 'cheese-tool';
- app.modules.ts 中@NgModule 中 imports 数组中添加 CheeseToolModule

3、按需引入（推荐）：
- 只引入需要的组件模块，减小打包体积
``typescript
// 只引入防抖指令
import { CheeseDebounceModule } from 'cheese-tool/debounce';

// 只引入加载指令
import { CheeseLoadingModule } from 'cheese-tool/loading';

// 只引入占位图组件
import { CheesePlaceholderPicModule } from 'cheese-tool/placeholder-pic';

// 只引入进度条组件
import { CheeseProgressModule } from 'cheese-tool/progress';

// 只引入工具服务
import { CheeseServiceModule } from 'cheese-tool/service';

// 只引入气泡提示组件
import { CheesePopupTipModule } from 'cheese-tool/popup-tip';

// 只引入Toast通知组件
import { CheeseToastModule } from 'cheese-tool/toast';

// 只引入滚动显示组件
import { CheeseMarqueeModule } from 'cheese-tool/marquee';

@NgModule({
imports: [
// 按需添加需要的模块
CheeseDebounceModule,
CheeseLoadingModule,
CheesePlaceholderPicModule,
CheeseProgressModule,
CheeseServiceModule,
CheesePopupTipModule,
CheeseToastModule,
CheeseMarqueeModule,
// ...
]
})
`

使用示例

loading遮罩

import { CheeseLoadingModule } from 'cheese-tool/loading';

`html


[nsLoading]: 布尔值，为true时显示加载中，显示遮罩

[nsLoadingText]: 加载中提示文字，默认"加载中……"

[nsLoadingBakColor]: 遮罩颜色，默认白色40%透明度

ns-placeholder-pic

import { CheesePlaceholderPicModule } from 'cheese-tool/placeholder-pic';

`html

`

[lineOne]：第一行文字（白色加粗的那行）

[lineTwo]：第二行文字（下面灰色的那行）

[picSize]：图片宽高(默认为300px，输入字符串，接受rem等单位)

[darkModel]：是否暗夜模式，默认为true

nsDebounce 防抖

import { CheeseDebounceModule } from 'cheese-tool/debounce';

`html

`

[nsDebounce]：设置的防抖时长（毫秒）

$3

import { CheeseProgressModule } from 'cheese-tool/progress';

进度条组件支持多种使用方式：

`html






`

[nsTotal]：总值（可选），设置后可用实际数值表示进度

[nsPassed]：已完成值或百分比，可以是数字或带%的字符串

[nsPrecision]：百分比文字标签小数位数，默认为0

[nsColor]：进度条颜色，可选。不设置时会根据进度自动使用渐变色（蓝->绿->黄->红）

[nsAnimate]：是否启用动画效果，默认为true

$3

import { CheesePopupTipModule } from 'cheese-tool/popup-tip';

popup-tip 是一个轻量级的提示气泡组件，可以附加在任何 DOM 元素周围，提供上下文信息。

$3

`html
[nsPopupTipType]="'info'"
[tipPosition]="'top'"
[nsPopupTipDuration]="2000">
点击查看提示

`
[nsPopupTip]：提示文本内容

[nsPopupTipType]：提示类型，可选值：'success' | 'error' | 'info' | 'warning'，默认为 'success'

[nsPopupTipPosition]：提示显示位置，可选值：'top' | 'bottom' | 'left' | 'right'，默认为 'top'

[nsPopupTipDuration]：提示显示时长（毫秒），默认为 2000ms

[nsPopupTipClosable]：是否显示关闭按钮，默认为 false

[nsPopupTipTrigger]：触发方式，可选值：'click' | 'hover' | 'manual'，默认为 'click'

$3

通过服务可以在任何地方动态创建提示气泡：

`typescript
import { Component, ElementRef, ViewChild } from '@angular/core';
import { CheesePopupTipService } from 'cheese-tool/popup-tip';

@Component({
selector: 'app-demo',
template:
点击显示提示

})
export class DemoComponent {
@ViewChild('targetBtn') targetBtn: ElementRef;

constructor(private popupTipService: CheesePopupTipService) {}

showTip() {
// 基本用法
this.popupTipService.show(this.targetBtn, '这是一个基本提示');

// 带配置的用法
this.popupTipService.show(this.targetBtn, '这是一个自定义提示', {
type: 'success',
position: 'bottom',
duration: 3000,
closable: true
});

// 快捷方法
this.popupTipService.success(this.targetBtn, '操作成功');
this.popupTipService.error(this.targetBtn, '出现错误');
this.popupTipService.info(this.targetBtn, '提示信息');
this.popupTipService.warning(this.targetBtn, '警告信息');
}
}
`

$3

type：提示类型，可选值：'success' | 'error' | 'info' | 'warning'，默认为 'info'

duration：提示显示时长（毫秒），默认为 3000ms，不能为0

closable：是否可关闭，默认为false

position：提示显示位置，可选值：'top' | 'bottom' | 'left' | 'right'，默认为 'top'

$3

- 提示气泡会自动根据屏幕边界调整位置，确保始终可见
- 支持四种类型，每种类型有不同的颜色和图标
- 可以通过点击关闭按钮或等待持续时间结束自动关闭

toast 全局提示

import { CheeseToastModule } from 'cheese-tool/toast';

toast 是一个轻量级的全局消息提示组件，可以在页面顶部或底部显示重要信息。

$3

`typescript
import { Component } from '@angular/core';
import { CheeseToastService } from 'cheese-tool/toast';

@Component({
selector: 'app-demo',
template:
成功提示
错误提示
信息提示
警告提示
清除所有

})
export class DemoComponent {
constructor(private toastService: CheeseToastService) {
// 可选：设置全局配置
this.toastService.setConfig({
duration: 5000,
closable: true,
position: 'top-center',
maxCount: 3
});
}

showToast(type: 'success' | 'error' | 'info' | 'warning') {
switch(type) {
case 'success':
this.toastService.success('操作成功完成！');
break;
case 'error':
this.toastService.error('操作失败，请重试');
break;
case 'info':
this.toastService.info('系统将在今晚进行维护');
break;
case 'warning':
this.toastService.warning('请注意，此操作不可撤销');
break;
}
}

// 自定义配置示例
showCustomToast() {
this.toastService.show({
message: '这是一个自定义提示',
type: 'info',
duration: 10000,
closable: true,
position: 'bottom-right'
});
}

clearToasts() {
this.toastService.clear();
}
}
`

#### 配置选项

message：提示文本内容

type：提示类型，可选值：'success' | 'error' | 'info' | 'warning'，默认为 'info'

duration：提示显示时长（毫秒），默认为 3000ms，设为 0 则不会自动关闭

closable：是否显示关闭按钮，默认为 false

position：提示显示位置，可选值：'top-center' | 'top-right' | 'bottom-center' | 'bottom-right'，默认为 'top-center'

#### 全局配置

可以通过 setConfig 方法设置全局默认配置：

`typescript
toastService.setConfig({
duration: 5000,
closable: true,
position: 'top-right',
maxCount: 5 // 最大同时显示数量
});
`

$3

- 支持多个 toast 同时显示，超出最大数量时会自动移除最早的提示
- 支持四种类型，每种类型有不同的颜色和图标
- 可以通过点击关闭按钮或等待持续时间结束自动关闭
- 支持在页面不同位置显示，满足各种场景需求

滚动显示

import { CheeseMarqueeModule } from 'cheese-tool/marquee';

`html



nsMarqueeSpeed：滚动速度，像素/秒，默认50

nsMarqueePause：开始滚动前的暂停时间（毫秒），默认1000

nsMarqueeFade：是否启用边缘渐变效果，默认启用

nsMarqueeFadeWidth`：渐变宽度（像素），默认10px

$3

- 建议内部结构尽量全部使用span标签，否则可能出现样式错乱的情况。

$3

- 自动检测内容变化：当内容通过 ngIf 或 ngFor 等指令动态变化时，滚动会自动重新开始
- 响应式设计：根据容器宽度自动决定是否需要滚动
- 标签页切换恢复：当用户切换到其他标签页后再返回，组件会自动重新启动滚动，不会出现内容丢失的问题
- 暂停控制：鼠标悬停时自动暂停，移开后继续滚动
- 完整的生命周期管理：组件会自动清理资源，防止内存泄漏