Vue学习日记36

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