单选框

基础用法

• 示例：

点击查看代码

<template>
  <z-radio v-model:checked="check">单选</z-radio>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'RadioDemo1',
  setup(){
    const check = ref(false)
    return {
      check
    }
  }
})
</script>

禁用

• 示例：

点击查看代码

<template>
  <z-radio v-model:checked="check2" :disabled="disabled">单选</z-radio>
  <div style="margin: 5px 0"></div>
  <z-radio v-model:checked="check3" :disabled="!disabled">禁用</z-radio>
  <div style="margin: 5px 0"></div>
  <z-button @click="toggleDisabled">切换</z-button>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'RadioDemo2',
  setup(){
    const check2 = ref(false)
    const check3 = ref(false)
    const disabled = ref(false)
    const toggleDisabled = () => {
      disabled.value = !disabled.value
    }
    return {
      check2,
      check3,
      disabled,
      toggleDisabled
    }
  }
})
</script>

按钮

• 示例：

点击查看代码

<template>
  <z-radio-group v-model:value="check1">
    <z-radio-button value="1">选项一</z-radio-button>
    <z-radio-button value="2">选项2</z-radio-button>
  </z-radio-group>
  <div style="margin: 5px 0" />
  <z-radio-group v-model:value="check2" style="margin-top:20px">
    <z-radio-button value="a">选项a</z-radio-button>
    <z-radio-button value="b" disabled>选项b</z-radio-button>
    <z-radio-button value="c">选项c</z-radio-button>
    <z-radio-button value="d">选项d</z-radio-button>
  </z-radio-group>
  <div style="margin: 5px 0" />
  <z-radio-group v-model:value="check3" style="margin-top:20px" disabled>
    <z-radio-button value="a">选项a</z-radio-button>
    <z-radio-button value="b" disabled>选项b</z-radio-button>
    <z-radio-button value="c">选项c</z-radio-button>
    <z-radio-button value="d">选项d</z-radio-button>
  </z-radio-group>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'RadioDemo3',
  setup(){
    const check1 = ref(false)
    const check2 = ref('a')
    const check3 = ref('a')
    return {
      check1,
      check2,
      check3
    }
  }
})
</script>

Radio/Radio.Button Props

参数	说明	类型	默认值
checked(v-model)	指定当前是否选中	boolean	false
autofocus	自动获取焦点	boolean	false
disabled	禁用 Radio	boolean	false
value	根据 value 进行比较，判断是否选中	any	---

RadioGroup Props

参数	说明	类型	默认值
value(v-model)	用于设置当前选中的值	any	---
buttonStyle	RadioButton 的风格样式，目前有描边和填色两种风格	outline | solid	outline
disabled	禁选所有子单选器	boolean	false
name	RadioGroup 下所有 input[type="radio"] 的 name 属性	string	---
options	以配置形式设置子元素	string[] | number[] | Array<{ label: string value: string disabled?: boolean }>	---
optionType	用于设置 Radio options 类型	default | button	default
size	大小，只对按钮样式生效	large | default | small	default

RadioGroup Event

事件	说明	回调参数
change	选项变化时的回调函数	function(e:Event)

Radio Method

名称	描述
blur()	移除焦点
focus()	获取焦点