当前位置: 首页 > news >正文

element-ui messageBox 组件源码分享

messageBox 弹框组件源码分享,主要从以下两个方面:

1、messageBox 组件页面结构。

2、messageBox 组件属性。

一、组件页面结构。

二、组件属性。

2.1 title 标题,类型为 string,无默认值。

2.2 message 消息正文内容,类型为 string / VNode,无默认值。

2.3 dangerouslyUseHTMLString,是否将 message 属性作为 HTML 片段处理,类型为 boolean,默认值 false。

2.4 type 消息类型,用于显示图标,类型为 string,可选值 success / info / warning / error,无默认值。

2.5 iconClass 自定义图标的类名,会覆盖 type,类型为 string,无默认值。

2.6 customClass 自定义类名,类型为 string,无默认值。

2.7 callback 若不使用 Promise,可以使用此参数指定 MessageBox 关闭后的回调,类型为 unction(action, instance),action 的值为'confirm', 'cancel'或'close', instance 为 MessageBox 实例,可以通过它访问实例上的属性和方法,无默认值。

 ​​​​​​

2.8 showClose  是否显示右上角关闭按钮,类型为 boolean,默认值 true。

2.9 beforeClose 关闭前的回调,会暂停实例的关闭,类型为 function(action, instance, done),action 的值为'confirm', 'cancel'或'close';instance 为 MessageBox 实例,可以通过它访问实例上的属性和方法;done 用于关闭 MessageBox 实例,无默认值。

2.10 distinguishCancelAndClose 是否将取消(点击取消按钮)与关闭(点击关闭按钮或遮罩层、按下 ESC 键)进行区分,类型为 boolean,默认值 false。

2.11 lockScroll 是否在 MessageBox 出现时将 body 滚动锁定,类型为 boolean,默认值 true。 

2.12 showCancelButton 是否显示取消按钮,类型为 boolean,默认值 false(以 confirm 和 prompt 方式调用时为 true)。

2.13 showConfirmButton 是否显示确定按钮,类型为 boolean,默认值 true。

2.14 cancelButtonText 取消按钮的文本内容,类型为 string,默认值取消。

2.15 confirmButtonText 确定按钮的文本内容,类型为 string,默认值确定。

2.16 cancelButtonClass 取消按钮的自定义类名,类型为 string,无默认值。

2.17 confirmButtonClass 确定按钮的自定义类名,类型为 string,无默认值。

2.18 closeOnClickModal 是否可以通过点击遮罩层关闭 messageBox,类型为 boolean,默认值true(以 alert 方式调用时为 false)。

2.19 closeOnPressEscape 是否可通过按下 ESC 键关闭 MessageBox,类型为 boolean,默认值true(以 alert 方式调用时为 false)。

2.20 closeOnHashChange 是否在 hashchange 时关闭 MessageBox,类型为 boolean,默认值 true。

2.21 showInput 是否显示输入框,类型为 boolean,默认值 false。

2.22 inputPlaceholder 输入框的占位符,类型为 string,无默认值。

2.23 inputType 输入框的类型,类型为 string,默认值 text。

2.24 inputValue 输入框的初始文本,类型为 string,无默认值。

2.25 inputPattern 输入框的校验表达式,类型为 regexp,无默认值。

2.26 inputValidator 输入框的校验函数。可以返回布尔值或字符串,若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage,类型为 function,无默认值。

2.27 inputErrorMessage 未校验通过时的提示文本,类型为 string,默认值输入数据不合法!

2.28 center 是否居中布局,类型为 boolean,默认值 false。

2.29roundButton 是否使用圆角按钮,类型为 boolean,默认值 false。

相关文章:

  • Vue.js 完全指南:从入门到精通
  • 关于deepin上WPS读取windows上的docx文件
  • centos 7 LVM管理命令
  • Vue学习笔记集--pnpm包管理器
  • 数据库学习记录
  • RocketMQ如何保证全链路消息不丢失?
  • docker容器制作和上传
  • Maven插件学习(二)——测试插件maven-surefire-pluigin
  • Linux的一些常见指令
  • 如何查看window电脑的GPU信息
  • docker部署onlyoffice(windows版)
  • Android系统的安全问题 - Android的启动时验证
  • WebGPU 全面解析:下一代 Web 图形与计算 API 的崛起
  • Pytorch学习笔记(六)Learn the Basics - Automatic Differentiation
  • 常见邮件协议
  • 自然语言处理(14:处理时序数据的层的实现)
  • 数学-算法
  • java对象模型
  • Unity游戏开发如何优化移动端的延迟渲染管线?
  • 【NLP 43、文本生成任务】
  • 有哪些企业可以做招聘的网站有哪些方面/线上推广外包公司
  • 织梦网站联系我们的地图怎么做/百度一下你就知道移动首页
  • 网站建设市场分析报告/今日热点新闻一览
  • 自己怎做网站/百度排行
  • 测试网站免费空间/类聚seo
  • 石家庄人力资源和社会保障局/二十条优化疫情措施