Element UI引言
官网：https://element.eleme.cn/#/zh-CN
官方定义
网站快速成型工具 和桌面端组件库
定义
element ui就是基于vue的一个ui框架，该框架基于vue开发了很多相关组件，方便我们快速开发页面。
由来
饿了么前端团队基于vue进行开发并且进行了开源 element ui 中提供全部都是封装好的组件
Element UI 安装
-
通过vue脚手架创建项目
vue init webpack element -
在Vue脚手架项目中安装elementui
# 1.下载element相关依赖 npm i element-ui -S # 2.指定当前项目中使用elementui(main.js中加入) import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; //在vue脚手架中使用element ui Vue.use(ElementUI);
按钮组件(示例)
<img src="C:\Users\17\AppData\Roaming\Typora\typora-user-images\image-20200613103335356.png" alt="image-20200613103335356" style="zoom:80%;" />
# 1.默认样式按钮
<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-row>
# 2.简洁按钮 鼠标移动上去才会显示颜色
<el-row>
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
</el-row>
# 3.圆角按钮
<el-row>
<el-button round>圆角按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
</el-row>
# 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" circle></el-button>
<el-button type="info" icon="el-icon-message" circle></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>
按钮组件的详细使用
总结：日后使用element ui 的相关组件时需要注意的是 所有的组件都是el-组建名称开头
-
创建按钮
<el-button>默认按钮</el-button> -
按钮属性使用
<el-button type="primary" 属性名=属性值>默认按钮</el-button> <el-button type="success" size="medium" plain round circle icon="el-icon-loading" ></el-button>总结：在elementui中所有组件的阻性全部写在组件标签上 -
按钮组的使用
<el-button-group> <el-button type="primary" icon="el-icon-caret-left">上一页</el-button> <el-button type="primary" icon="el-icon-caret-right">下一页</el-button> </el-button-group>注意:- 在element ui中所有组件都是
el-组件名称方式进行命名 - 在element ui中组件的属性使用
都是直接将属性名=属性值写在对应的组件标签上
- 在element ui中所有组件都是
Link文字链接组件
-
文字链接组件的创建
<el-link>默认链接</el-link> 文字链接属性的使用
Layout(栅格)布局组件的使用
通过基础的 24 分栏，迅速简便地创建布局。
在element ui中布局组件将页面划分为多个行row，每行最多分为24栏(列)
使用Layout组件
<el-row>
<el-col :span="8">占用8份</el-col>
<el-col :span="8">占用8份</el-col>
<el-col :span="8 ">占用8份</el-col>
</el-row>
注意:
- 在一个布局组件中是由row和col组合而成
- 在使用时要区分row属性和col属性
属性的使用
-
行属性的使用
<el-row :gutter="20" tag="span"> <el-col :span="4"><div style="border: 1px red solid">占用8份</div></el-col> <el-col :span="8"><div style="border: 1px red solid">占用8份</div></el-col> <el-col :span="3"><div style="border: 1px red solid">占用8份</div></el-col> <el-col :span="9"><div style="border: 1px red solid">占用8份</div></el-col> </el-row> -
列属性的使用
<h1>Layout组件中使用偏移</h1> <el-row> <el-col :span="12" :offset="6" :push="3" ><div style="border: 1px red solid">我是占用12份</div></el-col> <el-col :span="6" ><div style="border: 1px red solid">我是占用6份</div></el-col> </el-row>
Container 布局容器组件
创建布局容器
<el-container>
</el-container>
容器中的子元素
<el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器。
容器的嵌套使用
<!--创建容器-->
<el-container>
<!--顶栏容器-->
<el-header>
<div ><h1>我是标题</h1></div>
</el-header>
<el-container>
<!--侧边栏容器-->
<el-aside >
<div><h1>我是菜单</h1></div>
</el-aside>
<!--主要区域容器-->
<el-main>
<div><h1>我是中心内容</h1></div>
</el-main>
</el-container>
<el-footer>
<div><h1>我是页脚</h1></div>
</el-footer>
</el-container>
水平容器
<el-container direction="horizontal">
<!--顶栏容器-->
<el-header>
<div ><h1>我是标题</h1></div>
</el-header>
<el-container>
<!--侧边栏容器-->
<el-aside >
<div><h1>我是菜单</h1></div>
</el-aside>
<!--主要区域容器-->
<el-main>
<div><h1>我是中心内容</h1></div>
</el-main>
</el-container>
<el-footer>
<div><h1>我是页脚</h1></div>
</el-footer>
</el-container>
注意：默认值-> 子元素中有 el-header 或 el-footer 时为 vertical，否则为 horizontal
垂直容器
<el-container direction="vertical">
<!--顶栏容器-->
<el-header>
<div ><h1>我是标题</h1></div>
</el-header>
<el-container>
<!--侧边栏容器-->
<el-aside >
<div><h1>我是菜单</h1></div>
</el-aside>
<!--主要区域容器-->
<el-main>
<div><h1>我是中心内容</h1></div>
</el-main>
</el-container>
<el-footer>
<div><h1>我是页脚</h1></div>
</el-footer>
</el-container>
From相关组件
Radio单选按钮
-
创建按钮
<el-radio v-model="label" label="男">男</el-radio> <el-radio v-model="label" label="女">女</el-radio> <script> export default { name: "Radio", data(){ return{ label:'男' } } } </script>
注意：在使用radio单选按钮时至少加入v-model和label两个属性 -
Radio按钮属性的使用
<el-radio v-model="label" name="sex" disabled label="男">男</el-radio> <el-radio v-model="label" name="sex" border size="small" label="女">女</el-radio> <el-radio v-model="label" name="sex" border size="mini" label="女">女</el-radio>
总结：属性的使用还是直接卸载对应的组件标签上 属性名=属性值 方式使用 -
Radio事件的使用
<el-radio v-model="label" @change="aa" name="sex" label="男">男</el-radio> <el-radio v-model="label" @change="aa" name="sex" label="女">女</el-radio> <script> export default { name: "Radio", data(){ return{ label:'男' } }, methods:{ aa(){ //定义的事件处理函数 alert(this.label); } } } </script>
总结:- 事件的使用也是和属性使用时一致都是直接写在对应的组件标签上
- 事件在使用时必须使用Vue中绑定事件方式进行使用 如 @事件名= 事件处理函数(绑定在Vue组件中的函数)
-
Radio按钮组
<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-group> <script> export default { name: "Radio", data(){ return{ radio:3 } }, } </script>
Checkbox 多选框组件
-
创建checkbox组件
<el-checkbox v-model="checked">北京</el-checkbox> <el-checkbox v-model="checked">上海</el-checkbox> <el-checkbox v-model="checked">天津</el-checkbox> -
属性的使用
<el-checkbox v-model="checked" true-label="北京">北京</el-checkbox> <el-checkbox v-model="checked" true-label="上海">上海</el-checkbox> <el-checkbox v-model="checked" true-label="天津">天津</el-checkbox> -
事件使用
<el-checkbox v-model="checked" true-label="上海" @change="aa">上海</el-checkbox> <el-checkbox v-model="checked" true-label="天津" @change="aa">天津</el-checkbox> <script> export default { name: "Radio", data(){ return{ checked:true } }, methods:{ aa(){ console.log(this.checked); } } } </script> -
复选框组的使用
<el-checkbox-group @change="bb" v-model="checkList"> <el-checkbox label="复选框 A"></el-checkbox> <el-checkbox label="复选框 B"></el-checkbox> <el-checkbox label="复选框 C"></el-checkbox> <el-checkbox label="禁用" disabled></el-checkbox> <el-checkbox label="选中且禁用" disabled></el-checkbox> </el-checkbox-group> <script> export default { name: "Radio", data(){ return{ checkList: ['选中且禁用','复选框 A'] } }, methods:{ bb(){ console.log(this.checkList); } } } </script>Input组件
-
input的使用
<el-input v-model="input" placeholder="请输入内容"></el-input> <script> export default { data() { return { input: '' } } } </script> -
常用属性
<el-input v-model="name" placeholder="请输入内容" disabled></el-input> <el-input v-model="name" placeholder="请输入内容" type="textarea"></el-input> <el-input v-model="name" placeholder="请输入内容" :maxlength="10" show-word-limit></el-input> <el-input suffix-icon="el-icon-star-off" v-model="name" placeholder="请输入内容" clearable></el-input> <el-input prefix-icon="el-icon-user-solid" v-model="name" placeholder="请输入内容" type="password" show-password></el-input> -
事件使用
blur 在 Input 失去焦点时触发 focus 在 Input 获得焦点时触发 change 仅在输入框失去焦点或用户按下回车时触发 input 在 Input 值改变时触发 clear 在点击由 clearable 属性生成的清空按钮时触发 -
方法使用
<el-input v-model="name" ref="inputs"> </el-input> <el-button @click="focusInput">focus方法</el-button> <el-button @click="blurInput">blur方法</el-button> <script> export default { name: "Radio", data(){ return{ name:'' } }, methods:{ focusInput(){ this.$refs.inputs.focus() }, blurInput(){ this.$refs.inputs.blur() } } } </script>
总结- 在使用组件的方法时需要在对应的组件中加入
ref=组件别名 - 在调用方法时直接使用this.$refs.组件别名.方法名()
注意：在elementui中所有组件都存在 属性 事件和方法属性:直接写在对应的组件标签上 使用方式属性名=属性值方式事件:直接使用vue绑定事件方式写在对应的组件标签上 使用方式@事件名=vue中事件处理函数方法:1.在对应组件标签上使用ref=组件别名2.通过使用this.$refs.组件别名.方法名()进行调用 - 在使用组件的方法时需要在对应的组件中加入
-
Select选择器
-
组件创建
# 1.数据写死在页面上 <el-select> <el-option>北京</el-option> <el-option>天津</el-option> </el-select> 注意：1. 要求下拉列表中必须存在option的value属性值 2.要求select必须使用v-model进行数据绑定 # 2.如何动态获取数据 <el-select> <el-option v-for="option in options" :label="option.name" :value="option.id" :key="option.id"> </el-option> </el-select> # 3.获取下拉列表选中数据 <el-select v-model="cityId" > <el-option v-for="option in options" :label="option.name" :value="option.id" :key="option.id"> </el-option> </el-select> <script> export default { name: "Radio", data(){ return{ options:[ {id:'1',name:"研发部"}, {id:'2',name:"小卖部"}, {id:'3',name:"小米部"} ], cityId:'' } }, methods:{ } } </script> -
属性使用
<el-select v-model="cityId" multiple clearable> </el-select> -
事件的使用
<el-select v-model="cityId" @change="aaa" multiple clearable> <el-option v-for="option in options" :label="option.name" :value="option.id" :key="option.id"> </el-option> </el-select> <script> export default { name: "Radio", data(){ return{ options:[ {id:'1',name:"研发部"}, {id:'2',name:"小卖部"}, {id:'3',name:"小米部"} ], cityId:'' } }, methods:{ aaa(value){ console.log(value); } } } </script> -
方法的使用
1.给组件起别名 <el-select ref="selects" v-model="cityId" @change="aaa" multiple clearable> .... </el-select> 2.调用方法 this.$refs.selects.focus();
switch组件的使用
-
Switch组件的创建
<el-switch v-model="value" ></el-switch> <script> export default { name: "Radio", data(){ return{ value:true } }, methods:{ } } </script> -
属性的使用
<el-switch v-model="value" :width="200" active-text="打开" :active-value="true" :inactive-value="false" inactive-text="关闭" active-color="#13ce66" inactive-color="#ff4949">> </el-switch> -
事件使用
<el-switch v-model="value" @change="aaa"></el-switch> <script> export default { name: "Radio", data(){ return{ value:false } }, methods:{ aaa(value){ console.log(value); } } } </script> -
方法的使用
<el-switch ref="sw" v-model="value" @change="aaa"></el-switch> <el-button @click="bbb">调用方法</el-button> <script> export default { name: "Radio", data(){ return{ value:false } }, methods:{ aaa(value){ console.log(value); }, bbb(){ alert() this.$refs.sw.focus(); } } } </script>
DatePicker组件
- 创建
<el-date-picker v-model="createDate"></el-date-picker>
- 属性的使用
<el-date-picker v-model="createDate" :editable="false" :clearable="false" type="datetime" >
</el-date-picker>
Form组件
- 创建
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="即时配送">
<el-switch v-model="form.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质">
<el-checkbox-group v-model="form.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源">
<el-radio-group v-model="form.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
}
},
methods: {
onSubmit() {
console.log('submit!');
}
}
}
</script>
- 内联表单(行内表单)
<el-form :inline="true" :model="formInline" class="demo-form-inline">
</el-form>
通过设置inline=true设置为内联表单
