Radio 单选框

When I was young

I'd listen to the radio

Waiting for my favorite songs

import { DuRadio, DuRadioGroup } from 'dangoui'

示例

使用

单选框被选中后，再次点击不会取消选中

<template>
  <PreviewBlock title="单独使用">
    <div>
      <DuRadio />
      <DuRadio
        label="季卡"
        :checked="checked"
        @update:value="handleInput"
        @click="handleClick"
      />
    </div>
  </PreviewBlock>
  <PreviewBlock title="按钮形状">
    <div>
      <DuRadio
        shape="button"
        label="月卡"
        :checked="monthlyChecked"
        @update:value="handleMonthlyUpdate"
      />
    </div>
  </PreviewBlock>
  <PreviewBlock title="禁用">
    <div>
      <DuRadio disabled :checked="true" />
      <DuRadio disabled :disabledTip="'当前不可选中'" />
    </div>
  </PreviewBlock>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DuRadio } from 'dangoui'

const checked = ref(false)
const monthlyChecked = ref(false)

function handleInput(e: { checked: boolean }) {
  checked.value = e.checked
}

function handleClick() {
  console.log('[demo] radio clicked')
}

function handleMonthlyUpdate(e: { checked: boolean }) {
  monthlyChecked.value = e.checked
}
</script>

::demo{:idx="2" path="content:3.input:4.radio.md"}

title: 使用 RadioGroup

一般来说，你会选择使用 RadioGroup

#snippet

<template>
  <PreviewBlock title="一组值">
    <DuRadioGroup v-model:value="selected">
      <DuRadio v-for="item in items" :label="item" :value="item" />
    </DuRadioGroup>
  </PreviewBlock>
  <PreviewBlock title="显示成一行">
    <DuRadioGroup v-model:value="inlineSelected" inline>
      <DuRadio v-for="item in items" :label="item" :value="item" />
    </DuRadioGroup>
  </PreviewBlock>
  <PreviewBlock title="按钮形状">
    <DuRadioGroup v-model:value="buttonInlineSelected" inline shape="button">
      <DuRadio v-for="item in items" :label="item" :value="item" />
    </DuRadioGroup>
  </PreviewBlock>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DuRadioGroup, DuRadio } from 'dangoui'

const items = ['月卡', '季卡', '年卡']
const selected = ref('')
const inlineSelected = ref('')
const buttonInlineSelected = ref('')
</script>

::demo{:idx="3" path="content:3.input:4.radio.md"}

title: 不同颜色

#snippet

<template>
  <PreviewBlock title="secondary">
    <div class="flex flex-col gap-y-8px">
      <DuRadioGroup color="secondary" v-model:value="selected" inline>
        <DuRadio v-for="item in items" :label="item" :value="item" />
      </DuRadioGroup>
      <DuRadioGroup
        color="secondary"
        v-model:value="selected"
        inline
        shape="button"
      >
        <DuRadio v-for="item in items" :label="item" :value="item" />
      </DuRadioGroup>
    </div>
  </PreviewBlock>
  <PreviewBlock title="success">
    <div class="flex flex-col gap-y-8px">
      <DuRadioGroup color="success" v-model:value="selected" inline>
        <DuRadio v-for="item in items" :label="item" :value="item" />
      </DuRadioGroup>
      <DuRadioGroup
        color="success"
        v-model:value="selected"
        inline
        shape="button"
      >
        <DuRadio v-for="item in items" :label="item" :value="item" />
      </DuRadioGroup>
    </div>
  </PreviewBlock>
  <PreviewBlock title="warning">
    <div class="flex flex-col gap-y-8px">
      <DuRadioGroup color="warning" v-model:value="selected" inline>
        <DuRadio v-for="item in items" :label="item" :value="item" />
      </DuRadioGroup>
      <DuRadioGroup
        color="warning"
        v-model:value="selected"
        inline
        shape="button"
      >
        <DuRadio v-for="item in items" :label="item" :value="item" />
      </DuRadioGroup>
    </div>
  </PreviewBlock>
  <PreviewBlock title="error">
    <div class="flex flex-col gap-y-8px">
      <DuRadioGroup color="error" v-model:value="selected" inline>
        <DuRadio v-for="item in items" :label="item" :value="item" />
      </DuRadioGroup>
      <DuRadioGroup
        color="error"
        v-model:value="selected"
        inline
        shape="button"
      >
        <DuRadio v-for="item in items" :label="item" :value="item" />
      </DuRadioGroup>
    </div>
  </PreviewBlock>
  <PreviewBlock title="trade">
    <div class="flex flex-col gap-y-8px">
      <DuRadioGroup color="trade" v-model:value="selected" inline>
        <DuRadio v-for="item in items" :label="item" :value="item" />
      </DuRadioGroup>
      <DuRadioGroup
        color="trade"
        v-model:value="selected"
        inline
        shape="button"
      >
        <DuRadio v-for="item in items" :label="item" :value="item" />
      </DuRadioGroup>
    </div>
  </PreviewBlock>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DuRadioGroup, DuRadio } from 'dangoui'

const items = ['月卡', '季卡', '年卡']
const selected = ref('')
</script>

API

Radio 属性

属性名	类型	默认值	说明
color	`string`	-	色彩，可以使用色板中的颜色名
ext-class	`string \| string[] \| Record<string, boolean>`	`""`
ext-style	`string \| { [x: string]: string \| number; }`	`""`
disabled	`boolean`	`false`
inline	`boolean`	`false`
custom	`boolean`	`false`
disabled-tip	`string`	`""`
cell	`boolean`	`false`
value	`any`	-
shape	`string`	-	形状
label	`string`	-
checked	`boolean`	-
value-key	`string`	-

Radio 插槽

名称
default

Radio 事件

名称	类型
click	`(event: "click", event: any): void`
update:value	`(event: "update:value", value: { checked: boolean; value: any; }): void`
update:checked	`(event: "update:checked", value: boolean): void`
input	`(event: "input", value: { checked: boolean; value: any; }): void`

RadioGroup 属性

属性名	类型	默认值	说明
color	`string`	-	颜色，可以使用色板中的颜色名
ext-class	`string \| string[] \| Record<string, boolean>`	`""`
ext-style	`string \| { [x: string]: string \| number; }`	`""`
inline	`boolean`	`false`	是否为行内展示
custom	`boolean`	`false`	自定义子节点
cell	`boolean`	`false`	开启后，label 与 radio 呈左右两边排布
value	`any`	-	选中的值
shape	`"normal" \| "button"`	-	形状，圆形还是按钮形式
value-key	`string`	-	如果值为对象，进行选中值相等判断时，会取该对象的 valueKey 属性值进行判断

RadioGroup 插槽

名称
default

RadioGroup 事件

名称	类型
update:value	`(event: "update:value", value: string \| number \| undefined): void`
input	`(event: "input", value: string \| number \| undefined): void`