InputNumber
数字输入框
Markup Schema 案例
vue
<script lang="ts" setup>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import { FormItem, InputNumber, Submit } from '@silver-formily/element-plus'
const form = createForm()
const { SchemaField, SchemaStringField } = createSchemaField({
components: {
FormItem,
InputNumber,
},
})
async function log(value) {
console.log(value)
}
</script>
<template>
<FormProvider :form="form">
<SchemaField>
<SchemaStringField
name="input"
title="输入框"
x-decorator="FormItem"
x-component="InputNumber"
:x-component-props="{
style: {
width: '240px',
},
}"
/>
</SchemaField>
<Submit @submit="log">
提交
</Submit>
</FormProvider>
</template>JSON Schema 案例
vue
<script lang="ts" setup>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import { FormItem, InputNumber, Submit } from '@silver-formily/element-plus'
const schema = {
type: 'object',
properties: {
inputNumber: {
'type': 'number',
'title': '输入框',
'x-decorator': 'FormItem',
'x-component': 'InputNumber',
'x-component-props': {
style: {
width: '240px',
},
},
},
},
}
const form = createForm()
const { SchemaField } = createSchemaField({
components: {
FormItem,
InputNumber,
},
})
async function onSubmit(value) {
console.log(value)
}
</script>
<template>
<FormProvider :form="form">
<SchemaField :schema="schema" />
<Submit @submit="onSubmit">
提交
</Submit>
</FormProvider>
</template>Template 案例
vue
<script lang="ts" setup>
import { createForm } from '@formily/core'
import { Field, FormProvider } from '@formily/vue'
import { FormItem, InputNumber, Submit } from '@silver-formily/element-plus'
const form = createForm()
async function log(value) {
console.log(value)
}
</script>
<template>
<FormProvider :form="form">
<Field
name="input"
title="输入框"
:decorator="[FormItem]"
:component="[
InputNumber,
{
style: {
width: '240px',
},
},
]"
/>
<Submit @submit="log">
提交
</Submit>
</FormProvider>
</template>API
参考 https://cn.element-plus.org/zh-CN/component/input-number.html