Chelun-util NPM

cl-util

公共开发基础库

安装

yarn add git+ssh://git@git.chelun.com:frontend/cl-util.git

或

npm install git+ssh://git@git.chelun.com:frontend/cl-util.git

开发

watch 模式会监听文件变化并自动编译ts和scss文件

yarn watch

编译

yarn build

组件和功能

下面列举cl-util包所包含的全部功能：

`Alert` 组件

☛ 查看组件签名

使用

// 导入组件和对应的css
import "cl-util/Alert/index.css";
import Alert from "cl-util/Alert";

// 方式1：取代原生的window.alert
Alert("姓名格式错误");

// 方式2：可简单定制的弹框
Alert({
  content: string; // 必选，弹框内容
  showCancel?: boolean; // 可选，是否显示取消按钮
  cancelText?: string; // 可选，取消按钮文本
  confirmText?: string; // 可选，确定按钮文本
  onConfirm?: () => void; // 可选，确定按钮回调
  onCancel?: () => void; // 可选，取消按钮回调
})

`Loading` 组件

☛ 查看组件签名

显示一个加载状态的动画，默认位于屏幕中间，加载状态会遮挡屏幕操作

使用

// 导入组件和对应的css
import "cl-util/Loading/index.css";
import Loading from "cl-util/Loading";

// 创建一个加载状态
const loading = new Loading();

// 销毁之前创建的加载状态
loading.destroy();

`Toast` 组件

☛ 查看组件签名

淡入淡出一个toast提示，默认显示3秒，时间可定制

// 导入组件和对应的css
import "cl-util/Toast/index.css";
import Toast from "cl-util/Toast";

// 弹出toast，默认停留3秒
new Toast('成功关注');

// 弹出toast并指定toast的停留时间为5秒
new Toast('成功关注', 5000);