kikpin
kikpin

ElementUI

ElementUI

  • 基础
    • 安装
    • 引入
    • 配置
    • 国际化
    • 自定义主题
    • 内置过渡动画
  • 组件
    • layout布局
    • el-row属性
    • el-col属性
    • el-container布局容器
      • el-container属性
      • el-header属性
      • el-aside属性
      • el-footer属性
    • color色彩
    • el-button按钮 el-button-group按钮组
    • 表单控件
      • el-radio单选框
      • el-checkbox多选框
      • el-input输入框 el-complete输入建议
      • el-input-number 计数器
      • el-select选择器
      • el-cascader级联选择器
      • el-switch开关
      • el-slider滑块
      • el-time-select时间选择 el-time-picker任意时间选择
      • el-date-picker 任意日期选择器（以下留坑中）
      • el-upload 上传
      • el-rate 评分
      • el-form表单
  • Data
    • table表格
    • Tag标签
    • Progress进度条
    • Pagination分页
    • Badge标记
  • Notice
    • Alert警告
    • Loading加载
    • MessageBox弹窗
    • Notification通知
  • Navigation
    • NavMenu导航菜单
    • Tabs标签页
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Steps步骤条
  • Others
    • Dialog对话框
    • Tooltip文字提示
    • Popover弹出框
    • Card卡片
    • Carousel走马灯
    • Collapse折叠面板
    • Timeline时间线

基础

安装

npm i element-ui --save-dev
或者CND在线
引用样式link rel='stylesheet' href='https://unpkg.com/lib/theme-chalk/index.html'
引用组件库script src='https://unpkg.com/element-ui/lib/index.js'

引入

  1. 整体引入
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'，样式文件需单独引用
    Vue.use(ElementUI)
  2. 按需引入
    npm i babel-plugin-component -D，然后修改.babelrc
// .babelrc
{
    'presets':[['es2015',{'modules':false}]],
    'plugins':[
        [
            'component',
            {
                'libraryName':'element-ui',
                'styleLibraryName':'theme-chalk'
            }
        ]
    ]
}

在main.js中引入

// main.js
import {Button,Select} from 'element-ui'
Vue.component(Button.name,Button)
Vue.component(Select.name,Select)
// 或者
// Vue.use(Button) 
// Vue.use(Select)

完整内容见，element官网

配置

  1. 全局配置
import Element from 'element-ui'
// size改变组件默认尺寸，默认small，zIndex设置弹框默认zIndex，默认2000
Vue.use(Element,{size:'small',zIndex:'3000'})
  1. 按需配置
import {Button} from 'element-ui'
Vue.prototype.$ELEMENT = {size:'small',zIndex:'3000'}
Vue.use(Button)

国际化

默认中文，以英文为例

  1. 全局
    import locale from 'element-ui/lib/locale/lang/en'
    Vue.use(ElementUI,{locale})
  2. 按需
    import lang from 'element-ui/lib/locale/lang/en'
    import locale from 'element-ui/lib/locale'
    locale.use(lang)

自定义主题

在线主题生成工具

内置过渡动画

  1. fade淡入淡出
  2. zoom缩放
  3. collapse展开折叠

组件

layout布局

通过flex布局，采用xs,sm,md,lg,xl五个尺寸；
断点隐藏类，引入import 'element-ui/lib/theme-chalk/display.css'，如下

  • hidden-xs/sm/md/lg/xl-only 当前尺寸隐藏
  • hidden-sm/md/lg-and-down 以下尺寸隐藏
  • hidden-sm/md/lg-and-up 以上尺寸隐藏

el-row属性

  • gutter=‘number’ 间隔
  • type=‘flex’ 可选项，布局模式
  • justify=‘start/end/center/space-around/space-between’ 水平排列方式
  • align=‘top/middle/bottom’ 垂直排列方式
  • tag=‘Str’ 自定义标签

el-col属性

  • span=‘number’ 栅格占据列数
  • offset=‘number’ 左侧间隔格数
  • push=‘number’ 右移动格数
  • pull=‘number’ 左移动格数
  • xs <768px
  • sm >=768px
  • md >=992px
  • lg >=1200px
  • xl >=1920px
  • tag 自定义元素标签

el-container布局容器

当子元素包含el-header和el-footer时，全部子元素垂直上下排列，否则水平排列
顶栏
侧边栏
主要容器
底栏

el-container属性

direction=‘horizontal/vertical’

el-header属性

默认：height=‘60px’

el-aside属性

默认：width=‘300px’

el-footer属性

默认：height=‘60px’

color色彩

blue主色#409eff,success#67c23a,warning#e6a23c,danger#f56c6c,info#909399
中性色：主要文字#303133，常规文字#606266，次要文字#909399，占位文字#c0c4cc，边框一级#dcdfe6，二级#e4e7ed，三级#ebeef5，四级#f2f6fc

el-button按钮 el-button-group按钮组

  • size=‘medium/small/mini’ 尺寸
  • type=‘primary/success/warning/danger/info/text’ 类型
  • plain 是否朴素按钮
  • round 是否圆角按钮
  • circle 是否圆形按钮
  • loading 是否加载中状态
  • disabled 是否禁用状态
  • icon=‘str’ 图标按钮
  • autofocus 是否默认聚焦
  • native-type=‘button/submit/reset’ 原生type属性

表单控件

el-radio单选框

  1. 单选框 ，v-model='radio' label='value'，单选框组，返回value值，单选框按钮
  2. el-radio属性：v-model,label=‘value’,disabled是否禁用,border是否显示边框,size=‘medium/small/mini’,name原生属性
  3. el-radio事件：change
  4. el-radio-group属性：v-model,size,disabled,text-color激活时文本颜色,fill激活时填充色和边框色
  5. el-radio-group事件：change
  6. el-radio-button属性：label,disabled,name

el-checkbox多选框

  1. 单独使用,多选框组,统一绑定v-model,min和max指定被勾选数目限制,其中子元素label可以当显示内容
  2. indeterminate不确定状态，用于‘全选’效果，
  3. 多选框按钮,size=‘medium/small/mini’
  4. el-checkbox属性：v-model,label选中状态的值,true-label选中时的值,false-label没有选中时的值,disabled,border是否显示边框,size,name,checked,indeterminate第三‘不确定’状态
  5. el-checkbox事件：change
  6. el-checkbox-group属性：v-model,size,disabled,min,max,text-color激活时文本色,fill激活时填充色和边框色
  7. el-checkbox-group事件：change
  8. el-checkbox-button属性：label,true-label,false-label,disabled,name,checked是否勾选

el-input输入框 el-complete输入建议

  1. el-input文本；el-input type='textarea’文本域，rows属性控制高度，autosize自适应文本高度，并能指定最小最大高度；

autosize=’{minRows:2,maxRows:10}’

  1. el-input前置后置图标：属性prefix-icon=‘iconName’，suffix-icon='iconName’或插入元素
  2. slot指定前置后置内容：

<template slot='prepend'>前缀如HTTP://template>
<template slot='append'>后缀如.comtemplate>

<el-select slot='prepend'>
    <el-option label='显示内容' value='提交内容'>el-option>
el-select>

<el-button slot='append' icon='iconName'>el-button>

  1. 尺寸：size=‘large/small/mini’

  2. el-autocomplete输入建议，属性:fetch-suggestions’返回建议’的方法，或内部