完整引入

  1. import Vue from 'vue';
  2. import ElementUI from 'element-ui';
  3. import 'element-ui/lib/theme-chalk/index.css';
  4. import App from './App.vue';
  6. Vue.use(ElementUI);
  8. new Vue({
  9.   el: '#app',
  10.   render: h => h(App)
  11. });

全局配置

  1. import Vue from 'vue';
  2. import Element from 'element-ui';
  3. Vue.use(Element, { size: 'small', zIndex: 3000 });

size为组件默认尺寸 z-index为弹出框位置

自定义主题

https://element.eleme.cn/#/zh-CN/component/custom-theme

过渡动画

使用translation标签 以及 class=translation-box

fade

提供el-fade-in-linear 和 el-fade-in 两种效果。

zoom

提供 el-zoom-in-center，el-zoom-in-top 和 el-zoom-in-bottom 三种效果。

basic

layout

https://element.eleme.cn/#/zh-CN/component/layout

色彩

https://element.eleme.cn/#/zh-CN/component/color

字体

https://element.eleme.cn/#/zh-CN/component/typography

  • line-height:1 无行高
  • line-height:1.3 紧凑
  • line-height:1.5 常规
  • line-height:1.7 宽松

image.png

边框

https://element.eleme.cn/#/zh-CN/component/border

图标

https://element.eleme.cn/#/zh-CN/component/border

按钮

https://element.eleme.cn/#/zh-CN/component/button

文字链接

https://element.eleme.cn/#/zh-CN/component/link

form