FeedbackDialog 反馈弹窗组件

反馈弹窗用于提交成功或失败的情况下，告知用户并承载相关操作。

基础用法

弹出一个对话框告知结果。

显示代码

自定义内容

组件icon、title、content能够通过插槽自定义。

显示代码

TIP

FeedbackDialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。

TIP

如果 visible 属性绑定的变量位于 Vuex 的 store 内，那么 .sync 不会正常工作。此时需要去除 .sync 修饰符，同时监听 FeedbackDialog 的 open 和 close 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 visible 属性绑定的变量的值。

Attributes

参数	说明	类型	可选值	默认值
visible	是否显示 FeedbackDialog，支持 .sync 修饰符	boolean	—	false
icon	FeedbackDialog 的图标，支持三种值success、warning、error，也可通过具名 slot （见下表）传入	string	—	—
title	FeedbackDialog 的标题，也可通过具名 slot （见下表）传入	string	—	—
content	FeedbackDialog 的标题下面的内容，也可通过具名 slot （见下表）传入	string	—	—
width	FeedbackDialog 的宽度	string	—	50%
fullscreen	是否为全屏 FeedbackDialog	boolean	—	false
top	FeedbackDialog CSS 中的 margin-top 值	string	—	15vh
modal	是否需要遮罩层	boolean	—	true
modal-append-to-body	遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 FeedbackDialog 的父元素上	boolean	—	true
append-to-body	FeedbackDialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true	boolean	—	false
lock-scroll	是否在 FeedbackDialog 出现时将 body 滚动锁定	boolean	—	true
custom-class	FeedbackDialog 的自定义类名	string	—	—
close-on-click-modal	是否可以通过点击 modal 关闭 FeedbackDialog	boolean	—	true
close-on-press-escape	是否可以通过按下 ESC 关闭 FeedbackDialog	boolean	—	true
show-close	是否显示关闭按钮	boolean	—	true
before-close	关闭前的回调，会暂停 FeedbackDialog 的关闭	function(done)，done 用于关闭 Dialog	—	—
center	是否对头部和底部采用居中布局	boolean	—	false
destroy-on-close	关闭时销毁 FeedbackDialog 中的元素	boolean	—	false

Slot

name	说明
—	FeedbackDialog 的内容
icon	FeedbackDialog 图标
title	FeedbackDialog 标题
content	FeedbackDialogalog 标题下面的内容
footer	FeedbackDialogalog 按钮操作区的内容

Events

事件名称	说明	回调参数
open	FeedbackDialog 打开的回调	—
opened	FeedbackDialog 打开动画结束时的回调	—
close	FeedbackDialog 关闭的回调	—
closed	FeedbackDialog 关闭动画结束时的回调	—