Form 表单

表单容器，自动收集内部控件数据。

代码演示

Name

Agree to terms

SubmitReset

表单提交

点击 Submit 按钮收集所有带 name 的控件值

<m-form @submit="onFormSubmit">
  <m-input name="name" placeholder="Your name" />
  <m-switch name="agree" />
  <m-button type="primary" form-type="submit">Submit</m-button>
  <m-button form-type="reset">Reset</m-button>
</m-form>

<script setup>
function onFormSubmit(e) {
  console.log(e.detail.value) // { name: '...', agree: true }
}
</script>

支持收集的组件

组件	收集方式
<m-input name>	value 属性
<m-textarea name>	value 属性
<m-switch name>	checked 布尔值
<m-slider name>	value 数值
<m-picker name>	value 选中值
<m-radio-group name>	选中 radio 的 value
<m-checkbox-group name>	选中 checkbox 的 value[]

API

事件

属性	说明	类型	默认值
submit	提交表单	{ value: Record<string, any> }	-
reset	重置表单	-	-