登录表单 LoginForm

基于 arco-pro 的登录表单快速成型预设

普通登录表单

登录 Arco Design Pro

登录 Arco Design Pro

<script setup lang="ts">
import { LoginForm } from '@vrx-arco/pro-components'
import { Card } from '@arco-design/web-vue'

const handleSubmit = () => {
  return Promise.reject(Error('登录出错'))
}
</script>

<template>
  <Card>
    <div style="width: 400px;margin:auto;padding:20px 0">
      <LoginForm
        title="登录 Arco Design Pro"
        subtitle="登录 Arco Design Pro"
        @submit="handleSubmit"
      />
    </div>
  </Card>
</template>

添加注册，记住密码按钮

登录 Arco Design Pro

登录 Arco Design Pro

记住密码

<script setup lang="ts">
import { LoginForm } from '@vrx-arco/pro-components'
import { Card } from '@arco-design/web-vue'

const handleSubmit = () => {
  return Promise.reject(Error('登录出错'))
}
</script>

<template>
  <Card>
    <div style="width: 400px;margin:auto;padding:20px 0">
      <LoginForm title="登录 Arco Design Pro" subtitle="登录 Arco Design Pro" register remember />
    </div>
  </Card>
</template>

使用内置消息提示组件

请填写用户名密码点击登录进行体验

登录 Arco Design Pro

登录 Arco Design Pro

<script setup lang="ts">
import { LoginForm } from '@vrx-arco/pro-components'
import { Card } from '@arco-design/web-vue'

const handleSubmit = () => {
  return Promise.reject(Error('登录出错'))
}
</script>

<template>
  <Card>
    <div style="width: 400px;margin:auto;padding:20px 0">
      <LoginForm title="登录 Arco Design Pro" subtitle="登录 Arco Design Pro" submit-notice />
    </div>
  </Card>
</template>

API

<login-form> Props

暂无数据

<login-form> Slots

暂无数据

<login-form> Events

暂无数据