这是什么？

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

联系方式

[email protected]

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

使用说明

1、npm i cheese-tool@latest

2、完整引入：

• app.modules.ts 中 import { CheeseToolModule } from 'cheese-tool';
• app.modules.ts 中@NgModule 中 imports 数组中添加 CheeseToolModule

3、按需引入（推荐）：

• 只引入需要的组件模块，减小打包体积

// 只引入防抖指令
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';

<div class="demo-container">
  <div class="loading-box" [nsLoading]="isLoading">
    <h2>这里是内容</h2>
    <p>当 isLoading 为 true 时会显示加载效果</p>
  </div>
  <button (click)="toggleLoading()">切换加载状态</button>
</div>

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

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

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

ns-placeholder-pic

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

<ns-placeholder-pic [lineOne]="'找不到就算了'" [lineTwo]="'我也没办法你看着办吧'" [picSize]="'20rem'"></ns-placeholder-pic>

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

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

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

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

nsDebounce 防抖

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

 <input [nsDebounce]="500" [(ngModel)]="searchText" (ngModelChange)="change()">

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

特殊效果：

• 当输入的值改变后，经过nsDebounce设置的时间（毫秒）后，触发ngModelChange，从而实现搜索框防抖等功能
• 请注意，ngModel的值也会延迟更新

ns-progress 进度条

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

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

<!-- 使用总值和已完成值 -->
<ns-progress [nsTotal]="100" [nsPassed]="75" [nsPrecision]="2"></ns-progress>
<!-- 直接使用百分比 -->
<ns-progress [nsPassed]="75" [nsColor]="'#4CAF50'"></ns-progress>
<!-- 禁用动画 -->
<ns-progress [nsPassed]="75" [nsAnimate]="false"></ns-progress>

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

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

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

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

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

特殊效果：

• 当进度小于文字宽度时，文字会自动显示在进度条外部
• 当进度超过100%时，进度条会显示涟漪动画效果
• 文字颜色会根据背景色自动调整，确保清晰可见

popup-tip 提示气泡

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

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

指令用法

<button [nsPopupTip]="'这是一个提示信息'" 
        [nsPopupTipType]="'info'" 
        [tipPosition]="'top'"
        [nsPopupTipDuration]="2000">
  点击查看提示
</button>

[nsPopupTip]：提示文本内容

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

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

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

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

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

服务用法（推荐）

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

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

@Component({
  selector: 'app-demo',
  template: `
    <button #targetBtn (click)="showTip()">点击显示提示</button>
  `
})
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, '警告信息');
  }
}

配置选项

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

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

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

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

特殊效果：

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

toast 全局提示

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

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

服务用法

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

@Component({
  selector: 'app-demo',
  template: `
    <button (click)="showToast('success')">成功提示</button>
    <button (click)="showToast('error')">错误提示</button>
    <button (click)="showToast('info')">信息提示</button>
    <button (click)="showToast('warning')">警告提示</button>
    <button (click)="clearToasts()">清除所有</button>
  `
})
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 方法设置全局默认配置：

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

特殊效果：

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

滚动显示

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

<ns-marquee [nsMarqueeSpeed]="60" style="display: block; width: 300px; border: 1px solid #ccc; margin-bottom: 20px;">
  <div style="white-space: nowrap; display: inline-flex; align-items: center;">
    <span style="margin-right: 10px;">📢</span>
    <span style="font-weight: bold; margin-right: 10px;">系统公告:</span>
    <span style="margin-right: 10px;">尊敬的用户，系统将于2023年12月31日23:59:59进行维护升级，</span>
    <span style="color: red; margin-right: 10px;">预计停机维护时间为2小时，</span>
    <span style="background-color: yellow; padding: 2px 5px; margin-right: 10px;">请提前做好相关准备工作，</span>
    <span style="text-decoration: underline; margin-right: 10px;">给您带来的不便敬请谅解。</span>
    <span style="font-style: italic; margin-right: 10px;">感谢您的支持与配合！</span>
    <span>如有疑问，请联系系统管理员。</span>
  </div>
</ns-marquee>

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

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

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

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

注意事项

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

特殊效果和功能：

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