# Dialog 弹出框

该组件不依赖jQuery与Vue。

# 引入说明

TIP

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

# 代码演示

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()
  • iOS
  • Android
  • Web
  • MP
v1.0.0