ElementUI

最新推荐文章于 2025-03-30 19:03:25 发布

kikpin

最新推荐文章于 2025-03-30 19:03:25 发布

阅读量2k

点赞数

分类专栏： elemet-ui 文章标签： element-ui

elemet-ui 专栏收录该内容

0 篇文章

订阅专栏

本文详细介绍了ElementUI的基础使用，包括安装、引入、配置、国际化和自定义主题等。深入讲解了各种组件，如布局、按钮、表单控件、通知和导航等，提供了丰富的属性和用例，帮助开发者更好地理解和应用ElementUI。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ElementUI

基础
组件
Data
Notice
Navigation
Others

基础

安装

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'

引入

整体引入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'，样式文件需单独引用
Vue.use(ElementUI)
按需引入
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官网

配置

全局配置

import Element from 'element-ui'
// size改变组件默认尺寸，默认small，zIndex设置弹框默认zIndex，默认2000
Vue.use(Element,{size:'small',zIndex:'3000'})

按需配置

import {Button} from 'element-ui'
Vue.prototype.$ELEMENT = {size:'small',zIndex:'3000'}
Vue.use(Button)

国际化

默认中文，以英文为例

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

自定义主题

在线主题生成工具

内置过渡动画

fade淡入淡出
zoom缩放
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-container> 当子元素包含el-header和el-footer时，全部子元素垂直上下排列，否则水平排列
<el-header> 顶栏
<el-aside> 侧边栏
<el-main> 主要容器
<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单选框

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

el-checkbox多选框

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

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

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

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

el-input前置后置图标：属性prefix-icon=‘iconName’，suffix-icon='iconName’或插入元素<i slot='suffix/prefix' class='iconName'>
slot指定前置后置内容：

<!-- 文本 -->
<template slot='prepend'>前缀如HTTP://</template>
<template slot='append'>后缀如.com</template>
<!-- 前缀下拉 -->
<el-select slot='prepend'>
    <el-option label='显示内容' value='提交内容'></el-option>
</el-select>
<!-- 后缀按钮 -->
<el-button slot='append' icon='iconName'></el-button>

尺寸：size=‘large/small/mini’
el-autocomplete输入建议，属性:fetch-suggestions’返回建议’的方法，或内部<template slot-scope="{item}">，或远程服务器建议：通过:fetch-suggestions回调方法
el-input属性：

参数	说明	值
type	类型	text/textarea/原生类型
v-model	绑定值	Str
rows	对于textarea的行数	Number
autosize	对于textarea的自适应高度,传参｛minRows:1,maxRows:10｝	t/f
clearable	是否可清空	t/f
disabled	是否可用	t/f
size	输入框尺寸	medium/small/mini
prefix-icon	头部图标	str
suffix-icon	尾部图标	str
resize	是否可缩放	none/both/horizontal/vertical
validate-event	是否触发校验	t/f

el-input的methods:focus,blur,select
el-input事件：blur,focus,change,clear
el-autocomplete属性：value,label,prefix-icon,suffix-icon,hide-loading是否隐藏远程加载图标,disabled,value-key,debounce='300’去抖延迟,placement='top/top-start/top-end/bottom/bottom-start/bottom-end’菜单弹出位置,fetch-suggestions回调内容,popper-class下拉列表类名,trigger-on-focus是否focus时显示建议列表,select-when-unmatched未匹配内容时回车是否触发select事件，popper-append-to-body是否将下拉列表插入body，当定位出问题时设false
el-autocomplete事件：select
el-autocomplete的methods：focus
slot=‘prefix/suffix/prepend/append’

el-input-number 计数器

<el-input-number v-model='num' @change='fn' :min='0' :max='10' label='描述文字'></el-input-number>

属性：value/v-model,min.max,step,precision精度,size,disabled,controls是否使用控制按钮,controls-position位置,label
方法：change,blur,focus
Methods：focus,select

el-select选择器

v-model的值为el-option的value
分组：<el-option-group v-for='list' :label='分类名'>,对数据结构的处理
<el-select filterable>可搜索
<el-select filterable remote :remote-method='fn'>远程服务器搜索,fn方法调用
<el-select filterable allow-create>允许自创建条目

el-select属性：value/v-model,size,popper-class下拉列表类名,multiple是否多选,disabled,value-key,clearable是否可清空,collapse-tags多选时是否折叠数字显示,multiple-limit,autocomplete,filterable是否可搜索,filter-method自定义搜索方法,remote是否可远程搜索,remote-method,allow-create是否可自创建条目,loading,loading-text加载时显示文字,no-match-text,no-data-text,reserve-keyword多选并可搜索时是否保留当前搜索关键词,popper-append-to-body是否弹出框插入body元素，automatic-dropdown是否自动弹出选项菜单
el-select事件：change,blur,focus,visible-change,remove-tag多选时移除tag触发
slot=‘prefix’
el-select-group属性：label,disabled
el-option属性：value,label,disabled
Methods：focus,blur

el-cascader级联选择器

为el-cascader的:option指定数据即可渲染，通过expand-trigger可以定义触发方式，:show-all-levels显示完整路径或最后一项，数据中selectedOptions指定默认项，change-on-select选择即改变，@active-item-change事件动态加载子项，filterable是否可搜索功能；

el-cascader属性：v-model,options数据源,props,value选中项,separator选项分隔符,popper-class自定义浮层类名,disabled,clearable,expand-trigger触发方式,show-all-levels是否完整路径,filterable是否可搜索,debounce去抖延迟,change-on-select是否允许选择任意一级的选项,size尺寸,before-filter筛选之前的钩子
el-cascader的props：value,label,children,disabled
el-cascader的事件：change,active-item-change当change-on-select=false时父级选项变化时触发,blur,focus,visible-change下拉框出现/隐藏时触发

el-switch开关

默认蓝色，使用active-color设置开背景色，inactive-color设置关背景色，active-text设置开文字描述，inactive-color设置关文字描述，active-value和inactive-value设置值，disabled禁用

el-switch属性：v-model,disabled,width,active-icon-class,inactive-icon-class(会忽略active-text项),active-text,inactive-text,active-value,inactive-value,active-color,inactive-ccolor
el-switch事件：change
Methods：focus

el-slider滑块

:show-tooltip是否提示文字，:format-tooltip='fn格式化提示文字，disabled禁用，step改变步长，show-stops是否显示断点，show-input是否显示右侧输入框，range是否开启范围选择，vertical竖向模式(height必须设置)

el-slider属性：v-model,min,max,disabled,step,show-input,show-input-controls,input-size=‘large/medium/small/mini’,show-stops,show-tooltip,format-tooltip,range,vertical,height,label,debounce,tooltip-class

el-slider事件：change

el-time-select时间选择 el-time-picker任意时间选择

<el-time-select
    v-model=""
    :picker-options="{
        start:'8:30',
        step:'00:15',
        end:'18:30'
        //与第一个
        minTime:startTime
    }"
></el-time-select>

el-time-picker的selectableRange可选时间范围，arrow-control属性箭头选择(默认滚轮)，is-range可选择任意时间范围，

el-time-select属性：v-model,readonly,disabled,editable,size,start-placeholder,end-placeholder,is-range,arrow-control,align,popper-class,picker-options,range-separator,value-format,default-value,prefix-icon头部图标类名,clear-icon清空图标类名