element-plus学习笔记

hy1732855

引入Element-plus(main.js)import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/display.css'
app.use(ElementPlus)
router-link 的下划线去除a {
  text-decoration: none;
}
.router-link-active {
  text-decoration: none;
}

通过CSS实现hover效果控制另一元素
布局
Layout | Element Plus
组件默认使用 Flex 布局，不需要手动设置 type="flex"。
请注意父容器避免使用 inline 相关样式，会导致组件宽度不能撑满。
对齐方式：
默认使用 flex 布局来对分栏进行灵活的对齐。
可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式


Container 布局容器
Container 布局容器 | Element Plus
用于布局的容器组件，方便快速搭建页面的基本结构：
<el-container>：外层容器。 当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列， 否则会水平左右排列。
<el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器。
以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。 此外， <el-container>的直接子元素必须是后四个组件中的一个或多个。 后四个组件的亲元素必须是一个 <el-container>

Icon图标
Link文字链接
Menu 菜单
等等