<script lang='ts' setup>
import { Field, Form } from "vee-validate";
</script>

<template>
  <IonPage>
    <IonHeader class="ion-no-border">
      <IonToolbar class="ion-toolbar">
        <ui-back-button slot="start" />
      </IonToolbar>
    </IonHeader>
    <IonContent :fullscreen="true" class="ion-padding">
      <div class="text-2xl font-semibold mb-5">
        用户注册
      </div>

      <Form>
        <Field v-slot="{ field, errorMessage }" name="email" type="email">
          <div class="mb-4">
            <ui-input
              v-bind="field"
              placeholder="请输入邮箱"
              type="email"
            />
            <div v-if="errorMessage" class="text-xs text-red-500 mt-1">
              {{ errorMessage }}
            </div>
          </div>
        </Field>
      </Form>
    </IonContent>
  </IonPage>
</template>

<style lang='css' scoped></style>
