乐趣区

elementui简单笔记上

jiezi

element-ui 的简单笔记

element-ui 简单笔记(中)
element-ui 简单笔记(下)

关注一下公众号：内有相关文章！！

一、element-ui 简介

1.Element UI 引言

官网:https://element.eleme.io/#/zh-CN

1.1 官方定义

网站快速成型工具 和 桌面端组件库

1.2 定义

element ui 就是基于 vue 的一个 ui 框架, 该框架基于 vue 开发了很多相关组件, 方便我们快速开发页面。

1.3 由来

饿了么前端团队 基于 vue 进行开发并且进行了开源 element ui 中提供全部都是封装好组件。

二、安装 element-ui

2.1 通过 vue 脚手架创建项目

vue init webpack element(项目名)

2.2 在 vue 脚手架项目中安装 elementui

# 1. 下载 elementui 的依赖
    npm i element-ui -S

# 2. 指定当前项目中使用 elementui
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';

  // 在 vue 脚手架中使用 elementui
    Vue.use(ElementUI);

三、按钮组件(示例)


3.1 默认样式按钮

<el-row>
  <el-button> 默认按钮 </el-button>
  <el-button type="primary"> 主要按钮 </el-button>
  <el-button type="success"> 成功按钮 </el-button>
  <el-button type="info"> 信息按钮 </el-button>
  <el-button type="warning"> 警告按钮 </el-button>
  <el-button type="danger"> 危险按钮 </el-button>
</el-row>

3.2 简洁按钮

<el-row>
  <el-button plain> 朴素按钮 </el-button>
  <el-button type="primary" plain> 主要按钮 </el-button>
  <el-button type="success" plain> 成功按钮 </el-button>
  <el-button type="info" plain> 信息按钮 </el-button>
  <el-button type="warning" plain> 警告按钮 </el-button>
  <el-button type="danger" plain> 危险按钮 </el-button>
</el-row>

3.3 圆角按钮

<el-row>
  <el-button round> 圆角按钮 </el-button>
  <el-button type="primary" round> 主要按钮 </el-button>
  <el-button type="success" round> 成功按钮 </el-button>
  <el-button type="info" round> 信息按钮 </el-button>
  <el-button type="warning" round> 警告按钮 </el-button>
  <el-button type="danger" round> 危险按钮 </el-button>
</el-row>

3.4 图标按钮

<el-row>
  <el-button icon="el-icon-search" circle></el-button>
  <el-button type="primary" icon="el-icon-edit" circle></el-button>
  <el-button type="success" icon="el-icon-check" circle></el-button>
  <el-button type="info" icon="el-icon-message" circle></el-button>
  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>

四、按钮组件的详细使用

总结: 日后使用 element ui 的相关组件时需要注意的是 所有组件都是 el- 组件名称开头

4.1 创建按钮

<el-button> 默认按钮 </el-button>

4.2 按钮属性使用

<el-button type="primary" 属性名 = 属性值 > 默认按钮 </el-button>
<el-button type="success" size="medium" plain=true round circle icon="el-icon-loading"></el-button>

总结: 在 elementui 中所有组件的属性全部写在组件标签上

4.3 按钮组使用

<el-button-group>
  <el-button type="primary" icon="el-icon-back"> 上一页 </el-button>
  <el-button type="primary" icon="el-icon-right"> 下一页 </el-button>
</el-button-group>

注意:

  • 在 element ui 中所有组件都是 el- 组件名称 方式进行命名
  • 在 element ui 中组件的属性使用 都是直接将属性名 = 属性值方式写在对应的组件标签上

五、Link 文字链接组件

5.1 文字链接组件的创建

<el-link> 默认链接 </el-link>

5.2 文字链接组件的属性的使用

<el-link  target="_blank" href="http://www.baidu.com" > 默认链接 </el-link>
<el-link type="primary":underline="false"> 默认链接 </el-link>
<el-link type="success" disabled> 默认链接 </el-link>
<el-link type="info" icon="el-icon-platform-eleme"> 默认链接 </el-link>
<el-link type="warning"> 默认链接 </el-link>
<el-link type="danger"> 默认链接 </el-link>

六、Layout(栅格)布局组件

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

在 element ui 中布局组件将页面划分为多个行 row, 每行最多分为 24 栏(列)

6.1 使用 Layout 组件

<el-row>
    <el-col :span="8"> 占用 8 份 </el-col>
  <el-col :span="8"> 占用 8 份 </el-col>
  <el-col :span="8"> 占用 8 份 </el-col>
</el-row>

注意:

  • 在一个布局组件中 是由 row 和 col 组合而成
  • 在使用时要区分 row 属性 和 col 属性

6.2 属性的使用

  • 行属性使用

    <el-row :gutter="50" tag="span">
  <el-col :span="4"><div style="border: 1px red solid;"> 占用 4 份 </div></el-col>
  <el-col :span="8"><div style="border: 1px red solid;"> 占用 8 份 </div></el-col>
  <el-col :span="3"><div style="border: 1px red solid;"> 占用 3 份 </div></el-col>
  <el-col :span="9"><div style="border: 1px red solid;"> 占用 9 份 </div></el-col>
</el-row>

  • 列属性的使用

    <el-row>
  <el-col :span="12" :offset="9" :psuh="3" xs><div style="border: 1px blue solid;"> 我是占用 12 分 </div></el-col>
  <el-col :span="6"><div style="border: 1px blue solid;"> 我是占用 6 分 </div></el-col>
</el-row>

七、Container 布局容器组件

7.1 创建布局容器

<el-container>
    
</el-container>

7.2 容器中包含的子元素

<el-header>：顶栏容器。<el-aside>：侧边栏容器。<el-main>：主要区域容器。<el-footer>：底栏容器。

7.3 容器的嵌套使用

<!-- 创建容器 -->
<el-container>
  <!--header-->
  <el-header><div><h1> 我是标题 </h1></div></el-header>
  <!-- 容器嵌套使用 -->
  <el-container>
    <!--aside-->
    <el-aside><div><h1> 我是菜单 </h1></div></el-aside>
    <!--main-->
    <el-main><div><h1> 我是中心内容 </h1></div></el-main>
  </el-container>
  <el-footer><div><h1> 我是页脚 </h1></div></el-footer>
</el-container>

7.4 水平容器

<el-container direction="horizontal">
  <!--header-->
  <el-header><div><h1> 我是标题 </h1></div></el-header>
  <el-container>
    <!--aside-->
    <el-aside><div><h1> 我是菜单 </h1></div></el-aside>
    <!--main-->
    <el-main><div><h1> 我是中心内容 </h1></div></el-main>
  </el-container>
  <el-footer><div><h1> 我是页脚 </h1></div></el-footer>
</el-container>

注意: 当子元素中没有有 el-header 或 el-footer 时容器排列为水平

7.5 垂直容器

<el-container direction="vertical">
  <!--header-->
  <el-header><div><h1> 我是标题 </h1></div></el-header>
  <el-container>
    <!--aside-->
    <el-aside><div><h1> 我是菜单 </h1></div></el-aside>
    <!--main-->
    <el-main><div><h1> 我是中心内容 </h1></div></el-main>
  </el-container>
  <!--footer-->
  <el-footer><div><h1> 我是页脚 </h1></div></el-footer>
</el-container>

element-ui 的组件太多了，我也就是把我最近练习的给记录下来，其余的这里就不再一一介绍了，大家有需要的可以看文档，自行去测试。谢谢！！！

退出移动版