Wil-dialog NPM

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 raw-loader@0.5.1

在 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

@everything-registry/sub-chunk-3147

1.0.0

8 months ago