抽屉

示例

基本用法

Drawer组件继承了Dialog组件的属性、扩展点、方法和事件(拖拽功能除外)。基本用法和Dialog相同。

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

添加placement属性,定义如下位置:top,bottom,left,right。默认right从右侧出现

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
遮罩层

添加overlay属性,false则不展示遮罩层,true展示遮罩层。默认为true。另外添加closabled属性,false:点非抽屉区不可自动关闭抽屉(点击抽屉内关闭按钮才可以关闭),true:点非抽屉区可以自动关闭。默认为true

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

属性

属性 说明 类型 默认值
placement 自定义位置 "top" | "bottom" |"left" |"right" "right"
overlay 是否展示遮罩层 Boolean "true"
closable 点击非抽屉部分是否可以关闭抽屉 Boolean "true"
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

扩展点

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

方法

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

事件

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