wil-dialog
v1.0.0
Published
通用对话框组件
Downloads
4
Readme
wil-dialog
通用对话框组件。
安装
方式一:通过import方式引入
npm install wil-dialog
import dialog from 'wil-dialog';
/** 显示 Dialog */
dialog.show({
type: 1,
title: '这是标题',
content: '弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内',
cancelCb: function () {
alert('点击取消');
},
confirmCb: function () {
alert('点击确定');
dialog.hide();
}
});
/** 关闭 Dialog */
dialog.hide();
方式二:内联html文件
npm install wil-dialog
# 安装 raw-loader,要求版本号为 0.5.1 版本
npm install [email protected]
在 html 文件内使用 <script> 标签内联引入
<script><%=require('raw-loader!wil-dialog/dist/dialog.min.js')%></script>
<script>
dialog.show({
// 配置项
});
</script>
由于此组件使用了document.body
方法,所以必须在<body>标签内引用此组件,否则会出现报错;,使用此方式引入组件。必须在最靠近 <body>
标签的位置使用 <script>
标签引入。
API
dialog.show(Object object);
显示 dialog ,Object 为必传参数
属性 | 类型 | 默认值 | 是否必填 | 说明
-|-|-|-|-|
type | Number | 1 | 否 | 弹窗类型,1: 标题+正文+双按钮 2: 正文+单确认按钮 3: 标题+双按钮 4: 标题+正文+单确认按钮
title | String | '' | 否 | 自定义弹窗标题
content | String | '' | 否 | 自定义弹窗内容
cancel | String | '取消' | 否 | 自定义取消按钮文本内容
confirm | String | '确定' | 否 | 自定义确认按钮文本内容
cancelCb | Function | null | 否 | 点击取消按钮执行的回调函数,自动关闭弹窗
confirmCb | Function | null | 是 | 点击确认按钮执行的回调函数,不会自动关闭弹窗,需要调用dialog.hide();
进行关闭
dialog.hide();
关闭 dialog