np-form 回车提交表单

支持在表单中的单行输入框按回车键触发表单提交。

last 模式

仅在最后一个表单项按回车时提交。

浏览器不支持，请手动复制 enter-submit-last.vue

<template>
  <np-form :option="option" />
</template>
<script setup lang="tsx">
import type { FormOption } from 'naive-plus'

const option: FormOption = {
  enterSubmitMode: 'last',
  onSubmit: data => {
    console.log('提交:', data)
    return new Promise(resolve => setTimeout(resolve, 1000))
  },
  columns: [
    {
      label: '用户名',
      key: 'username',
      type: 'input',
      rule: { required: true, message: '请输入用户名' },
    },
    {
      label: '密码',
      key: 'password',
      type: 'password',
      rule: { required: true, message: '请输入密码' },
    },
  ],
}
</script>

all 模式

在任意表单项按回车都提交。

浏览器不支持，请手动复制 enter-submit-all.vue

<template>
  <np-form :option="option" />
</template>
<script setup lang="tsx">
import type { FormOption } from 'naive-plus'

const option: FormOption = {
  enterSubmitMode: 'all',
  onSubmit: data => {
    console.log('提交:', data)
    return new Promise(resolve => setTimeout(resolve, 1000))
  },
  columns: [
    {
      label: '用户名',
      key: 'username',
      type: 'input',
      rule: { required: true, message: '请输入用户名' },
    },
    {
      label: '密码',
      key: 'password',
      type: 'password',
      rule: { required: true, message: '请输入密码' },
    },
  ],
}
</script>

false 模式

禁用回车提交功能。

浏览器不支持，请手动复制 enter-submit-false.vue

<template>
  <np-form :option="option" />
</template>
<script setup lang="tsx">
import type { FormOption } from 'naive-plus'

const option: FormOption = {
  enterSubmitMode: false,
  onSubmit: data => {
    console.log('提交:', data)
    return new Promise(resolve => setTimeout(resolve, 1000))
  },
  columns: [
    {
      label: '用户名',
      key: 'username',
      type: 'input',
      rule: { required: true, message: '请输入用户名' },
    },
    {
      label: '密码',
      key: 'password',
      type: 'password',
      rule: { required: true, message: '请输入密码' },
    },
  ],
}
</script>

组件配置

属性	说明	类型	默认值
enterSubmitMode	回车提交表单的方式	'last' | 'all' | false	false