简介
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.组件别名.方法名()进行调用