弹窗

示例

基本用法

定义一个弹窗,然后通过v-model建立绑定,当该绑定的值为true时,展示弹窗。

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
静态方法

组件提供了4个静态方法,用于弹出4种不同类型的提示窗口:success warning error confirm,该方法会返回Promise对象,成功回调代表点击了“确认”按钮,失败回调代表点击了“取消”按钮

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
尺寸

添加size属性,定义如下尺寸:large, defaultsmallmini

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
自定义头部和底部

组件提供了headerfooter扩展点(block),通过它们可以自定义头部和底部。有时候我们可能想完整去掉整个底部footer,这可以通过置空footer-wrapper这个扩展点做到。

可以通过parent()引用到组件定义的默认内容

vue会忽略所有空slot,所以如果要重置footer-wrapper可以传一个空div代替

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
事件回调

弹窗点击“确认”和“取消”时,分别会派发出okcancel事件,通过它们可以执行相应的回调逻辑。此时弹窗会自动立即关闭,如果需要控制更多细节,可以使用okcancel属性,详见异步关闭。

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
继承弹窗

在实际应用中,弹窗的逻辑一般都很复杂,通过继承,我们可以将所有弹窗里的逻辑进行分装,形成一个新的弹窗组件。例如:点击确定时进行表单验证,发送请求,延迟关闭等等。将这些业务逻辑封装在单独的模块中,是推荐的做法。

dialog.vdt
dialog.js
index.vdt
index.js
index.vue (Vue)
index.jsx (React)
异步打开

当弹窗很复杂时,我们可以通过继承Dialog的方式,将所有业务逻辑封装成一个新弹窗组件。经常地,我们需要在弹窗打开时获取数据,一种方式是,弹窗同步打开,然后使用loading动画来过渡数据加载过程,另一种方式,我们还可以在弹窗数据加载完成后再打开弹窗。这种方式只需要在继承的弹窗的_init生命周期函数中返回Promise对象即可。另外我们还可以通过open, close来处理打开关闭后的逻辑。

dialog.vdt
dialog.js
index.vdt
index.js
index.vue (Vue)
index.jsx (React)
异步关闭

Dialog默认点击确定按钮会立即关闭弹窗并触发ok事件,我们可以给ok属性(并非ok事件)指定一个函数来去掉默认函数行为,此时你可以自己控制弹窗的关闭情况。cancel属性同理。

index.vdt
index.js
index.vue (Vue)
index.jsx (React)

属性

属性 说明 类型 默认值
title 弹窗标题 String "提示"
value 弹窗是否展示出来 Boolean false
size 弹窗尺寸 "large" | "default" | "small" | "mini" "default"
loading “确认”按钮是否为加载状态 Boolean false
okText “确认”按钮文案 String "确认"
cancelText “取消”按钮文案 String "取消"
disabledOk “确认”按钮是否为禁用状态 Boolean false
ok “确认”按钮点击后自定义回调函数 Function undefined
cancel “取消”按钮点击后自定义回调函数 Function undefined
container 指定弹层插入的容器,默认会追加到body中。你可以传入函数返回一个DOM用来作为插入的容器,或者传入字符串用来给querySelector进行查询 Function | String undefined
hideClose 是否隐藏右上角关闭按钮 Boolean false

扩展点

名称 说明
header 扩展弹窗头部
body 扩展弹窗主体部分
footer 扩展弹窗底部
footer-wrapper 扩展弹窗整个底部,上述footer是它下面一个子扩展点

方法

方法名 说明 参数 返回值
show 弹出弹窗 - Promise
close 关闭弹窗 - undefined
showLoading “确认”按钮变为加载状态 - undefined
hideLoading “确认”按钮变为正常状态 - undefined
disableOk “确认”按钮变为禁用状态 - undefined
enableOk “确认”按钮变为正常状态 - undefined
ok 点击“确认”按钮的回调方法,继承Dialog时,可以复写该方法实现自定义需求 - undefined
cancel 点击“取消”按钮的回调方法,继承Dialog时,可以复写该方法实现自定义需求 - undefined

静态方法

方法名 说明 参数 返回值
success 成功提示窗口 Options Promise
warning 警告提示窗口 Options Promise
error 错误提示窗口 Options Promise
confirm 确认提示窗口 Options Promise

其中Options对象属性说明如下

属性 说明 类型 默认值
title 弹窗标题 String "提示"
content 弹窗内容 String | Number | VNode | Array<String Number VNode> undefined
size 弹窗尺寸 "large" | "default" | "small" | "mini" "default"
okText “确认”按钮文案 String "确认"
cancelText “取消”按钮文案 String "取消"
hideIcon 是否隐藏提示图标 Boolean false
hideFooter 是否隐藏底部按钮 Boolean false
showClose 是否展示关闭按钮 Boolean false

其中Promise对象会在点击“确认”按钮时resolve(),在点击“取消”按钮时reject(),你可以在then()中书写用户点击不同按钮的逻辑

只有confirm类型的提示窗口才有“取消”按钮

事件

事件名 说明 参数
cancel 点击取消按钮时触发 -
ok 点击确定按钮时触发 -
open 弹窗打开后触发 -
close 弹窗关闭后触发 -