Radio 單選框

Element UI 的 Radio 使用起來(lái)非常簡(jiǎn)單，直接使用 el-radio 標(biāo)簽即可，屬性 v-model 表示該單選框綁定的對(duì)象，label 表示該單選框的值，代碼如下所示：

<template>
  <div id="app">
    <el-radio v-model="radio" label="1">選項(xiàng)1<span class="hljs-name"el-radio>
    <el-radio v-model="radio" label="2">選項(xiàng)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>

效果圖：

當(dāng)我們選擇不同的單選框時(shí)，會(huì)將該選項(xiàng)的 lable 值賦給 radio 對(duì)象，可以通過(guò)給單選框綁定點(diǎn)擊事件來(lái)取值，代碼如下：

<template>
  <div id="app">
    <el-radio v-model="radio" label="1" @change="change">選項(xiàng)1<span class="hljs-name"el-radio>
    <el-radio v-model="radio" label="2" @change="change">選項(xiàng)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 標(biāo)簽來(lái)完成，我們結(jié)合一個(gè)常用案例來(lái)學(xué)習(xí)，創(chuàng)建一個(gè)多選框列表以及全選按鈕，來(lái)選擇需要的數(shù)據(jù)，代碼如下：

<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>

效果圖：

代碼解釋：

對(duì)數(shù)組 cities: ['上海', '北京', '廣州', '深圳'] 進(jìn)行遍歷生成 4 個(gè)多選框，同時(shí)綁定點(diǎn)擊事件 handleCheckedCitiesChange，該方法是用來(lái)判斷是否為全選中的，this.checkAll = checkedCount === this.cities.length，如果當(dāng)前全部選中數(shù)據(jù)的長(zhǎng)度等于初始化數(shù)組 cities 的長(zhǎng)度，則證明全部選中，再將判斷結(jié)果賦值給 checkAll。

isIndeterminate 是用來(lái)控制全選按鈕的樣式的，如果當(dāng)前選中的選項(xiàng)個(gè)數(shù)大于 0 并且小于初始化數(shù)組的長(zhǎng)度，則表示有選中數(shù)據(jù)但沒(méi)有全部選中，則將 isIndeterminate 的值改為 true，表示部分選中。

給全選按鈕綁定了點(diǎn)擊事件 handleCheckAllChange，該方法的參數(shù) val 表示當(dāng)前點(diǎn)擊的是全選還是全不選，如果是全選則 val = true，全不選 val = false，handleCheckAllChange 方法內(nèi)部通過(guò)判斷 val 的值，設(shè)置當(dāng)前選中的數(shù)據(jù)是全部還是空，同時(shí)再將 isIndeterminate 的值設(shè)置為 false，表示去掉部分選中樣式。

Input 輸入框

Input 為受控組件，它總會(huì)顯示 Vue 綁定值。通常情況下，應(yīng)當(dāng)處理 input 事件，并更新組件的綁定值（或使用 v-model）。否則，輸入框內(nèi)顯示的值將不會(huì)改變。不支持 v-model 修飾符，代碼如下所示：

<template>
  <div id="app">
    <el-input v-model="input" placeholder="請(qǐng)輸入內(nèi)容"><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>

效果圖：

如果要修改尺寸，通過(guò)設(shè)置size 屬性完成，可選值包括：large / medium / small / mini，代碼如下所示：

"input" placeholder="請(qǐng)輸入內(nèi)容" size="large">class="hljs-name"el-input>
<div style="margin: 15px 0;">class="hljs-name"div>
"input" placeholder="請(qǐng)輸入內(nèi)容" size="medium">class="hljs-name"el-input>
<div style="margin: 15px 0;">class="hljs-name"div>
"input" placeholder="請(qǐng)輸入內(nèi)容" size="small">class="hljs-name"el-input>
<div style="margin: 15px 0;">class="hljs-name"div>
"input" placeholder="請(qǐng)輸入內(nèi)容" size="mini">class="hljs-name"el-input>

效果圖：

size只能修改 Input 的高度，如果要修改其寬度，最簡(jiǎn)單的方法就是在外層套一個(gè)div，通過(guò)設(shè)置div的寬度來(lái)實(shí)現(xiàn)修改 Input 寬度，代碼如下所示：

<div style="width: 300px">  <el-inputv-model="input"placeholder="請(qǐng)輸入內(nèi)容"size="large">spanel-input>  <div style="margin: 15px 0;">div>  <el-inputv-model="input"placeholder="請(qǐng)輸入內(nèi)容"size="medium">spanel-input>  <div style="margin: 15px 0;">div>  <el-inputv-model="input"placeholder="請(qǐng)輸入內(nèi)容"size="small">spanel-input>  <div style="margin: 15px 0;">div>  <el-inputv-model="input"placeholder="請(qǐng)輸入內(nèi)容"size="mini">spanel-input>div>

效果圖：

使用 show-password 屬性即可得到一個(gè)可切換顯示隱藏的密碼框，代碼如下所示：

<el-input v-model="input" placeholder="請(qǐng)輸入內(nèi)容" size="medium" show-password>el-input>

效果圖：

可以通過(guò)prefix-icon和suffix-icon屬性在 Input 組件首部和尾部增加顯示圖標(biāo)，代碼如下所示：

<div style="width: 300px">  <el-inputv-model="input"placeholder="請(qǐng)輸入內(nèi)容"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="請(qǐng)輸入內(nèi)容"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="請(qǐng)輸入內(nèi)容"size="medium"suffix-icon="el-icon-phone"prefix-icon="el-icon-star-off">spanel-input>div>

效果圖：

maxlength和minlength是原生屬性，用來(lái)限制輸入框的字符長(zhǎng)度，代碼如下所示：

<div id="app">  <div style="width: 300px">    <el-input v-model="input" placeholder="請(qǐng)輸入內(nèi)容" size="medium" maxlength="10" show-word-limit>el-input>  div>div>

效果圖如下所示：

以上就是 Element UI 中 Radio、Checkbox、Input 組件的使用，下一篇教程楠哥將繼續(xù)帶領(lǐng)大家學(xué)習(xí) Element UI 其他組件的使用，如果你覺(jué)得這篇教程對(duì)你有幫助，就幫楠哥點(diǎn)個(gè)贊吧，我們下期教程再見(jiàn)。