enn-login-page-v3

npm 地址

gitlab 地址

使用步骤

1. npm i enn-login-page-v3
2. 在页面中使用该组件import { LoginPage, LoginForm } from "enn-login-page-v3";
3. 示例

<template>
  <LoginPage title="LoRaWAN网络控制平台">
    <LoginForm
      :if-err="ifError"
      :err-msg="ErrorMsg"
      v-model:loading="loading"
      :has-captcha="false"
      @login="loginhandle"
    >
      <template #otherBtns="{ validate, ref, form }">
        <el-col :span="24">
          <el-button
            class="login-btn"
            type="primary"
            style="width: 100%"
            @click="onClick(validate, form, ref)"
            >注册</el-button
          >
        </el-col>
      </template>
    </LoginForm>
  </LoginPage>
</template>

<script setup>
import { LoginPage, LoginForm } from 'enn-login-page-v3'
import { ref } from 'vue'
const ifError = ref(false)
const ErrorMsg = ref('')
const loading = ref(false)

// 登录逻辑
const loginhandle = () => {}
// 注册逻辑，如果有的话
const onClick = () => {}
</script>

LoginPage API

LoginPage.props

参数	类型	必填	默认值	说明
title	string	是	-	系统登录名称
logo	string	否	1 logo 图	logo
bgImgs	array	否	4 张背景图	轮播背景图
bgDuration	number	否	10	每张背景图渐变时长

LoginPage.slots

插槽名	默认值	说明
默认插槽	/src/FormEle.vue	登录表单

LoginForm API

LoginForm.props

参数	类型	必填	默认值	说明
loading	boolean	否	-	登录按钮的 loading
ifErr	boolean	否	false	是否显示登陆失败提示
errMsg	string	否	''	登陆失败提示语
errCloseable	boolean	否	true	登陆失败提示语是否可关闭
showPassword	boolean	否	true	秘密内容是否可见
hasCaptcha	boolean	否	false	是否有验证码
captchaApi	Promise	否	-	返回验证码图片
usernameRules	object	否	参照 el-form-item 的 rules	用户名验证规则
passwordRules	object	否	参照 el-form-item 的 rules	密码验证规则
captchaRules	object	否	参照 el-form-item 的 rules	验证码验证规则

LoginForm.slot

插槽名	默认值	说明
btns	登录按钮	#btns="{form,validate}"可以获取 form 数据及验证函数
otherBtns	无	#otherBtns="{form,validate}"可以获取 form 数据及验证函数

validate 调用方式:

validate((valid) => {
  console.log(valid, form);
});

LoginForm.events

事件	说明
login	点击登录，返回登录表单数据