Login 登录组件

avue-login 封装用户名、密码、图片验证码或短信验证码输入。它不发送登录、验证码请求，也不保存身份令牌，实际认证由业务回调完成。

效果预览可直接操作下方示例

三种本地示例展示普通登录、图片验证码刷新和短信倒计时。点击提交只展示校验结果，不会向服务端发送账号或密码。

正在加载示例…

<template>
  <div class="login-demo-grid">
    <section v-for="item in examples" :key="item.id" class="login-demo-card">
      <h3>{{ item.title }}</h3>
      <avue-login v-model="item.form" :option="item.option" :codesrc="captchaUrl"
                  @submit="value => handleSubmit(item.id, value)"
                  @refresh="captchaSeed += 1" @send="handleSend">
        <template #footer>
          <p class="login-demo-note">本地演示，不发送登录请求。</p>
        </template>
      </avue-login>
    </section>
  </div>
  <el-alert v-if="message" :title="message" type="info" :closable="false" />
</template>

<script setup>
import { computed, ref } from 'vue'
const captchaSeed = ref(1234)
const message = ref('')
const captchaUrl = computed(() => {
  const code = String(captchaSeed.value).slice(-4)
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="90" height="32"><rect width="90" height="32" fill="#ecf5ff"/><text x="45" y="23" text-anchor="middle" font-size="22" letter-spacing="3" fill="#409eff">${code}</text></svg>`
  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
})
const required = label => [{ required: true, message: `请输入${label}`, trigger: 'blur' }]
const examples = ref([
  { id: 'account', title: '账号登录与提交字段映射', form: {}, option: {
    width: '100%', column: {
      username: { label: '账号', prop: 'account', rules: required('账号') },
      password: { rules: required('密码') }, code: { hide: true }
    }
  } },
  { id: 'image', title: '点击图片刷新验证码', form: {}, option: {
    width: '100%', codeType: 'img', column: {
      username: { rules: required('用户名') }, password: { rules: required('密码') },
      code: { rules: required('验证码') }
    }
  } },
  { id: 'phone', title: '短信验证码与倒计时', form: {}, option: {
    width: '100%', codeType: 'phone', time: 10, column: {
      username: { label: '手机号', placeholder: '输入演示手机号', rules: required('手机号') },
      password: { hide: true }, code: { rules: required('验证码') }
    }
  } }
])
function handleSubmit(type, value) {
  message.value = `示例 ${type} 校验通过，提交字段：${Object.keys(value).join('、')}`
}
function handleSend(done, form) {
  if (!/^1\d{10}$/.test(form.username || '')) {
    message.value = '请先输入 11 位手机号，再模拟发送验证码'
    return
  }
  message.value = '已模拟发送，调用 done() 开始 10 秒倒计时'
  done()
}
</script>

<style scoped>
.login-demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.login-demo-card { min-width: 0; }
.login-demo-card h3 { margin: 0 0 18px; font-size: 16px; }
.login-demo-note { color: var(--el-text-color-secondary); font-size: 12px; }
</style>

Props 与 Option

参数	说明	类型	默认值
modelValue / v-model	表单数据，内部字段始终为 username / password / code	object	{}
option	登录配置	object	{}
codesrc	图片验证码 URL	string	—
loading / disabled	提交加载态 / 禁用	boolean	false

option 字段	说明	默认值
width	表单宽度，推荐数字或百分比	100%
labelWidth	标签宽度，推荐数字	88
codeType	img 图片验证码或 phone 短信验证码	img
time	点击发送后的倒计时秒数	60
submitText	提交按钮文字	语言包文案
column	对象，键为 username / password / code，不是数组	{}

每个 column 字段支持 hide、label、rules、tip、prefixIcon、placeholder、autocomplete 和 prop。prop 仅映射 submit 输出的字段名，例如 username.prop = 'account'；v-model 和 footer 插槽内仍使用 username。

Events

事件	参数	说明
update:modelValue	表单对象副本	输入变化
submit	按 column.*.prop 映射后的对象	表单规则校验通过
invalid	Element Plus 校验错误字段对象	校验失败
refresh	无	点击图片验证码
send	done, form	点击发送短信；成功后调用 done() 开始倒计时

短信发送本身不会校验整份表单，也不包含网络请求。请在 send 回调里校验手机号、发送请求，成功后调用 done()；请求失败时不调用。异步发送期间需要防止重复点击，可由业务 loading 控制。time: 0 会回退到默认 60 秒。

Methods 与 Slots

方法	说明
onSubmit()	触发表单校验与提交事件
onSend()	触发发送验证码流程
onRefresh()	触发图片验证码刷新事件
clearTimer()	清除短信倒计时并恢复发送按钮

footer 插槽参数为 { form }，用于登录说明或其他操作。隐藏某个输入框不会自动从提交数据中删除对应字段，业务按接口要求整理数据。