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