element-UI笔记

饿了么脑瘫-UI官网

教学视频（ B站 ）

VUE 核心组件（axios（实现ajax）、页面跳转（router）、状态管理）

Ui库：-- Element-Ui

1. 安装：

1. cnpm i element-ui -S
2. cnpm install
3. cnpm run serve
4. cnpm run build

2. Layout 布局

   通过基础的 24 分栏，迅速简便地创建布局。

   通过基础的 24 分栏，迅速简便地创建布局。

   基础布局

   使用单一分栏创建基础的栅格布局。

   分栏布局

   分栏之间存在间隔

   混合布局

   通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。

   分栏偏移

   支持偏移指定的栏数。

   对齐方式

   通过 flex 布局来对分栏进行灵活的对齐。

   响应式布局

   参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。

​ 基于断点的隐藏类

​ Element 额外提供了一系列类名，用于在某些条件下隐藏元素。这些类名可以添加在任何 DOM 元素或自定义组件上。如果需要，请自行引入以下文件：

		import 'element-ui/lib/theme-chalk/display.css';

容器标签：

• el-container ： 外层容器
• el-header ： 顶栏容器
• el-aside ：侧边栏容器
• el-main：主要区域容器
• el-footer：底栏容器

界面布局

1. 先划分区域

2. 去 Element-Ui 官网拷贝代码

   <template>
     <el-tabs v-model="activeName" @tab-click="handleClick">
       <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
       <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
       <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
       <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
     </el-tabs>
   </template>
   <script>
     export default {
       data() {
         return {
           activeName: 'second'
         };
       },
       methods: {
         handleClick(tab, event) {
           console.log(tab, event);
         }
       }
     };
   </script>
   

   type=“flex” //浮动

   justify=“center”

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RbHulIkQ-1603242837555)(/Users/hsk/Library/Application Support/typora-user-images/截屏2020-10-20下午11.41.40.png)]

display：inline-block