Silver Formily Vant1.0.1

Appearance

Mobile Preview Open
Open mobile preview

Submit ​

Submit 是和 Formily 表单状态打通的 Vant 提交按钮，支持原生 submit、手动 form.submit、提交中 loading、成功/失败回调。

提示

从使用习惯上可以把props里的onSubmitSuccess的这种回调函数写成事件的形式： @submit-success

基础提交 ​

vue
<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { Form, FormButtonGroup, FormItem, Input, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    username: 'silver-formily',
    mobile: '13800138000',
  },
})

async function handleSubmit(values: typeof form.values) {
  await showDemoResult(values)
}
</script>

<template>
  <Form :form="form" label-width="4.5em">
    <Field
      name="username"
      title="用户名"
      :validator="{ required: true, message: '请输入用户名' }"
      :decorator="[FormItem]"
      :component="[Input, { placeholder: '请输入用户名' }]"
    />
    <Field
      name="mobile"
      title="手机号"
      :validator="{ required: true, message: '请输入手机号' }"
      :decorator="[FormItem]"
      :component="[Input, { type: 'tel', placeholder: '请输入手机号' }]"
    />
    <FormButtonGroup>
      <Submit @submit="handleSubmit" />
    </FormButtonGroup>
  </Form>
</template>

加载态 ​

vue
<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { Form, FormButtonGroup, FormItem, Input, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    keyword: 'Submit loading demo',
  },
})

async function handleSubmit(values: typeof form.values) {
  await new Promise(resolve => setTimeout(resolve, 1000))
  await showDemoResult(values, '异步提交完成')
}
</script>

<template>
  <Form :form="form" label-width="4.5em">
    <Field
      name="keyword"
      title="关键词"
      :validator="{ required: true, message: '请输入关键词' }"
      :decorator="[FormItem]"
      :component="[Input, { placeholder: '点击提交后观察按钮 loading' }]"
    />
    <FormButtonGroup>
      <Submit
        loading-text="提交中..."
        @submit="handleSubmit"
      >
        异步提交
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

API ​

Submit 专属属性 ​

其余按钮属性主要继承自 Vant Button 官方文档。

属性名类型描述默认值
onClickFunction点击事件，返回 false 时会阻止手动提交或原生提交-
onSubmitFunction主动调用 form.submit 的提交回调-
onSubmitSuccessFunctiononSubmit 成功后的回调-
onSubmitFailedFunctiononSubmit 校验或提交流程失败后的回调-
submitboolean是否强制切换为手动提交模式；开启后会渲染成普通按钮态false

feedbacks类型参考IFormFeedback