Element UI极简教程(3):Radio、Checkbox、Input组件的使用
致力于最高效的Java学习
B 站搜索:楠哥教你学Java
获取更多优质视频教程
Radio 单选框
Element UI 的 Radio 使用起来非常简单,直接使用 el-radio 标签即可,属性 v-model 表示该单选框绑定的对象,label 表示该单选框的值,代码如下所示:
<template>
选项1
选项2
export default {
data(){
return{
radio: '1'
}
}
}
script>
效果图:
当我们选择不同的单选框时,会将该选项的 lable 值赋给 radio 对象,可以通过给单选框绑定点击事件来取值,代码如下:
<template>
<div id="app">
<el-radio v-model="radio" label="1" @change="change">选项1el-radio>
<el-radio v-model="radio" label="2" @change="change">选项2el-radio>
div>
template>
<script>
export default {
data(){
return{
radio: '1'
}
},
methods:{
change(){
console.log(this.radio)
}
}
}
script>
效果图:
Checkbox 多选框
Checkbox 多选框使用 el-checkbox 标签来完成,我们结合一个常用案例来学习,创建一个多选框列表以及全选按钮,来选择需要的数据,代码如下:
<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 修饰符,代码如下所示:
<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,代码如下所示:
<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 其他组件的使用,如果你觉得这篇教程对你有帮助,就帮楠哥点个赞吧,我们下期教程再见。
推荐阅读
楠哥简介
资深 Java 工程师,微信号 southwindss
《Java零基础实战》一书作者
腾讯课程官方 Java 面试官,今日头条认证大V
GitChat认证作者,B站认证UP主(楠哥教你学Java)
致力于帮助万千 Java 学习者持续成长。
有收获,就点个在看