elementUI之MessageBox弹框

引入方式：

//全局注册 
	Vue.prototype.$msgbox=MessageBox; 
      //如果细分还可
      Vue.prototype.$alert/$confirm/$prompt=MessageBox.alert/confirm/prompt;
      //调用：   
      this.$msgbox.alert/confirm/prompt()			this.$alert/$confirm/$prompt()
//局部注册
	import { MessageBox } from 'element-ui';
//调用：
	MessageBox.alert/confirm/prompt()

常用参数：

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

使用分析：

//！！MessageBox可以展示简单的信息内容，如果要展示复杂的内容，使用Dialog组件
this.$msgbox.alert('详细描述','标题',{
  //这里设置其他的参数
  title:'标题'， //如果已经设置了标题，又写了title属性，会把之前的覆盖
  message:'详情描述'， //同上
  dangerouslyUseHTMLString：true; //默认是false 这个还是尽量不要用 可以里边写html代码片段
  type：success / info / warning / error  //默认没有，详细描述前边是否需要提示图标
  iconClass：'el-icon-setting'  //这里自定义一个elementui的icon图标 会把type设置的覆盖。
  customClass：'自定义的类' //可以写一个自定义的类名 可以更改MessageBox的样式，但是有scoped不生效
  callback:()=>{//这里写Message框被关闭时执行的代码} //不使用Promise的话，可以用这个在Message框被关闭时执行一些代码
  showClose:true(默认值)  //是否显示msgbox右上角的关闭按钮(x);
  beforeClose:function(action, instance, done){} //action的值为'confirm', 'cancel'或'close'(注意点：写了beforeClose 就必须得调用done() 否则不会往下执行) close只有distinguishCancelAndClose为true的时候才会有这个属性名
  distinguishCancelAndClose(取消区别和关闭)：false(默认值)；//是否将取消（点击取消按钮）与关闭（点击关闭按																													钮或遮罩层、按下 ESC 键）进行区分
  lockScroll：true(默认值) //是否在显示msgbox时 锁定body 不能滚动
  showCancelButton：boo  ,//是否显示取消按钮  false（以 confirm 和 prompt 方式调用时为 true）
  showConfirmButton：true(默认值) ,//是否显示确定按钮
  cancelButtonText:'取消按钮文本', //设置取消按钮的文本
  confirmButtonText:'设置确定按钮文本' //设置确定按钮的文本
  cancelButtonClass:'自定义类名' // 可以写自己想要的样式。！！注意 有scoped 样式不生效
  confirmButtonClass:'自定义类名' // 可以修改自己想要的样式 ！！注意 有scoped 样式不生效
  closeOnClickModal:true(默认值) // 是否可以通过点击遮罩层来关闭msgbox(alert 方式调用时为 false)
  closeOnPressEscape:true(默认值) //是否支持esc按键来关闭msgbox(alert 方式调用时为 false)
  closeOnHashChange：true(默认值) //页面跳转时 是否关闭msgbox
  roundButton：false(默认)  //按钮是否圆角
  center：false(默认) //内容是否居中
  closeOnHashChange：true(默认) //是否在 hashchange 时关闭 msgbox
 	showInput：false（以 prompt 方式调用时为 true） //是否显示输入框
  inputPlaceholder：'要保留的输入框提示'  //输入框的占位符
  inputType：text(默认) //输入框类型
  inputValue：'输入框的初始文本'  //默认自带的文本内容 会覆盖 inputPlaceholder设置的内容
  inputPattern:regexp. //正则表达式
  inputValidator:()=>{} //输入框的校验函数。可以返回布尔值或字符串(need return)，若返回一个字符串(成为提示														信息), 则返回结果会被赋值给 inputErrorMessage
  inputErrorMessage：''  //设置 校验未通过时的提示文本
  
})