cl-popup v0.0.4

popup

Replacement of window.alert and window.confirm

可定制的React弹框组件

• 支持PC端
• 可定制标题和内容

安装

yarn add cl-popup

或

npm i cl-popup

API 参考

• 当参数为字符串时，相当于模拟 window.alert('提示')

popup('提示')

• 当参数为对象时, 字段描述如下

// 以下伪代码用于描述
popup({
    title？ : 可选，字符串或组件类型，弹框标题
    content : 必选，字符串或组件类型，弹框内容
    confirmText? : 可选，主按钮文字，默认值：“确认”
    cancelText? : 可选，副按钮文字，默认值：“取消”
    showCancel? : 可选，是否显示副按钮，布尔类型，默认：false
    onConfirm? : 可选，主按钮回调函数
    onCancel? : 可选，副按钮回调函数
})

请注意同时引入组件所依赖的CSS，CSS文件在源码 lib 目录

// 需要单独引入组件所依赖的CSS
import 'cl-popup/lib/index.css';
// 引入组件
import popup from 'cl-popup';
// 直接函数调用
popup('提示');

普通弹框，可取代 window.alert

// 直接调用
popup('你输入的信息有误，请重试！');

复杂弹框

// 复杂弹框接收对象参数
// 其中 title 和 content 参数都能接收react组件
popup({
    title: (
      <div className="popup-test-title">
        <Icon color="#eb9316" size="24" type="warn"/>
        <div>提示</div>
      </div>
    ),
    content: '对象参数',
    showCancel: true,
    onConfirm(){
      alert('hello world');
    }
});