v-formly-v3

Radio 单选框

单选框。

代码演示

<template>
  <div>
    <v-formly-v3 ref="form" v-model="formData" :meta="meta"> </v-formly-v3>
    <div class="btns">
      <a-button type="danger" @click="clear"> 重置 </a-button>
      <a-button type="primary" @click="submit"> 提交 </a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, toRaw, unref } from "vue";
import type VFormly from "@/ant-design-vue/AFormly.vue";

const form = ref<null | InstanceType<typeof VFormly>>(null);
const meta = {
  type: "object",
  properties: {
    single: {
      title: "基本",
      type: "string",
      ui: {
        showRequired: true,
        component: "radio",
        options: ["同意"],
      },
    },
    multiple: {
      title: "规格",
      type: "string",
      default: "中",
      ui: {
        component: "radio",
        options: ["大", "中", "小"],
      },
    },
    buttonStyle: {
      title: "按钮样式",
      type: "string",
      ui: {
        component: "radio",
        options: [
          { label: "北京", value: "北京" },
          { label: "上海", value: "上海" },
          { label: "深圳", value: "深圳", disabled: true },
          { label: "广州", value: "广州" },
        ],
        optionType: "button",
        buttonStyle: "outline",
      },
    },
    buttonStyleSolid: {
      title: "按钮样式",
      type: "string",
      default: "上海",
      ui: {
        component: "radio",
        options: [
          { label: "北京", value: "北京" },
          { label: "上海", value: "上海" },
          { label: "深圳", value: "深圳", disabled: true },
          { label: "广州", value: "广州" },
        ],
        optionType: "button",
        buttonStyle: "solid",
      },
    },
    vertical: {
      title: "竖向排列",
      type: "string",
      ui: {
        component: "radio",
        options: ["大", "中", "小"],
        direction: "vertical",
      },
    },
  },
  required: ["single"],
};
let formData: any = ref({});

function clear() {
  formData.value = null;
}

async function submit() {
  let valid = await form.value!.validate();
  if (valid) {
    console.log(toRaw(unref(formData)));
  }
}
</script>

<style scoped></style>
复制

API

我们只列出属性中不一致的或新添加的，一致的地方请参考 具体组件库 文档

meta 属性

成员说明类型默认值
:readOnly禁用状态boolean-

meta.ui 属性(antdv)

参考 RadioGroup 组件属性

成员说明类型默认值
:component指定组件为'radio'stringradio
:direction单选框展示方向，默认横向展示，vertical则竖向展示string-
:showRequired是否显示标签前的红色*号booleanfalse
@change选项变化时的回调函数Function(value: any)-

meta.ui 属性(element)

参考 RadioGroup 组件属性

成员说明类型默认值
:component指定组件为'radio'stringradio
:button是否为按钮类型单选框boolean-
:showRequired是否显示标签前的红色*号booleanfalse
@change绑定值变化时触发的事件选中的 Radio label 值-