Components

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

使用说明

1、npm i cheese-tool@latest

2、app.modules.ts 中 import { CheeseToolModule } from 'cheese-tool'; ;

3、app.modules.ts 中@NgModule 中 imports 数组中添加 CheeseToolModule ；

使用示例

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%透明度

cheese-placeholder-pic

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

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

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

[picSize]：图片宽高(单位为px)

nsDebounce 防抖

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

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

特殊效果：

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

ns-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%时，进度条会显示涟漪动画效果
• 文字颜色会根据背景色自动调整，确保清晰可见