简介
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.按钮组件(示例)
3.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>
3.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.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>
3.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>
4.按钮组件的详细使用
总结:日后使用element ui的相关组件时需要注意的是 所有组件都是el-组件名称开头4.1创建按钮
<el-button>默认按钮</el-button>4.2 按钮属性使用
-
<el-button type="primary" 属性名=属性值>默认按钮
</el-button>
-
<el-button type="success" size="medium" plain=true round circle icon="el-icon-loading">
</el-button>
4.3 按钮组使用
-
<el-button-group>
-
<el-button type="primary" icon="el-icon-back">上一页
</el-button>
-
<el-button type="primary" icon="el-icon-right">下一页
</el-button>
-
</el-button-group>
- 在element ui中所有组件都是
el-组件名称方式进行命名 - 在element ui中组件的属性使用
都是直接将属性名=属性值方式写在对应的组件标签上
5.Link 文字链接组件
5.1 文字链接组件的创建
<el-link>默认链接</el-link>5.2 文字链接组件的属性的使用
-
<el-link target="_blank" href="http://www.baidu.com" >默认链接
</el-link>
-
<el-link type="primary":underline="false">默认链接
</el-link>
-
<el-link type="success" disabled>默认链接
</el-link>
-
<el-link type="info" icon="el-icon-platform-eleme">默认链接
</el-link>
-
<el-link type="warning">默认链接
</el-link>
-
<el-link type="danger">默认链接
</el-link>
6.Layout (栅格)布局组件的使用
-
通过基础的
24 分栏，迅速简便地创建布局
-
在
element
ui中布局组件将页面划分为多个行
row,每行最多分为
24栏(列)
6.1 使用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属性
6.2 属性的使用
- 行属性使用
-
<el-row
:gutter="50" tag=
"span">
-
<el-col
:span="4"><div style=
"border: 1px red solid;">占用
4份<
/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;">占用
3份<
/div></el-col>
-
<el-col
:span="9"><div style=
"border: 1px red solid;">占用
9份<
/div></el-col>
-
<
/el-row>
列属性的使用
-
<el-row>
-
<el-col :span="12" :offset="9" :psuh="3" xs>
<div style="border: 1px blue solid;">我是占用12分
</div>
</el-col>
-
<el-col :span="6">
<div style="border: 1px blue solid;">我是占用6分
</div>
</el-col>
-
</el-row>
7.Container 布局容器组件
7.1 创建布局容器
-
<el-container>
-
</el-container>
7.2 容器中包含的子元素
-
<el-header>：顶栏容器。
-
<el-aside>：侧边栏容器。
-
<el-main>：主要区域容器。
-
<el-footer>：底栏容器。
7.3 容器的嵌套使用
-
<!--创建容器-->
-
<el-container>
-
<!--header-->
-
<el-header>
<div>
<h1>我是标题
</h1>
</div>
</el-header>
-
<!--容器嵌套使用-->
-
<el-container>
-
<!--aside-->
-
<el-aside>
<div>
<h1>我是菜单
</h1>
</div>
</el-aside>
-
<!--main-->
-
<el-main>
<div>
<h1>我是中心内容
</h1>
</div>
</el-main>
-
</el-container>
-
<el-footer>
<div>
<h1>我是页脚
</h1>
</div>
</el-footer>
-
</el-container>
7.4 水平容器
-
<el-container direction="horizontal">
-
<!--header-->
-
<el-header>
<div>
<h1>我是标题
</h1>
</div>
</el-header>
-
<el-container>
-
<!--aside-->
-
<el-aside>
<div>
<h1>我是菜单
</h1>
</div>
</el-aside>
-
<!--main-->
-
<el-main>
<div>
<h1>我是中心内容
</h1>
</div>
</el-main>
-
</el-container>
-
<el-footer>
<div>
<h1>我是页脚
</h1>
</div>
</el-footer>
-
</el-container>
7.5 垂直容器
-
<el-container direction="vertical">
-
<!--header-->
-
<el-header>
<div>
<h1>我是标题
</h1>
</div>
</el-header>
-
<el-container>
-
<!--aside-->
-
<el-aside>
<div>
<h1>我是菜单
</h1>
</div>
</el-aside>
-
<!--main-->
-
<el-main>
<div>
<h1>我是中心内容
</h1>
</div>
</el-main>
-
</el-container>
-
<!--footer-->
-
<el-footer>
<div>
<h1>我是页脚
</h1>
</div>
</el-footer>
-
</el-container>
8.Form相关组件
8.1 Radio单选按钮
创建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按钮属性的使用
-
<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" border size="mini" label="女">女
</el-radio>
-
<el-radio v-model="label" border size="medium" 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" border size="small" label="女">女
</el-radio>
-
<script>
-
export
default {
-
name:
"Radio",
-
data(){
-
return{
-
label:
'男'
-
}
-
},
-
methods:{
-
aa(){
//定义的事件处理函数
-
console.log(
this.label);
-
}
-
}
-
}
-
</script>
- 事件的使用也是和属性使用是一致都是直接写在对应的组件标签上
- 事件在使用时必须使用Vue中绑定时间方式进行使用如 @事件名=事件处理函数(绑在在vue组件中对应函数)
9、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:
6
-
}
-
}
-
}
-
</script>
10、checkbox组件
10.1、创建checkbox组件
-
<el-checkbox v-model="checked">北京
</el-checkbox>
-
<el-checkbox v-model="checked">上海
</el-checkbox>
-
<el-checkbox v-model="checked">天津
</el-checkbox>
10.2、属性使用
-
<el-checkbox v-model="checked" disabled true-label="北京">北京
</el-checkbox>
-
<el-checkbox checked border true-label="上海">上海
</el-checkbox>
-
<el-checkbox v-model="checked" true-label="天津">天津
</el-checkbox>
10.3、事件使用
-
<el-checkbox @change="aa"v-model="checked" true-label="上海">上海
</el-checkbox>
-
<el-checkbox v-model="checked" @change="aa" true-label="天津">天津
</el-checkbox>
-
<script>
-
export
default {
-
name:
"Checkbox",
-
data(){
-
return{
-
checked:
true
-
}
-
},
-
methods:{
-
aa(){
-
console.log(
this.checked);
-
}
-
}
-
}
-
</script>
10.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="复选框 C">
</el-checkbox>
-
<el-checkbox label="禁用" disabled>
</el-checkbox>
-
<el-checkbox label="选中且禁用" disabled>
</el-checkbox>
-
</el-checkbox-group>
-
<script>
-
export
default {
-
name:
"Checkbox",
-
data(){
-
return{
-
checked:
true,
-
checkList:[],
-
}
-
},
-
methods:{
-
aa(){
-
console.log(
this.checked);
-
},
-
bb(){
-
console.log(
this.checkList);
-
}
-
}
-
}
-
</script>
11、Input 输入框组件
1.创建Input组件
-
<el-input v-model="name">
</el-input>
-
<script>
-
export
default {
-
name:
"Input",
-
data(){
-
return {
-
name:
'xiaochen'
-
}
-
}
-
}
-
</script>
2.常用属性
-
<el-input v-model="name" disabled type="textarea">
</el-input>
-
<el-input v-model="price" :maxlength="10" show-word-limit :minlength="5">
</el-input>
-
<el-input prefix-icon="el-icon-user-solid" placeholder="请输入用户名" clearable v-model="username">
</el-input>
-
<el-input suffix-icon="el-icon-star-off" placeholder="请输入密码" show-password type="password" clearable v-model="password">
</el-input>
-
<script>
-
export
default {
-
name:
"Input",
-
data() {
-
return {
-
restaurants: [],
-
state1:
'',
-
state2:
'',
-
name:
'xiaochen',
-
price:
0.0,
-
username:
"",
-
password:
"",
-
};
-
},
-
}
-
</script>
3.事件使用
-
<el-input v-model="username" @blur="aaa" @focus="bbb" @clear="clears" clearable @input="ccc">
</el-input>
-
<script>
-
export
default {
-
name:
"Input",
-
data() {
-
return {
-
restaurants: [],
-
state1:
'',
-
state2:
'',
-
name:
'xiaochen',
-
price:
0.0,
-
username:
"",
-
password:
"",
-
};
-
},
-
methods:{
-
aaa(){
-
console.log(
'失去焦点');
-
;
-
},
-
bbb(){
-
console.log(
"获取焦点");
-
},
-
ccc(value){
-
console.log(
"改变:"+value);
-
},
-
clears(){
-
console.log(
"清楚");
-
}
-
}
-
}
-
</script>
4.方法的使用
-
<h1>方法的使用
</h1>
-
<el-input v-model="username" ref="inputs">
</el-input>
-
<el-button @click="focusInputs">focus方法
</el-button>
-
<el-button @click="blurInputs">blur方法
</el-button>
-
<script>
-
export
default {
-
name:
"Input",
-
data() {
-
return{}
-
},
-
methods:{
-
//调用focus方法
-
focusInputs(){
-
this.$refs.inputs.focus();
-
},
-
//调用失去焦点方法
-
blurInputs(){
-
this.$refs.inputs.blur();
-
}
-
}
-
}
-
</script>
- 在使用组件的方法时需要在对应的组件中加入
ref="组件别名" - 在调用方法时直接使用
this.$refs.组件别名.方法名()
注意:在elementui中所有组件 都存在 属性 事件 和方法
属性:直接写在对应的组件标签上 使用方式:属性名=属性值`方式
事件`: 直接使用vue绑定事件方式写在对应的组件标签上 使用方式:`@事件名=vue中事件处理函数
方法: 1.在对应组件标签上使用ref=组件别名2.通过使用this.$refs.组件别名.方法名()进行调用
转载：https://blog.csdn.net/qq_35254085/article/details/116600164
查看评论