点击查询Element完整组件列表
完整引入 Element :
1.npm i element-ui -S
2.import ElementUI from 'element-ui'
按需引入 Element :
1.安装 babel-plugin-component:
npm install babel-plugin-component -D
2.然后,将 .babelrc 修改为:
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
3.接下来,如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:
import { Button, Select } from 'element-ui';
Vue.use(Button)
Vue.use(Select)
/* 或写为
* Vue.component(Button.name, Button);
* Vue.component(Select.name, Select);
*/
全局配置
在引入 Element 时,可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸,zIndex 设置弹框的初始 z-index(默认值:2000)。按照引入 Element 的方式,具体操作如下:
完整引入 Element:
import Vue from 'vue';
import Element from 'element-ui';
Vue.use(Element, { size: 'small', zIndex: 3000 });
基于断点的隐藏类
Element 额外提供了一系列类名,用于在某些条件下隐藏元素。这些类名可以添加在任何 DOM 元素或自定义组件上。如果需要,请自行引入以下文件:
import 'element-ui/lib/theme-chalk/display.css';
包含的类名及其含义为:
hidden-xs-only - 当视口在 xs 尺寸时隐藏
hidden-sm-only - 当视口在 sm 尺寸时隐藏
hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏
hidden-sm-and-up - 当视口在 sm 及以上尺寸时隐藏
hidden-md-only - 当视口在 md 尺寸时隐藏
hidden-md-and-down - 当视口在 md 及以下尺寸时隐藏
hidden-md-and-up - 当视口在 md 及以上尺寸时隐藏
hidden-lg-only - 当视口在 lg 尺寸时隐藏
hidden-lg-and-down - 当视口在 lg 及以下尺寸时隐藏
hidden-lg-and-up - 当视口在 lg 及以上尺寸时隐藏
hidden-xl-only - 当视口在 xl 尺寸时隐藏
Row 属性介绍
参数 说明
gutter 栅格间隔
type 布局模式,可选 flex,现代浏览器下有效
justify flex 布局下的水平排列方式 start/end/center/space-around/space-between 默认start
align flex 布局下的垂直排列方式 top/middle/bottom 默认top
tag 自定义元素标签 string * div
Col 属性介绍
参数 说明
span 栅格占据的列数
offset 栅格左侧的间隔格数
push 栅格向右移动格数
pull 栅格向左移动格数
xs <768px 响应式栅格数或者栅格属性对象
sm ≥768px 响应式栅格数或者栅格属性对象
md ≥992px 响应式栅格数或者栅格属性对象
lg ≥1200px 响应式栅格数或者栅格属性对象
xl ≥1920px 响应式栅格数或者栅格属性对象
tag 自定义元素标签
Container Attributes
参数 说明
direction 子元素的排列方向 horizontal / vertical 子元素中有 el-header 或 el-footer 时为 vertical,否则为
Header Attributes
参数 说明
height 顶栏高度 60px
Aside Attributes
参数 说明
width 侧边栏宽度 300px
Footer Attributes
参数 说明
height 底栏高度 60px
Element把一行分成24个单元
按钮样式
button
button
button
button
被禁用的按钮
文字按钮
文字按钮
文字按钮
图标按钮
搜索
上传
默认按钮
中等按钮
小型按钮
超小按钮
按钮组
上一页
下一页
选项组
选项1
选项2
选项3
按钮选项组
选项1
选项2
选项3
带有边框的选项组
北京
上海
广州
多选框组(多选框的v-model要用数组的形式来表示)
北京
上海
广州
全选绑定
全选
{{city}}
惊
鸿
御
风