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 其他組件的使用，如果你覺得這篇教程對你有幫助，就幫楠哥點個贊吧，我們下期教程再見。