rashagu / semi-design-vue

Vue3 UI components based on semi-design and Vue
https://www.kousum.asia
MIT License
80 stars 8 forks source link

Form组件 onSubmit不起作用 #8

Closed twitf closed 7 months ago

twitf commented 7 months ago
<script setup>
import {ref} from "vue";
import {Button, Form, FormInput} from "@kousum/semi-ui-vue";

const username = ref("");
const password = ref("");

const handleSubmit = (values, errors) => {
  console.log(1111)
  if (!errors) {
    console.log('提交的表单数据:', values);
    // 在这里处理表单数据,例如发送请求到服务器
  } else {
    console.log('表单验证错误:', errors);
  }
};
</script>

<template>
  <div class="container">
    <div class="left">
      <div class="content">
        <h1>登录</h1>
        <Form layout="vertical" onSubmit="handleSubmit">
          <FormInput field="username" v-model="username" label="账号" labelPosition="left"/>
          <FormInput field="password" v-model="password" label="密码" labelPosition="left"/>
          <Button htmlType="submit" type='primary' theme='solid'>提交</Button>
        </Form>
      </div>
    </div>
    <div class="right">
      <div class="content">
        <img src="../../assets/login_team.svg" alt="">
      </div>
    </div>

  </div>
</template>

<style scoped>
.container {
  display: flex;
  height: 100vh;
}

.left,
.right {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  text-align: center;
}
</style>

这个handleSubmit 感觉没有调用

rashagu commented 7 months ago

@twitf

  1. 如果用vue template 的话,on事件要改成@,比如onSubmit要改成@submit
  2. handleSubmit 第二个参数event,不是错误信息,看官方文档
  3. 表单项目不需要v-model了,有更好的用法,参考官方文档。而且目前所有组件都没有实现v-model,后面可能会以HOC的形式提供