Radio

示例

基本使用

<template>
  <div>
    <SuperRadio v-model="value" :options="options"></SuperRadio>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const value = ref()

const options = [
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2' },
  { label: '选项3', value: '3' },
]
</script>

不同类型展示状态

<template>
  <div>
    <div>默认样式: type: radion</div>
    <SuperRadio v-model="value" type="radio" :options="options"></SuperRadio>
    <div>按钮样式: type: button</div>
    <SuperRadio v-model="value" type="button" :options="options"></SuperRadio>
    <div>边框样式: border</div>
    <SuperRadio v-model="value" border :options="options"></SuperRadio>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const value = ref()

const options = [
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2' },
  { label: '选项3', value: '3' },
]
</script>

label-添加前缀

<template>
  <div>
    <div>默认前缀: prefix</div>
    <SuperRadio v-model="value" :options="options" prefix></SuperRadio>
    <div>自定义前缀: prefix="测试前缀-"</div>
    <SuperRadio v-model="value" :options="options" prefix="测试前缀-"></SuperRadio>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const value = ref()

const options = [
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2' },
  { label: '选项3', value: '3' },
]
</script>

禁用状态

<template>
  <div>
    <div>全部禁用</div>
    <SuperRadio v-model="value" :options="options" disabled></SuperRadio>
    <div>选项禁用</div>
    <SuperRadio v-model="value" :options="options" :disabled="isDisabled"></SuperRadio>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const value = ref()

const options = [
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2' },
  { label: '选项3', value: '3' },
]

const isDisabled = (item: { value: string }) => item.value === '2'
</script>

包含/排除选项

<template>
  <div>
    <div>包含选项: include="['1', '3']</div>
    <SuperRadio v-model="value" :options="options" :include="['1', '3']"></SuperRadio>
    <div>排除选项: exclude="['1', '3']</div>
    <SuperRadio v-model="value" :options="options" :exclude="['1', '3']"></SuperRadio>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const value = ref()

const options = [
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2' },
  { label: '选项3', value: '3' },
]
</script>

API

Props

参数	说明	类型	可选值	默认值
type	按钮样式	string	'radio' | 'button'	radion
size	尺寸	string	small | default | large	default
border	是否显示边框	boolean	true|false	false
labelKey	自定义label字段属性名	string	-	label
valueKey	自定义value字段属性名	string	-	value
prefix	是否使用前缀	boolean | ((item: any) => boolean)	-	-
disabled	是否禁用	boolean | ((item: any) => boolean)	-	-
include	包含的选项	Array<string | number>	-	-
exclude	排除的选项	Array<string | number>	-	-

Slots

插槽名	说明
default	自定义默认内容