# Dialog 弹出框

该组件不依赖jQuery与Vue。

# 引入说明

TIP

import Dialog from "jimoui/components/Dialog/Dialog";

# 代码演示

TIP

const dialog = new Dialog({
    title: "喵呜~", // 标题，至多两行，超出则...阶段
    content: " Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab cum deserunt dicta error et, eum facere hic illo in modi nihil nisi officia quae quam quo rerum soluta veritatis?", // 内容，过长时会展示滚动条
    contentAlign: "left", // 正文对齐方向，默认居中对齐。支持center/left/right
    tips: "我是提示语哟~", // 提示语
    detail: "请查看详情", // 一段深色文案，通常用于展示协议链接等
    detailUrl: 'http://xxx.dmall.com', // 当点击detail区域时跳转的链接
    richText: '<div>喵~</div>', // 富文本内容。
    cancelText: "不好~", // 取消按钮文案
    ensureText: "好的喵~", // 确定按钮文案
    canceledOnTouchOutside: false, // 点击阴影区是否关闭
    ghostEnsure: true, // 确定按钮是否使用幽灵按钮样式，遵照设计规范
    myClassName: "", // 自定义对话框外层class样式名
    mainColor: "", // 确定按钮主色
    secondColor: "", // 确定按钮辅助色
    tapCancel(){ // 取消按钮点击回调
        console.log('取消！')
    },
    tapEnsure(){ // 确定按钮点击回调
        console.log('确认！')
    }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 注意！！！请谨慎使用richText属性，组件内会剔除掉可执行的script标签以阻止可能出现的XSS攻击。即使如此，你应该确保传入的内容是保证安全的。

# 当使用该属性时，title、content、tips、detail字段会被全部舍弃。也就是说，此时Dialog只是一个承载富文本内容的容器。

# 属性

配置	用途	取值	使用描述
show	显示	/	展示对话框。支持链式调用。 dialog.show()
hide	隐藏	/	隐藏对话框。该方法不会销毁当前对话框，仅隐藏元素。支持链式调用。 dialog.hide()
destroyDialog	销毁对话框	/	强制销毁当前对话框。不建议直接调用，通常你应该点击取消/确定按钮来完成这步操作。 dialog.destroyDialog()