Element el-radio 單選框詳解

1. 用途

單選框使用的場景非常普遍，用于列出多個選項，供使用者選擇其中一個。

注意Select選擇器也可以從多個選項中選擇一個，單選框的優勢是可以在界面上同時顯示所有選項，缺點是選項多時占用空間大。

而選擇器優勢是占用空間小(選項下拉選擇時才顯示)，缺點是必須要下拉時才能顯示所有選項。

2. 單選框

單選框HTML代碼如下：

<el-radio v-model="radio1" label="male">男</el-radio>

   <el-radio v-model="radio1" label="female">女</el-radio>

   選中:{{radio1}}

   <el-divider></el-divider>

需要注意，漢字部分表示顯示内容，label表示選中的值，v-model表示綁定的JS變量。JS部分代碼：

  radio1: 'male',

1

效果如下：

3. 單選框樣式

單選框添加按鈕邊框樣式，通過border屬性實作。

HTML代碼：

<el-radio v-model="radio2" label="basketball" border>籃球</el-radio>

   <el-radio v-model="radio2" label="football" border>足球</el-radio>

   選中:{{radio2}}

JS代碼：

    radio2: 'basketball',

4. 單選框組

可以使用el-radio-group标簽将單選框包圍起來，這樣隻需要設定一個v-model綁定變量即可。這樣的方式會将同一組的選項放在一個标簽内，使用起來更加符合習慣。示例：

   <el-radio-group v-model="radio3">

     <el-radio label="male">男</el-radio>

     <el-radio label="female">女</el-radio>

   </el-radio-group>

   選中:{{radio3}}

  radio3: 'male',

效果：

4. 單選框組樣式

Element為單選框組也提供了按鈕樣式，看起來更加富有科技感。

<el-radio-group v-model="radio4">

     <el-radio-button label="chinese">國文</el-radio-button>

     <el-radio-button label="math">數學</el-radio-button>

     <el-radio-button label="english">英語</el-radio-button>

    radio4: 'chinese',

5. 尺寸調節

針對按鈕樣式的單選框和單選框組，可以使用size調整其大小，例如：

<el-radio-group v-model="radio4" size="medium">
      <el-radio-button label="chinese">國文</el-radio-button>
      <el-radio-button label="math">數學</el-radio-button>
      <el-radio-button label="english">英語</el-radio-button>
    </el-radio-group>
    <el-radio-group v-model="radio4" size="small">
      <el-radio-button label="chinese">國文</el-radio-button>
      <el-radio-button label="math">數學</el-radio-button>
      <el-radio-button label="english">英語</el-radio-button>
    </el-radio-group>
    <el-radio-group v-model="radio4" size="mini">
      <el-radio-button label="chinese">國文</el-radio-button>
      <el-radio-button label="math">數學</el-radio-button>
      <el-radio-button label="english">英語</el-radio-button>
    </el-radio-group>
    <el-divider></el-divider>
      

c

6. 綁定值變化事件
當綁定值發生變化時，可以通過@change指定觸發的事件方法。例如：

HTML代碼：

    <el-radio @change="sexChange" v-model="radio1" label="male">男</el-radio>
    <el-radio @change="sexChange" v-model="radio1" label="female">女</el-radio>
    <el-divider></el-divider>
    <el-radio-group v-model="radio4" @change="courseChange">
      <el-radio-button label="chinese">國文</el-radio-button>
      <el-radio-button label="math">數學</el-radio-button>
      <el-radio-button label="english">英語</el-radio-button>
    </el-radio-group>

JS代碼：

export default {
  data() {
    return {
      radio1: 'male',
      radio2: 'basketball',
      radio3: 'male',
      radio4: 'chinese',
    };
  },
  methods: {
    sexChange() {
      console.log("sexChange");
    },
    courseChange() {
      console.log("courseChange");
    }
  }
}

當選中項變化時，就會觸發對應的methods中定義的方法。

7. 小結
el-radio提供了比較多的單選按鈕實作方式，建議還是使用單選框組，代碼結構更加清晰容易管理。