Radio ​

vue

<template>
  <FormProvider :form="form">
    <SchemaField>
      <SchemaStringField
        name="input1"
        title="单选"
        x-decorator="FormItem"
        x-component="Radio.Group"
        :enum="[
          {
            label: '选项1',
            value: 1,
          },
          {
            label: '选项2',
            value: 2,
          },
        ]"
      />
      <SchemaStringField
        name="input2"
        title="禁用"
        x-decorator="FormItem"
        x-component="Radio.Group"
        :default="2"
        :enum="[
          {
            label: '选项1',
            value: 1,
            disabled: true,
          },
          {
            label: '选项2',
            value: 2,
            disabled: true,
          },
        ]"
      />
      <SchemaStringField
        name="input3"
        title="按钮"
        x-decorator="FormItem"
        x-component="Radio.Group"
        :x-component-props="{
          optionType: 'button',
          size: 'small',
        }"
        :default="2"
        :enum="[
          {
            label: '选项1',
            value: 1,
          },
          {
            label: '选项2',
            value: 2,
          },
        ]"
      />
      <SchemaStringField
        name="input4"
        title="边框"
        x-decorator="FormItem"
        x-component="Radio.Group"
        :x-component-props="{
          size: 'small',
        }"
        :default="2"
        :enum="[
          {
            label: '选项1',
            value: 1,
            border: true,
          },
          {
            label: '选项2',
            value: 2,
            border: true,
          },
        ]"
      />
    </SchemaField>
    <Submit @submit="log">提交</Submit>
  </FormProvider>
</template>

<script>
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/vue'
import { Formily } from 'element-plus-x'
const { FormItem, Radio, Submit } = Formily

const form = createForm()
const fields = createSchemaField({
  components: {
    FormItem,
    Radio,
  },
})

export default {
  components: { FormProvider, ...fields, Submit },
  data() {
    return {
      form,
    }
  },
  methods: {
    log(value) {
      console.log(value)
    },
  },
}
</script>

vue

<template>
  <Form :form="form">
    <SchemaField :schema="schema" />
    <Submit @submit="onSubmit">提交</Submit>
  </Form>
</template>

<script>
import { createForm } from '@formily/core'
import { createSchemaField } from '@formily/vue'
import { Formily } from 'element-plus-x'
const { Form, FormItem, Radio, Submit } = Formily

const { SchemaField } = createSchemaField({
  components: {
    FormItem,
    Radio,
  },
})

export default {
  components: { Form, SchemaField, Submit },
  data() {
    const schema = {
      type: 'object',
      properties: {
        radio: {
          type: 'boolean',
          title: '单选',
          enum: [
            {
              label: '选项1',
              value: 1,
            },
            {
              label: '选项2',
              value: 2,
            },
          ],
          'x-decorator': 'FormItem',
          'x-component': 'Radio.Group',
          'x-component-props': {
            optionType: 'button',
          },
        },
      },
    }

    const form = createForm()

    return {
      form,
      schema,
    }
  },
  methods: {
    onSubmit(value) {
      console.log(value)
    },
  },
}
</script>

vue

<template>
  <FormProvider :form="form">
    <Field
      name="input"
      title="单选"
      :decorator="[FormItem]"
      :component="[Radio.Group]"
      :data-source="[
        {
          label: '选项1',
          value: 1,
        },
        {
          label: '选项2',
          value: 2,
        },
      ]"
    />
    <Submit @submit="log">提交</Submit>
  </FormProvider>
</template>

<script>
import { createForm } from '@formily/core'
import { Field, FormProvider } from '@formily/vue'
import { Formily } from 'element-plus-x'
const { FormItem, Radio, Submit } = Formily

const form = createForm()

export default {
  components: { FormProvider, Field, Submit },
  data() {
    return {
      FormItem,
      Radio,
      form,
    }
  },
  methods: {
    log(value) {
      console.log(value)
    },
  },
}
</script>