dk-plus

简体中文

English

简体中文

English

Appearance

目录

Radio 单选框 ​

在给定的一组选项中单选。和 Checkbox 的区别是，单选框一般用在状态改变后需要提交的场景。

基础用法 ​

label 为单选框的文案，name 为单选框的真实值，v-model 为绑定值。

vue
<template>
  <div class="box">
    <div class="box-item">
      <dk-radio
        v-model="checked"
        size="large"
        label="option1(large)"
        name="option1(large)"
      ></dk-radio>
      <dk-radio size="medium" label="option2(medium)" name="option2(medium)"></dk-radio>
      <dk-radio size="small" label="option3(small)" name="option3(small)"></dk-radio>
      <dk-radio size="mini" label="option4(mini)" name="option4(mini)"></dk-radio>
    </div>
    <div class="box-item">
      <dk-radio disabled label="option1" name="option1"></dk-radio>
      <dk-radio disabled label="option2" name="option2"></dk-radio>
      <dk-radio disabled label="option3" name="option3"></dk-radio>
      <dk-radio disabled label="option4" name="option4"></dk-radio>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { reactive, toRefs } from 'vue'
  const data = reactive({
    checked: 'option1(large)'
  })
  const { checked } = toRefs(data)
</script>
展开

单选框组 ​

使用 dk-radio-group 可以实现单选框组。

vue
<template>
  <dk-radio-group v-model="groupValue" @change="handleGroupChange">
    <dk-radio label="option 1" name="radio1" />
    <dk-radio label="option 2" name="radio2" />
    <dk-radio label="option 3" name="radio3" />
  </dk-radio-group>
</template>
<script setup lang="ts">
  import { reactive, toRefs } from 'vue'
  const data = reactive({
    groupValue: 'option 1'
  })
  const { groupValue } = toRefs(data)
  const handleGroupChange = (val: string) => {
    console.log(val)
  }
</script>
展开

禁用状态 ​

通过 disabled 属性来禁用单选框。

vue
<template>
  <dk-radio-group v-model="groupValue">
    <dk-radio label="option 1" name="radio1" />
    <dk-radio label="option 2" name="radio2" />
    <dk-radio label="option 3" name="radio3" disabled />
  </dk-radio-group>
</template>
<script setup lang="ts">
  import { reactive, toRefs } from 'vue'
  const data = reactive({
    groupValue: 'option 1'
  })
  const { groupValue } = toRefs(data)
</script>
展开

带有边框的单选框 ​

通过 border 属性来设置带有边框的单选框。

vue
<template>
  <dk-radio-group v-model="groupValue">
    <dk-radio label="option 1" name="radio1" border />
    <dk-radio label="option 2" name="radio2" border />
    <dk-radio label="option 3" name="radio3" border />
  </dk-radio-group>
</template>
<script setup lang="ts">
  import { reactive, toRefs } from 'vue'
  const data = reactive({
    groupValue: 'option 1'
  })
  const { groupValue } = toRefs(data)
</script>
展开

尺寸 ​

通过 size 属性来设置单选框的尺寸, 支持 large、medium、small、mini, 默认 small。

vue
<template>
  <dk-radio-group v-model="groupValue">
    <dk-radio label="option 1" name="radio1" size="large" />
    <dk-radio label="option 2" name="radio2" size="medium" />
    <dk-radio label="option 3" name="radio3" size="small" />
    <dk-radio label="option 4" name="radio4" size="mini" />
  </dk-radio-group>
  <dk-radio-group v-model="sizeGroupValue">
    <dk-radio label="option 1" name="radio1" border size="large" />
    <dk-radio label="option 2" name="radio2" border size="medium" />
    <dk-radio label="option 3" name="radio3" border size="small" />
    <dk-radio label="option 4" name="radio4" border size="mini" />
  </dk-radio-group>
</template>
<script setup lang="ts">
  import { reactive, toRefs } from 'vue'
  const data = reactive({
    groupValue: 'option 1'
  })
  const { groupValue } = toRefs(data)
</script>
展开

属性 ​

参数说明类型可选值默认值
v-model绑定值string--
label单选框文案string--
name单选框的真实值(不设置默认为label)string--
size单选框的大小stringlarge medium small minismall
disabled是否禁用booleantrue falsefalse
border是否带有边框booleantrue falsefalse
checked-color选中时的颜色string-#409eff
unchecked-color未选中时的颜色string-#c0ccda

事件 ​

事件名说明回调参数
change绑定值(value: string) => value

RadioGroup 属性 ​

参数说明类型可选值默认值
v-model绑定值string--

RadioGroup 事件 ​

事件名说明回调参数
change绑定值(value: string) => value

Contributors ​