element MessageBox 弹框 this.$confirm的用法和css的坑

2,319 阅读2分钟

问题记录:点击弹框body添加个class:el-popup-parent--hidden并添加行内样式padding-right: 15px;

关闭弹窗,盒子回归原来位置;

解决方法:给根节点或者body添加样式,padding-right:0px !important; overflow: hidden !important;

#app {
  padding-right: 0px !important;
  overflow: hidden !important;
}

按钮居中显示:

/deep/ .el-message-box__btns {
  text-align: center !important;
}

只显示一个按钮:

showCancelButton: false,

不显示右上角关闭窗口 :

showClose: false

this.$confirm属性:

Options

参数说明类型可选值默认值
titleMessageBox 标题string
messageMessageBox 消息正文内容string / VNode
dangerouslyUseHTMLString是否将 message 属性作为 HTML 片段处理booleanfalse
type消息类型,用于显示图标stringsuccess / info / warning / error
iconClass自定义图标的类名,会覆盖 typestring
customClassMessageBox 的自定义类名string
callback若不使用 Promise,可以使用此参数指定 MessageBox 关闭后的回调function(action, instance),action 的值为'confirm', 'cancel'或'close', instance 为 MessageBox 实例,可以通过它访问实例上的属性和方法
showCloseMessageBox 是否显示右上角关闭按钮booleantrue
beforeCloseMessageBox 关闭前的回调,会暂停实例的关闭function(action, instance, done),action 的值为'confirm', 'cancel'或'close';instance 为 MessageBox 实例,可以通过它访问实例上的属性和方法;done 用于关闭 MessageBox 实例
distinguishCancelAndClose是否将取消(点击取消按钮)与关闭(点击关闭按钮或遮罩层、按下 ESC 键)进行区分booleanfalse
lockScroll是否在 MessageBox 出现时将 body 滚动锁定booleantrue
showCancelButton是否显示取消按钮booleanfalse(以 confirm 和 prompt 方式调用时为 true)
showConfirmButton是否显示确定按钮booleantrue
cancelButtonText取消按钮的文本内容string取消
confirmButtonText确定按钮的文本内容string确定
cancelButtonClass取消按钮的自定义类名string
confirmButtonClass确定按钮的自定义类名string
closeOnClickModal是否可通过点击遮罩关闭 MessageBoxbooleantrue(以 alert 方式调用时为 false)
closeOnPressEscape是否可通过按下 ESC 键关闭 MessageBoxbooleantrue(以 alert 方式调用时为 false)
closeOnHashChange是否在 hashchange 时关闭 MessageBoxbooleantrue
showInput是否显示输入框booleanfalse(以 prompt 方式调用时为 true)
inputPlaceholder输入框的占位符string
inputType输入框的类型stringtext
inputValue输入框的初始文本string
inputPattern输入框的校验表达式regexp
inputValidator输入框的校验函数。可以返回布尔值或字符串,若返回一个字符串, 则返回结果会被赋值给 inputErrorMessagefunction
inputErrorMessage校验未通过时的提示文本string输入的数据不合法!
center是否居中布局booleanfalse
roundButton是否使用圆角按钮booleanfalse