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	フォームのリセット	-	-