深色模式
RadioGroup 单选框
单选框，基础 el-radio-group 封装，增加了 "允许取消、更多选项" 等扩展功能。
基本用法
点击查看代码
vue
<template>
<s-radio-group v-model="radioValue" :options="radioOptions" />
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
const radioValue = ref<string | undefined>();
const radioOptions = reactive<Record<string, string>[]>([
{ label: "选项一", value: "item1" },
{ label: "选项二", value: "item2" },
{ label: "选项三", value: "item3" }
]);
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
按钮选项
点击查看代码
vue
<template>
<s-radio-group v-model="radioValue" :options="radioOptions" radioButton />
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
const radioValue = ref<string | undefined>();
const radioOptions = reactive<Record<string, string>[]>([
{ label: "选项一", value: "item1" },
{ label: "选项二", value: "item2" },
{ label: "选项三", value: "item3" }
]);
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
允许取消
点击查看代码
vue
<template>
<s-radio-group v-model="radioValue" :options="radioOptions" radioButton cancelable />
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
const radioValue = ref<string | undefined>();
const radioOptions = reactive<Record<string, string>[]>([
{ label: "选项一", value: "item1" },
{ label: "选项二", value: "item2" },
{ label: "选项三", value: "item3" }
]);
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
更多选项
点击查看代码
vue
<template>
<s-radio-group v-model="radioValue" :options="radioOptions" :limit="2" />
<br /><br />
<s-radio-group v-model="radioValue" :options="radioOptions" :limit="2" radioButton />
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
const radioValue = ref<string | undefined>();
const radioOptions = reactive<Record<string, string>[]>([
{ label: "选项一", value: "item1" },
{ label: "选项二", value: "item2" },
{ label: "选项三", value: "item3" },
{ label: "选项四", value: "item4" }
]);
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17