element-UI笔记

饿了么脑瘫-UI官网

教学视频（ B站 ）

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

Ui库：-- Element-Ui

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

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：底栏容器

界面布局

先划分区域

去 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