简介

element ui 是一个基于vue的ui框架。该框架基于vue开发了很多相关组件，方便页面的快速开发。

1.安装Element UI并通过vue脚手架创建项目

vue init webpack element (项目名)

2、在vue脚手架项目中安装elementui

# 1.下载elementui的依赖。 npm i element-ui -S# 2. 指定要在当前项目中使用的elementui。 import ElementUI from \’element-ui\’; import \’element-ui\’ /lib /theme-chalk/index.css\’; //在vue脚手架中使用elementui Vue.use(ElementUI)

3.按钮组件(示例)

el-row el-button 默认按钮/el-button el-button type=\’ Primary \’主按钮/el-button el-button type=\’success\’ 成功按钮/el-button el-button type=\’info\’ 信息按钮/el- button el-button type=\’warning\’警告按钮/el-button el -button type=\’danger\’危险按钮/el-button/el-row3.2 简单按钮

el-row el-button 普通普通按钮/el-button el-button type=\’primary\’ 普通主按钮/el-button el-button type=\’success\’ 普通成功按钮/el-button el-button type=\’info \’ 普通信息按钮/el-button el-button type=\’warning\’ 普通警告按钮/el-button el-button type=\’danger\’ 普通危险按钮/el-button/el-row3.3 圆形按钮

el-row el-button 圆形圆形按钮/el-button el-button type=\’primary\’ 圆形主按钮/el-button el-button type=\’success\’ 圆形成功按钮/el-button el-button type=\’ 信息\’ 圆形信息按钮/el-button el-button type=\’warning\’ 圆形警告按钮/el-button el-button type=\’danger\’ 圆形危险按钮/el-button/el-row3.4 图标按钮

el-row el-button icon=\’el-icon-search\’ Circle/el-button el-button type=\’primary\’ icon=\’el-icon-edit\’ Circle/el-button el-button type=\’success\’ icon=\’el-icon-check\’ 圆圈/el-button el-button type=\’info\’ icon=\’el-icon-message\’ 圆圈/el-button el-button type=\’warning\’ icon=\’el-icon -star-off\’circle/el-button el-button type=\’danger\’ icon=\’el-icon-delete\’circle/el-button/el-row

3.1 默认样式按钮

摘要： 使用element ui 相关组件时所有组件必须以el-组件名称开头

4.按钮组件的详细使用

el-button 默认按钮/el-button

4.1创建按钮

el-button type=\’primary\’ 属性名称=属性值默认按钮/el-button el-button type 请特别注意。=\’success\’ size=\’medium\’ plain=true round round icon=\’el-icon-loading\’/el-button4.3 如何使用按钮组

el-button-group el-button type=\’primary\’ icon=\’el-icon-back\’上一页/el-button el-button type=\’primary\’ icon=\’el-icon-right\’下一页/el-按钮/el-按钮组。 element ui 的所有组件均使用el-component name 方法命名。元素ui的组件属性以属性名=属性值的方式直接写入对应的组件标签:010 -1010。

4.2 按钮属性使用

el-link 默认链接/el-link

5.Link 文字链接组件

el-link target=\’_blank\’ href=\’http://www.baidu.com\’ 默认链接/el-linkel-link type=\’primary\’:underline=\’false\’默认链接/el-linkel-link type=\’成功\’ 禁用默认链接/el-linkel-link type=\’info\’ icon=\’el-icon-platform-eleme\’默认链接/el-linkel-link type=\’警告\’ default link/el-linkel-link type=\’danger\’ default link/el-link

5.1 文字链接组件的创建

Element ui 布局组件将页面拆分为多行。最多分成24 列

5.2 文字链接组件的属性的使用

el-row el-col :span=\’8\’ 占用8 share/el-col el-col :span=\’8\’ 占用8 share/el-col el-col :span=\’8\’占八个部分。 /el-col/el-row 由布局组件的row 和col 属性组成。

6.Layout (栅格)布局组件的使用

