vant2中的单选框

在 Vant2 中，你可以使用 `van-radio` 组件来创建单选框。

首先，确保已经正确导入 Vant 组件库和样式文件。然后，在你的页面或组件中使用以下代码创建一个单选框：

<van-radio v-model="radioValue" name="radioGroup">选项1</van-radio>
<van-radio v-model="radioValue" name="radioGroup">选项2</van-radio>
<van-radio v-model="radioValue" name="radioGroup">选项3</van-radio>

在上面的代码中，`v-model` 绑定了一个名为 `radioValue` 的变量，它将保存用户选择的值。`name` 属性用于将这些单选框组合在一起，确保它们在同一组中。

如果你想设置默认选中的选项，只需将 `radioValue` 变量初始化为你想要的选项值即可。

你还可以为单选框设置其他属性，如 `disabled`、`shape`、`icon-size` 等。详细的用法和可用属性，请参考 Vant 官方文档中的单选框部分。

相关问题

vue下tsx语法写vant4的 单选框

可以使用Vant 4中的`Radio`组件来实现单选框功能。下面是一个使用TSX语法写Vant 4单选框的示例代码：

import { defineComponent, ref } from 'vue';
import { Radio } from 'vant';

export default defineComponent({
  setup() {
    const radioValue = ref('');

    const onChange = (value: string) => {
      radioValue.value = value;
    };

    return () => (
      <div>
        <Radio v-model={radioValue.value} label="1" onChange={onChange}>
          选项一
        </Radio>
        <Radio v-model={radioValue.value} label="2" onChange={onChange}>
          选项二
        </Radio>
        <Radio v-model={radioValue.value} label="3" onChange={onChange}>
          选项三
        </Radio>
      </div>
    );
  },
});

在上面的代码中，我们首先引入了Vant中的`Radio`组件，然后定义了一个`radioValue`变量来保存当前选中的值。接着定义了一个`onChange`方法来处理选项改变时的逻辑。最后在返回的函数中使用`Radio`组件来渲染单选框，并绑定了`v-model`指令来实现数据的双向绑定，同时绑定了`label`和`onChange`属性来完成单选框的选项值和选项改变事件的设置。

注意：在使用Vant 4的TSX语法时，需要先安装`@vue/babel-plugin-jsx`插件，并在`.babelrc`文件中配置插件的使用，以支持TSX语法的编译。

Vant4 的单选框组件 Radio没有rules属性，怎么校验？

Vant4 的 Radio 组件确实没有 rules 属性，但是可以通过监听 change 事件，手动进行校验。具体实现步骤如下：

1. 在表单中添加 ref 属性，方便后续操作。
2. 在 change 事件中，获取当前选中的值，并根据需要进行校验。
3. 如果校验不通过，可以通过 ref 属性获取到 Radio 组件，并手动设置错误提示信息。

以下是示例代码：

<template>
  <van-form ref="form" @submit="onSubmit">
    <van-radio-group v-model="radioValue" @change="onRadioChange">
      <van-radio name="1" label="选项1" />
      <van-radio name="2" label="选项2" />
      <van-radio name="3" label="选项3" />
    </van-radio-group>
    <van-button type="primary" native-type="submit">提交</van-button>
  </van-form>
</template>

<script>
export default {
  data() {
    return {
      radioValue: '',
    };
  },
  methods: {
    onSubmit() {
      // 提交表单
    },
    onRadioChange(value) {
      // 校验
      if (value === '') {
        const radioGroup = this.$refs.form.fields.find(field => field.name === 'radioValue');
        radioGroup.setError('请选择一个选项');
      } else {
        const radioGroup = this.$refs.form.fields.find(field => field.name === 'radioValue');
        radioGroup.clearError();
      }
    },
  },
};
</script>

以上示例中，通过获取表单 ref 属性，可以通过 this.$refs.form 获取到表单中的 Radio 组件。在 onRadioChange 方法中，根据当前选中的值进行校验，如果校验不通过，使用 setError 方法设置错误提示信息；如果校验通过，使用 clearError 方法清除错误提示信息。