Radio 单选框
Element UI 的 Radio 使用起来非常简单，直接使用 el-radio 标签即可，属性 v-model 表示该单选框绑定的对象，label 表示该单选框的值，代码如下所示：
代码语言：javascript复制<template>
<div id="app">
<el-radio v-model="radio" label="1">选项1</el-radio>
<el-radio v-model="radio" label="2">选项2</el-radio>
</div>
</template>
<script>
export default {
data(){
return{
radio: '1'
}
}
}
</script>效果图：
当我们选择不同的单选框时，会将该选项的 lable 值赋给 radio 对象，可以通过给单选框绑定点击事件来取值，代码如下：
代码语言：javascript复制<template>
<div id="app">
<el-radio v-model="radio" label="1" @change="change">选项1</el-radio>
<el-radio v-model="radio" label="2" @change="change">选项2</el-radio>
</div>
</template>
<script>
export default {
data(){
return{
radio: '1'
}
},
methods:{
change(){
console.log(this.radio)
}
}
}
</script>效果图：
Checkbox 多选框
Checkbox 多选框使用 el-checkbox 标签来完成，我们结合一个常用案例来学习，创建一个多选框列表以及全选按钮，来选择需要的数据，代码如下：
代码语言：javascript复制<template>
<div id="app">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</div>
</template>
<script>
export default {
data(){
return{
checkAll: false,
checkedCities: ['上海', '北京'],
cities: ['上海', '北京', '广州', '深圳'],
isIndeterminate: true
}
},
methods:{
handleCheckAllChange(val) {
this.checkedCities = val ? this.cities : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
}
}
}
</script>效果图：
代码解释：
对数组 cities: ['上海', '北京', '广州', '深圳'] 进行遍历生成 4 个多选框，同时绑定点击事件 handleCheckedCitiesChange，该方法是用来判断是否为全选中的，this.checkAll = checkedCount === this.cities.length，如果当前全部选中数据的长度等于初始化数组 cities 的长度，则证明全部选中，再将判断结果赋值给 checkAll。
isIndeterminate 是用来控制全选按钮的样式的，如果当前选中的选项个数大于 0 并且小于初始化数组的长度，则表示有选中数据但没有全部选中，则将 isIndeterminate 的值改为 true，表示部分选中。
给全选按钮绑定了点击事件 handleCheckAllChange，该方法的参数 val 表示当前点击的是全选还是全不选，如果是全选则 val = true，全不选 val = false，handleCheckAllChange 方法内部通过判断 val 的值，设置当前选中的数据是全部还是空，同时再将 isIndeterminate 的值设置为 false，表示去掉部分选中样式。
Input 输入框
Input 为受控组件，它总会显示 Vue 绑定值。通常情况下，应当处理 input 事件，并更新组件的绑定值（或使用 v-model）。否则，输入框内显示的值将不会改变。不支持 v-model 修饰符，代码如下所示：
代码语言：javascript复制<template>
<div id="app">
<el-input v-model="input" placeholder="请输入内容"></el-input>
</div>
</template>
<script>
export default {
data(){
return{
input: ''
}
}
}
</script>效果图：
如果要修改尺寸，通过设置size 属性完成，可选值包括：large / medium / small / mini，代码如下所示：
代码语言：javascript复制<el-input v-model="input" placeholder="请输入内容" size="large"></el-input>
<div style="margin: 15px 0;"></div>
<el-input v-model="input" placeholder="请输入内容" size="medium"></el-input>
<div style="margin: 15px 0;"></div>
<el-input v-model="input" placeholder="请输入内容" size="small"></el-input>
<div style="margin: 15px 0;"></div>
<el-input v-model="input" placeholder="请输入内容" size="mini"></el-input>
效果图：
size 只能修改 Input 的高度，如果要修改其宽度，最简单的方法就是在外层套一个 div，通过设置 div 的宽度来实现修改 Input 宽度，代码如下所示： <div style="width: 300px"> <el-input v-model="input" placeholder="请输入内容" size="large"></el-input> <div style="margin: 15px 0;"></div> <el-input v-model="input" placeholder="请输入内容" size="medium"></el-input> <div style="margin: 15px 0;"></div> <el-input v-model="input" placeholder="请输入内容" size="small"></el-input> <div style="margin: 15px 0;"></div> <el-input v-model="input" placeholder="请输入内容" size="mini"></el-input> </div> 效果图：
使用 show-password 属性即可得到一个可切换显示隐藏的密码框，代码如下所示： <el-input v-model="input" placeholder="请输入内容" size="medium" show-password></el-input> 效果图：
可以通过 prefix-icon 和 suffix-icon 属性在 Input 组件首部和尾部增加显示图标，代码如下所示： <div style="width: 300px"> <el-input v-model="input" placeholder="请输入内容" size="medium" suffix-icon="el-icon-date" prefix-icon="el-icon-user"></el-input> <div style="margin: 15px 0;"></div> <el-input v-model="input" placeholder="请输入内容" size="medium" suffix-icon="el-icon-goods" prefix-icon="el-icon-user-solid"></el-input> <div style="margin: 15px 0;"></div> <el-input v-model="input" placeholder="请输入内容" size="medium" suffix-icon="el-icon-phone" prefix-icon="el-icon-star-off"></el-input> </div> 效果图：
maxlength 和 minlength 是原生属性，用来限制输入框的字符长度，代码如下所示： <div id="app"> <div style="width: 300px"> <el-input v-model="input" placeholder="请输入内容" size="medium" maxlength="10" show-word-limit></el-input> </div> </div> 效果图如下所示：
以上就是 Element UI 中 Radio、Checkbox、Input 组件的使用，下一篇教程楠哥将继续带领大家学习 Element UI 其他组件的使用，我们下期教程再见。
