Dialog 对话框

用于显示重要信息或需要用户确认操作的模态对话框

演示

9:41

代码示例

<!-- 操作 -->
  <re-button theme="primary" @click="visible = true">打开对话框</re-button>
  <re-dialog :key="current" :visible="visible" :title="currentConfig.title" :content="currentConfig.content" :confirm-btn="currentConfig.confirmBtn" :cancel-btn="currentConfig.cancelBtn" :close-btn="currentConfig.closeBtn" :close-on-click-overlay="currentConfig.closeOnClickOverlay" :show-overlay="currentConfig.showOverlay" :zindex="currentConfig.zindex" @update:visible="visible = $event" @confirm="onConfirm" @cancel="onCancel" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-dialog />。

API

Dialog Props

名称	类型	默认值	描述	必传
visible	`boolean`	false	是否显示对话框	N
title	`string`	""	标题	N
content	`string`	""	内容文字	N
confirmBtn	`string`	"确认"	确认按钮文字或配置对象	N
cancelBtn	`string`	"取消"	取消按钮文字或配置对象	N
closeBtn	`boolean`	true	是否显示关闭按钮	N
closeOnClickOverlay	`boolean`	false	点击遮罩层是否关闭	N
showOverlay	`boolean`	true	是否显示遮罩层	N
zindex	`number`	2500	元素层级	N
customStyle	`string`	""	自定义样式	N

Dialog Events

名称	参数	描述
update:visible	value: boolean	显隐变化时触发
confirm	-	确认时触发
cancel	-	取消时触发
close	-	关闭时触发
visible-change	visible: boolean	显隐变化时触发

Dialog Slots

名称	描述
title	-
content	-
default	默认插槽
cancel	-
confirm	-

ActionSheet 动作面板

从底部弹出的菜单列表，提供多个操作选项

Drawer 抽屉

抽屉组件，从屏幕边缘滑出，支持推拉手势关闭、模态层过渡动画。closeOnOverlayClick 默认 false，默认禁止点击遮罩关闭。

内容锚点

演示
代码示例
引入
API