Radio、Checkbox、Input组件的使用

Radio 单选框

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

<template>
  <div id="app">
    <el-radio v-model="radio" label="1">选项1<span class="hljs-name"el-radio>
    <el-radio v-model="radio" label="2">选项2<span class="hljs-name"el-radio>
  <span class="hljs-name"div>
<span class="hljs-name"template>


<script>
export default {
  data(){
    return{
      radio: '1'
    }
  }
}
class="hljs-name"script>

效果图：

当我们选择不同的单选框时，会将该选项的 lable 值赋给 radio 对象，可以通过给单选框绑定点击事件来取值，代码如下：

<template>
  <div id="app">
    <el-radio v-model="radio" label="1" @change="change">选项1<span class="hljs-name"el-radio>
    <el-radio v-model="radio" label="2" @change="change">选项2<span class="hljs-name"el-radio>
  <span class="hljs-name"div>
<span class="hljs-name"template>


<script>
export default {
  data(){
    return{
      radio: '1'
    }
  },
  methods:{
    change(){
      console.log(this.radio)
    }
  }
}
class="hljs-name"script>

效果图：

Checkbox 多选框

Checkbox 多选框使用 el-checkbox 标签来完成，我们结合一个常用案例来学习，创建一个多选框列表以及全选按钮，来选择需要的数据，代码如下：

<template>
  <div id="app">
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选<span class="hljs-name"el-checkbox>
    <div style="margin: 15px 0;"><span class="hljs-name"div>
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
      <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}<span class="hljs-name"el-checkbox>
    <span class="hljs-name"el-checkbox-group>
  <span class="hljs-name"div>
<span class="hljs-name"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;
    }
  }
}
class="hljs-name"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="请输入内容"><span class="hljs-name"el-input>
  <span class="hljs-name"div>
<span class="hljs-name"template>


<script>
export default {
  data(){
    return{
      input: ''
    }
  }
}
class="hljs-name"script>

效果图：

如果要修改尺寸，通过设置size 属性完成，可选值包括：large / medium / small / mini，代码如下所示：

"input" placeholder="请输入内容" size="large">class="hljs-name"el-input>
<div style="margin: 15px 0;">class="hljs-name"div>
"input" placeholder="请输入内容" size="medium">class="hljs-name"el-input>
<div style="margin: 15px 0;">class="hljs-name"div>
"input" placeholder="请输入内容" size="small">class="hljs-name"el-input>
<div style="margin: 15px 0;">class="hljs-name"div>
"input" placeholder="请输入内容" size="mini">class="hljs-name"el-input>

效果图：

size只能修改 Input 的高度，如果要修改其宽度，最简单的方法就是在外层套一个div，通过设置div的宽度来实现修改 Input 宽度，代码如下所示：

<div style="width: 300px">  <el-inputv-model="input"placeholder="请输入内容"size="large">spanel-input>  <div style="margin: 15px 0;">div>  <el-inputv-model="input"placeholder="请输入内容"size="medium">spanel-input>  <div style="margin: 15px 0;">div>  <el-inputv-model="input"placeholder="请输入内容"size="small">spanel-input>  <div style="margin: 15px 0;">div>  <el-inputv-model="input"placeholder="请输入内容"size="mini">spanel-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-inputv-model="input"placeholder="请输入内容"size="medium"suffix-icon="el-icon-date"prefix-icon="el-icon-user">spanel-input>  <div style="margin: 15px 0;">div>  <el-inputv-model="input"placeholder="请输入内容"size="medium"suffix-icon="el-icon-goods"prefix-icon="el-icon-user-solid">spanel-input>  <div style="margin: 15px 0;">div>  <el-inputv-model="input"placeholder="请输入内容"size="medium"suffix-icon="el-icon-phone"prefix-icon="el-icon-star-off">spanel-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 其他组件的使用，如果你觉得这篇教程对你有帮助，就帮楠哥点个赞吧，我们下期教程再见。