ant-design-vue/components/radio/demo/radioGroup-with-name.vue

30 lines
1010 B
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<docs>
---
order: 6
title:
zh-CN: 单选组合 - 配合 name 使用
en-US: Radio.Group with name
---
## zh-CN
可以为 Radio.Group 配置 `name` 参数为组合内的 input 元素赋予相同的 `name` 属性使浏览器把 Radio.Group 下的 Radio 真正看作是一组例如可以通过方向键始终**在同一组内**更改选项
## en-US
Passing the `name` property to all `input[type="radio"]` that are in the same Radio.Group. It is usually used to let the browser see your Radio.Group as a real "group" and keep the default behavior. For example, using left/right keyboard arrow to change your selection that in the same Radio.Group.
</docs>
<template>
<a-radio-group v-model:value="value" name="radioGroup">
<a-radio value="1">A</a-radio>
<a-radio value="2">B</a-radio>
<a-radio value="3">C</a-radio>
<a-radio value="4">D</a-radio>
</a-radio-group>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const value = ref<string>('1');
</script>