【建议】关于暴露表单回车事件的建议

[rovast]

反馈问题请先查看文档和务必提供详细的复现代码，遵循如下格式，描述不清楚的问题将会直接关闭。

vue和ui框架

vue2 iview

问题描述

当前，当用户在输入时，点击回车会刷新页面。

如何复现

无

期望的结果

是否可以考虑在 上暴露出回车事件 @keyup.native.enter。这样监听用户回车后，可以做

• 直接搜索（适用于把 vue-form 作为列表的搜索条件）
• 防止误操作（适用于把 vue-form 作为添加表单）

类似 iview form 监听的回车处理

<Form
  @submit.native.prevent
  @keyup.native.enter="handleSearch"
>

[rovast]

通过拦截form 的 input 事件暂时先满足要求了。

<VueForm
  ref="vueFormRef"
  v-model="form"
  :schema="searchSchema"
  :form-props="searchFormProps"
  :form-footer="{show:false}"
>
</VueForm>

beforeDestroy() {
  this.removeFormInputEvents()
},

mounted() {
  this.hackFormInputEvents()
},

// methods
// FIXME 暂时 vueForm 没有公布 enter 事件，这里进行 hack 处理
hackFormInputEvents() {
  this.inputElements = this.$refs.vueFormRef.$el.getElementsByTagName('input')
  for (const el of this.inputElements) {
    el.addEventListener('keypress', this.keyPressHandler)
    el.addEventListener('keyup', this.keyUpHandler)
  }
},
removeFormInputEvents() {
  for (const el of this.inputElements) {
    console.log('unbind')
    el.removeEventListener('keypress', this.keyPressHandler)
    el.removeEventListener('keyup', this.keyUpHandler)
  }
},
keyPressHandler(event) {
  if (event.code === 'Enter') {
    event.preventDefault()
  }
},
keyUpHandler(event) {
  if (event.code === 'Enter') {
    this.$emit('on-enter')
  }
}

[lljj-x]

可以支持，配置不会直接是透传 ui组件form 的emit，很容易和现有的事件冲突，比如 onSubmit

[lljj-x]

另外你这个实现太复杂了，你只需要 @keyup.native.enter="this.$refs.form.$refs.genEditForm.validate()"

[lljj-x]

升级到 1.10 版本，使用如下形式吧

<vueForm @keyup.native.enter="enterSubmit">
</vueForm>

methods: {
 async enterSubmit() {
   await this.$refs.schemaForm.$$uiFormRef.validate()
    this.doSomething()
  }
}