使用el-row 作为行属性。=\’50\’ tag=\’span\’ el-col :span=\’4\’div style=\’border: 1px 纯红；\’ 4 copy/div/el-col el-col :span=\’8\’div style=\’border: 1px 占用红色实体；\’占用8份/div/el-col el-col :span=\’3\’div style=\’border: 1px 红色实体；\’占用3份/div/el-col el-col :span=\’9\’div style=\’border: 1px red body;\’ 9 占用copy/div/el-col/el-row列属性用法

el-row el-col :span=\’12\’ :offset=\’9\’ :psuh=\’3\’ xsdiv style=\’border: 1px blue Solid;\’占用12点/div/el-col el-col :span=\’6\’ div样式=\’border: 1px blue Solid;\’占用6点/div/el-col/el-row

6.1 使用Layout组件

6.2 属性的使用

el-container/el-container7.2 容器包含的子元素

el-header：顶栏容器。 el-aside：侧边栏容器。 el-main：主区域容器。 el-footer：底行容器。 7.3 容器的嵌套使用

!–创建容器–el-container !–header– el-headerdivh1我是title/h1/div/el-header !–使用嵌套容器–el-container !–aside– el-asideivh1我有menu/h1/div/el-aside !–main– el-maindivh1 我有中心内容/h1/div/el-main /el-container el-footerdivh1 我有footer/h1/div/el -footer /el-container7.4 卧式容器

el-container direct=\’水平\’ !–header– el-headerdivh1i 是header/h1/div/el-header el-container !–aside– el-asideivh1i 是menu/h1/div/el -side ! –main– el-maindivh1 我是center content/h1/div/el-main /el-container el-footerdivh1 我是footer/h1/div/el-footer/el-container7.5 垂直容器

el-container Direction=\’vertical\’ !–header– el-headerdivh1i 是header/h1/div/el-header el-container !–aside– el-asideivh1i 是menu/h1/div/el-digression 但是!–main– el-maindivh1I 是中心内容/h1/div/el-main /el-container !–footer– el-footerdivh1I 是页脚/h1/div/el-footer/el-container

7.Container 布局容器组件

7.1 创建布局容器

创建单选按钮

!–创建组件–el-radio v-model=\’label\’ label=\’male\’male/el-radioel-radio v-model=\’label\’ label=\’female\’female/el-radioscript export default { name: \’Radio\’, data(){ return{ label:\’male\’ } } }/scriptRadio按钮属性用法

el-radio v-model=\’label\’ name=\’sex\’ 无效label=\’male\’male/el-radioel-radio v-model=\’label\’ name=\’sex\’ border size=\’small\’ label=\’ Female \’Female/El-Radio El-Radio v-model=\’label\’ 边框尺寸=\’Mini\’ Label=\’Female\’ Female/El-Radio El-Radio v-model=\’Label\’ 边框尺寸=\’Medium\’ Label=“利用女性Elle 电台的女性广播活动”

