簡單的單選元件 Radio

Radio

Quasar的Radio元件跟其他表單輸入元件的基本屬性都大同小異

一樣也可以用QFiled把它包裝起來哦

引入元件

framework: {
  components: ['QRadio']
}

基本實作

非常的簡單XD

        <q-radio v-model="model" label="去日本" val="japan" />
        <q-radio v-model="model" label="去韓國" val="korea" />
        <q-radio v-model="model" label="在家就好" val="home" />

只要給他label跟val 在綁定同樣的變數 就能簡單弄出不失質感的radio啦

與 QField 一起使用

像上面這樣單純的擺出來會沒有標題列。

可以搭配QField，來給標題甚至是其他輔助功能

<q-field
  label="跨年去哪玩？"
  orientation="vertical"
>
  <q-radio v-model="model" label="去日本" val="japan" />
  <q-radio v-model="model" label="去韓國" val="korea" />
  <q-radio v-model="model" label="在家就好" val="home" />
</q-field>

基本屬性

• val 會存進綁定變數的值
• label 元件上的文字
• left-label 設定為真時，文字會改顯示在選項的左邊
• checked-icon 改變選取時的icon
  
• unchecked-icon 改變未選取時的icon
• color 改變元件的顏色
• keep-color 沒選擇時也會有顏色（預設是灰色）
  
• readonly 唯獨屬性
• disable 禁用屬性
• dark 在暗色背景時，凸顯元件文字
• no-focus 不會觸發聚焦事件

基本事件

• @input 選取時觸發
• @blur 失去聚焦（點到其他的地方）時觸發
• @focus 聚焦（點選該元件時）時觸發

今天就這樣吧～明天又是要上班的日子啦