elementui列表组件 element 组件

目录

一、安装 element-ui

二、Vue 中引入 Element

三、Element-Helper 插件

四、Element 基础组件

1、Layout 布局

2、Container 布局

3、Typography 字体

4、Border  边框

5、Icon  图标

6、Button  按钮

7、Link 文字链接

el-row 行组件、el-col 列组件
el-col 列组件有个 span 属性，设置列数，默认 24 列
el-row 行组件 gutter 属性 (设置每列之间的间隔)、type 属性 (设置布局方式可选 flex 布局)、justify 属性 ( flex 布局下设置水平排列方式)、align 属性 ( flex 布局下设置垂直排列方式)、tag 属性 (自定义行标签，默认 div)
space-between 两端对齐，项目两侧间隔相等
space-around 项目两侧间隔相等，项目与项目之间的间隔比项目与边框之间的间隔大一倍

五个响应尺寸：xs(<768px)、sm(>=768px)、md(>=992px)、lg(>=1200px)、xl(>=1920px)

box-shadow: h-shadow v-shadow blur spread color inset;  blur 阴影模糊值

一、安装 element-ui

npm install element-ui -S

// 建议指定版本号安装，以免升级受到非兼容性的影响
npm install element-ui@2.13.2 -S

二、Vue 中引入 Element

// Vue main.js 中引入
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Element)

三、Element-Helper 插件

element-helper（元素助手） 是一款 Element 插件，集成了文档浏览、代码片段、自动补全的功能

四、Element 基础组件

1、Layout 布局

row 行组件、col 列组件，col 组件 span 属性设置列数，默认 24 列
row 行组件 gutter 属性设置每列之间的间隔（需要在 col 组件里设置 div 以及背景色），默认间隔为 0

<el-row :gutter="20">
  <el-col :span="8"><div class="bg-purple"></div></el-col>
  <el-col :span="8"><div class="bg-purple"></div></el-col>
  <el-col :span="8"><div class="bg-purple"></div></el-col>
</el-row>

row 行组件有 gutter、type、justify、align、tag 属性

• gutter 设置每列间隔
• type 设置布局方式，可选 flex 布局
• justify 在 flex 布局下水平排列方式，可选值有 start(默认值) / end / center / space-around(每个项目两侧的间隔相等，项目之间的间隔比项目与边框之间的间隔大一倍) / space-between (两端对齐，项目两侧的间隔都相等)
• align 在 flex 布局下垂直排列方式，可选值有 top(默认值) / middle / bottom
• tag 自定义元素标签，默认值 div

col 列组件属性有 span、offset、push、pull 、tag

• span 设置列数最多 24 列
• offset 栅格左侧间隔数（可以理解成向右偏移）
• push 向右移动的间隔数
• pull 向左移动的间隔数
• tag 自定义元素标签，默认 div
• 响应式布局尺寸有 xs(<768px)、sm(>=768px)、md(>=992px)、lg(>=1200px)、xl(>=1920px)

2、Container 布局

• el-container 外层容器采用 flex 布局，el-container 子元素只能是后四者，后四者父元素也只能是 el-container
• el-container 子元素有：el-header 顶栏容器、el-aside 侧边栏容器、el-main 主要区域容器、el-footer 底栏容器
• direction 设置子元素的排列方式，子元素中有 header 或 footer 时为 vertical，否则为 horizontal
• el-header、el-footer 默认高度 60px，el-aside 默认宽度 300px

<el-container>
  <el-header>顶栏容器</el-header>
  <el-container>
    <el-aside width="200px">侧边栏容器</el-aside>
    <el-main>主要区域容器</el-main>
  </el-container>
  <el-footer>底栏容器</el-footer>
</el-container>

3、Typography 字体

辅助文字 12px、正文小 13px，正文 14px，小标题 16px、标题 18px、大标题 20px

body{
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}

4、Border  边框

• 边框：实线 1px、虚线 2px
• 圆角 border-radius：无圆角、小圆角 2px、大圆角 4px、圆形圆角 30px
• 投影 box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)

box-shadow: h-shadow v-shadow blur spread color inset;

5、Icon  图标

• 图标通过设置类名 el-icon-iconName 使用
• 图标在右侧使用 i 标签增加 css 类 el-icon-date el-icon--right

<el-button type="primary" class="el-icon-search">搜索</el-button>
<el-button type="primary">日期<i class="el-icon--right el-icon-date"></i></el-button>

6、Button  按钮

• <el-button> 按钮组件、<el-button-group> 按钮组组件
• type 属性设置按钮主题色，值有 primary / success / warning / danger / info / text（纯文本按钮）
• 按钮形状设置 plain（朴素按钮带边框）、round（圆角按钮 30px ）、circle（圆形按钮）属性
• size 定义按钮尺寸，值有 medium / small / mini
• 禁用状态 disabled，可以使用 disabled 属性来定义按钮或文字是否可用，它接受一个 boolean 值
• loading 状态（按钮形式加载中），只需要设置 loading 属性值为 true
• native-type 原生 type 属性，可选值有 button（按钮） / submit（提交） / reset（重置），默认 button
• autofocus 页面加载时 input 元素会自动获得焦点，默认 false。autofocus 是 HTML5 新特性

<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success" plain>朴素按钮</el-button>
<el-button type="warning" round>圆角按钮</el-button>
<el-button class="el-icon-star-off" circle></el-button>
<el-button type="danger">危险按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
<el-button type="primary" :loading="true">加载中</el-button>
<el-button type="text">文字按钮</el-button>

<el-button-group>
  <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
  <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>

7、Link 文字链接

• <el-link> 文字链接组件，默认有下划线

• type 属性设置按钮的注意色，值有 primary / success / warning / danger / info
• 鼠标移到文字链接上默认带下划线，设置 :underline="false" 取消文字链接下划线
• href 属性实现页面跳转

<el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
<el-link type="primary">主要链接</el-link>
<el-link type="success" disabled>成功链接</el-link>
<el-link :underline="false">无下划线</el-link>
<el-link>有下划线</el-link>
<el-link icon="el-icon-edit">编辑</el-link>
<el-link>查看<i class="el-icon-view el-icon--right"></i> </el-link>