简介

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 Radio 的女性/广播活动”

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() Note : 在elementui 中，每个组件都有一个属性事件和一个方法。

属性：直接写在相应的组件标签上。 用法： 属性名称=属性值`方法。

事件`:直接使用vue绑定事件并写入对应的组件标签。 用法：`@事件名称=vue事件处理函数。

方法： 1. 在相应的组件标签上使用ref=component 别名。 2. 使用this.$refs.component alias.method name() 进行调用。

版权声明：本文转载于网络，版权归作者所有。如有侵权，请联系本站编辑删除。