标签：MessageBox Vue 自定义 36 栅格 message 解析 日记 属性

1.p:last-child
解析：
[1]:last-child选择器用来匹配父元素中最后一个子元素
[2]p:last-child等同于p:nth-last-child(1)

2.基于断点的隐藏类
解析：import ‘element-ui/lib/theme-chalk/display.css’;
[1]hidden-xs-only：当视口在xs尺寸时隐藏
[2]hidden-sm-only：当视口在sm尺寸时隐藏
[3]hidden-sm-and-down：当视口在sm及以下尺寸时隐藏
[4]hidden-sm-and-up：当视口在sm及以上尺寸时隐藏
[5]hidden-md-only：当视口在md尺寸时隐藏
[6]hidden-md-and-down：当视口在md及以下尺寸时隐藏
[7]hidden-md-and-up：当视口在md及以上尺寸时隐藏
[8]hidden-lg-only：当视口在lg尺寸时隐藏
[9]hidden-lg-and-down：当视口在lg及以下尺寸时隐藏
[10]hidden-lg-and-up：当视口在lg及以上尺寸时隐藏
[11]hidden-xl-only：当视口在xl尺寸时隐藏

3.Layout行属性
解析：
[1]gutter：栅格间隔
[2]type：布局模式，可选flex，现代浏览器下有效
[3]justify：flex布局下的水平排列方式
[4]align：flex布局下的垂直排列方式
[5]tag：自定义元素标签

4.Layout列属性
解析：
[1]span：栅格占据的列数
[2]offset：栅格左侧的间隔格数
[3]push：栅格向右移动格数
[4]pull：栅格向左移动格数
[5]xs：<768px响应式栅格数或者栅格属性对象
[6]sm：≥768px响应式栅格数或者栅格属性对象
[7]md：≥992px响应式栅格数或者栅格属性对象
[8]lg：≥1200px响应式栅格数或者栅格属性对象
[9]xl：≥1920px响应式栅格数或者栅格属性对象
[10]tag：自定义元素标签

5.PageHeader页头
解析：如果页面的路径比较简单，推荐使用页头组件而非面包屑组件。

6.PageHeader页头属性
解析：
[1]title：标题
[2]content：内容

7.PageHeader页头事件
解析：
[1]back：点击左侧区域触发

8.PageHeader页头Slots
解析：
[1]title：标题内容
[2]content：内容

9.Breadcrumb面包屑
解析：显示当前页面的路径，快速返回之前的任意页面。

10.Breadcrumb属性
解析：
[1]separator：分隔符
[2]separator-class：图标分隔符class

11.BreadcrumbItem属性
解析：
[1]to：路由跳转对象，同vue-router的to
[2]replace：在使用to进行路由跳转时，启用replace将不会向history添加新记录

12.Container布局容器
解析：
[1]direction：子元素的排列方向
[2]height：顶栏高度
[3]width：侧边栏宽度
[4]height：底栏高度

13.Vue 3.x中的setup
解析：setup函数会在beforeCreate之后，created之前执行。

14.Message属性
解析：

[1]message：消息文字
[2]type：主题
[3]iconClass：自定义图标的类名，会覆盖type
[4]dangerouslyUseHTMLString：是否将message属性作为HTML片段处理
[5]customClass：自定义类名
[6]duration：显示时间,毫秒。设为0则不会自动关闭
[7]showClose：是否显示关闭按钮
[8]center：文字是否居中
[9]onClose：关闭时的回调函数,参数为被关闭的message实例
[10]offset：Message距离窗口顶部的偏移量

15.Message方法
解析：调用Message或this.$message会返回当前Message的实例。如果需要手动关闭实例，可以调用它的close方法。
[1]close：关闭当前的Message

16.MessageBox全局方法
解析：如果完整引入Element，它会为Vue.prototype添加如下全局方法：$msgbox、$alert、$confirm和$prompt。因此在Vue instance中可以采用本页面中的方式调用MessageBox。调用参数为：

$msgbox(options)
$alert(message, title, options) 或 $alert(message, options)
$confirm(message, title, options) 或 $confirm(message, options)
$prompt(message, title, options) 或 $prompt(message, options)

17.MessageBox属性
解析：