el-radio v-model=\’label\’ @change=\’aa\’ name=\’sex\’ label=\’male\’male/el-radio el-radio v-model=\’label\’ @change=\’aa\’ name=\’ sex \’ border size=\’small\’ label=\’female\’female/el-radioscript export default { name: \’Radio\’, data(){ return{ label:\’male\’ } },methods:{ aa(){ //定义的事件处理function console.log(this.label); } } }/使用脚本事件直接写入对应的组件标签。如果使用事件，则必须使用绑定时间方法。 Vue 事件名称如@=事件处理函数（与Vue 组件中相应函数关联）

8.Form相关组件

el-radio-group v-model=\’radio\’ el-radio :label=\’3\’ 替代3/el- radio el-radio :label=\’6\’替代6/el-radio el-radio :label=\’9\’替代9/el-radio/el-radio-groupscript 导出默认值{ name: \’radio\’, data() { return { radio: 6 } } }/script

8.1 Radio单选按钮

9、radio按钮组

el-checkbox v-model=\’checked\’北京/el-checkboxel-checkbox v-model=\’checked\’上海/el-checkboxel-checkbox v-model=\’checked\’天津/el -checkbox10.2，属性使用

el-checkbox v-model=\’checked\’ 已禁用true-label=\’北京\’ 北京/el-checkboxel-checkbox checkbox true-label=\’上海\’ 上海/el-checkboxel-checkbox v-model=\’checked\’ true- label=\’Tianjin\’Tianjin/el-checkbox10.3，用于活动

el-checkbox @change=\’aa\’v-model=\’checked\’ true-label=\’上海\’上海/el-checkboxel-checkbox v-model=\’checked\’ @change=\’aa\’ true-label=\’天津\’天津/el-checkboxscript export default { name: \’Checkbox\’, data(){ return{ selected:true } },methods:{ aa(){ console.log(this.checked) } } }/script10.4、使用复选框组法

el-checkbox-group @change=\’bb\’ :min=\’1\’ v-model=\’checkList\’ el-checkbox label=\’复选框A\’/el-checkbox el-checkbox label=\’复选框B\’/el- checkbox el -checkbox label=\’checkbox C\’/el-checkbox el-checkbox label=\’已禁用\’ 已禁用/el-checkbox el-checkbox label=\’选中并已禁用\’ 已禁用/el-checkbox/el-checkbox -groupscript 导出默认值{ name: \’checkbox\’, data(){ return{checked:true, checkList:[], } },methods:{aa(){console.log(this.checked)},bb(){console.log(this.checkList ); /script

10、checkbox组件

10.1、创建checkbox组件

el-input v-model=\’name\’/el-inputscript export default { name: \’Input\’, data(){ return { name:\’xiaochen\’ } } }/script2.

el-input v-model=\’name\’ 无效type=\’textarea\’/el-inputel-input v-model=\’price\’ :maxlength=\’10\’ show-word-limit :minlength=\’5\’/el-inputel-input prefix-icon=\’el-icon-user-solid\’ placeholder=\’请输入您的用户名\’clearable v-model=\’用户名\’/el-inputel-input suffix-icon=\’el-icon-star-off \’ placeholder=\”请输入密码\” show-password type=\’password\’clearable v-model=\’password\’/el-inputscript export default { name: \’Input\’, data() { return {restaurant: [], state1: \’\’, state2: \’ \’ , 名称：\’xiaochen\’, 价格：0.0, 用户名：\’\’, 密码：\’\’, }; 如何使用事件。

el-input v-model=\’username\’ @blur=\’aaa\’ @focus=\’bbb\’ @clear=\’clears\’ 可清除@input=\’ccc\’/el-inputscript 导出默认值{ name: \’Input\’, data( ) { return { Restaurant: [], state1: \’\’, state2: \’\’, name:\’xiaochen\’,price:0.0, username:\’\’,password:\’\’, } },methods:{ aaa(){ console.log(\’失去焦点\’ ) ; }, bbb(){ console.log(\’获取焦点\’) }, ccc(value){ console.log(\’更改：\’+value) },clears(){ console.log(\’清除) \’); } } }/script4.方法使用

使用h1methods/h1el-input v-model=\’username\’ ref=\’inputs\’/el-inputel-button @click=\’focusInputs\’focus method/el-buttonel-button @click=\’blurInputs\’blur method/el – buttonscript export default { name: \’Input\’, data() { return{} },methods:{ //调用焦点方法focusInputs(){ this.$refs.inputs.focus() }, //调用焦点methodBlurInputs (){ this .$refs.inputs.blur(); } }/script 使用组件方法时，必须在对应的组件中添加ref=\’组件别名\’。 Alias.Method name () 注： elementui 中所有组件都有属性事件和方法属性。 方法直接写入相应的组件标签。 属性名=属性值`方法事件` : 直接使用vue绑定事件。写入方法使用相应组件标签的方法： `@event name=vue :事件处理函数方法1.使用ref=对应组件标签的组件别名。 2. 使用this.$refs.Component 别名。方法名称( ) 迁移