Element UI极简教程(3)：Radio、Checkbox、Input组件的使用

  Java大联盟

  致力于最高效的Java学习

关注

B 站搜索：楠哥教你学Java

获取更多优质视频教程

Radio 单选框

Element UI 的 Radio 使用起来非常简单，直接使用 el-radio 标签即可，属性 v-model 表示该单选框绑定的对象，label 表示该单选框的值，代码如下所示：

<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 对象，可以通过给单选框绑定点击事件来取值，代码如下：

<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 标签来完成，我们结合一个常用案例来学习，创建一个多选框列表以及全选按钮，来选择需要的数据，代码如下：

<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 其他组件的使用，如果你觉得这篇教程对你有帮助，就帮楠哥点个赞吧，我们下期教程再见。

推荐阅读

1、Spring Boot+Vue项目实战

2、B站：4小时上手MyBatis Plus

3、一文搞懂前后端分离

4、快速上手Spring Boot+Vue前后端分离

楠哥简介

资深 Java 工程师，微信号 southwindss

《Java零基础实战》一书作者

腾讯课程官方 Java 面试官，今日头条认证大V

GitChat认证作者，B站认证UP主（楠哥教你学Java）

致力于帮助万千 Java 学习者持续成长。

有收获，就点个在看