[1]title：MessageBox标题
[2]message：MessageBox消息正文内容
[3]dangerouslyUseHTMLString：是否将message属性作为HTML片段处理
[4]type：消息类型，用于显示图标
[5]iconClass：自定义图标的类名，会覆盖type
[6]customClass：MessageBox的自定义类名
[7]callback：若不使用Promise，可以使用此参数指定MessageBox关闭后的回调
[8]showClose：MessageBox是否显示右上角关闭按钮
[9]beforeClose：MessageBox关闭前的回调，会暂停实例的关闭
[10]distinguishCancelAndClose：是否将取消[点击取消按钮]与关闭[点击关闭按钮或遮罩层、按下ESC键]进行区分
[11]lockScroll：是否在MessageBox出现时将body滚动锁定
[12]showCancelButton：是否显示取消按钮
[13]showConfirmButton：是否显示确定按钮
[14]cancelButtonText：取消按钮的文本内容
[15]confirmButtonText：确定按钮的文本内容
[16]cancelButtonClass：取消按钮的自定义类名
[17]confirmButtonClass：确定按钮的自定义类名：
[18]closeOnClickModal：是否可通过点击遮罩关闭MessageBox
[19]closeOnPressEscape：是否可通过按下ESC键关闭MessageBox
[20]closeOnHashChange：是否在hashchange时关闭MessageBox
[21]showInput：是否显示输入框
[22]inputPlaceholder：输入框的占位符
[23]inputType：输入框的类型
[24]inputValue：输入框的初始文本
[25]inputPattern：输入框的校验表达式
[26]inputValidator：输入框的校验函数。可以返回布尔值或字符串，若返回一个字符串,则返回结果会被赋值给inputErrorMessage
[27]inputErrorMessage：校验未通过时的提示文本
[28]center：是否居中布局
[29]roundButton：是否使用圆角按钮

18.Notification通知属性
解析：

[1]title：标题
[2]message：说明文字
[3]dangerouslyUseHTMLString：是否将message属性作为HTML片段处理
[4]type：主题样式，如果不在可选值内将被忽略
[5]iconClass：自定义图标的类名。若设置了type，则iconClass会被覆盖：
[6]customClass：自定义类名
[7]duration：显示时间,毫秒。设为0则不会自动关闭
[8]position：自定义弹出位置
[9]showClose：是否显示关闭按钮
[10]onClose：关闭时的回调函数
[11]onClick：点击Notification时的回调函数
[12]offset：偏移的距离，在同一时刻，所有的Notification实例应当具有一个相同的偏移量

19.Notification方法
解析：调用Notification或this.$notify会返回当前Notification的实例。如果需要手动关闭实例，可以调用它的close方法。
[1]close：关闭当前的Notification

20.Menu菜单属性
解析：

[1]mode：模式
[2]collapse：是否水平折叠收起菜单[仅在mode为vertical时可用]
[3]background-color：菜单的背景色[仅支持hex格式]
[4]text-color：菜单的文字颜色[仅支持hex格式]
[5]active-text-color：当前激活菜单的文字颜色[仅支持hex格式]
[6]default-active：当前激活菜单的index
[7]default-openeds：当前打开的sub-menu的index的数组
[8]unique-opened：是否只保持一个子菜单的展开
[9]menu-trigger：子菜单打开的触发方式[只在mode为horizontal时有效]
[10]router：是否使用vue-router的模式，启用该模式会在激活导航时以index作为path进行路由跳转
[11]collapse-transition：是否开启折叠动画

21.Menu方法
解析：
[1]open：展开指定的sub-menu
[2]close：收起指定的sub-menu

22.Menu菜单事件
解析：
[1]select：菜单激活回调
[2]open：sub-menu展开的回调
[3]close：sub-menu收起的回调

23.SubMenu子菜单属性
解析：

[1]index：唯一标志
[2]popper-class：弹出菜单的自定义类名
[3]show-timeout：展开sub-menu的延时
[4]hide-timeout：收起sub-menu的延时
[5]disabled：是否禁用
[6]popper-append-to-body：是否将弹出菜单插入至body元素。在菜单的定位出现问题时，可尝试修改该属性

24.Menu-Item属性
解析：
[1]index：唯一标志
[2]route：VueRouter路径对象
[3]disabled：是否禁用

25.Menu-Group属性
解析：
[1]title：分组标题

参考文献：
[1]CSS选择器：https://www.runoob.com/cssref/css-selectors.html
[2]Vue3+TS从入门到精通：https://www.bilibili.com/video/BV1CK411u75G?p=38
[3]vue3-ts-element-plus：https://gitlab.com/hemiahwu/vue3-ts-element-plus

标签：MessageBox,Vue,自定义,36,栅格,message,解析,日记,属性
来源： https://blog.csdn.net/shengshengwang/article/details/114038708

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。