业务组件说明

FastLogin 是一个基于Vue3+Vant的业务组件，用于通用的登录组件，适用于多个场景，如病例征集、运营后台等。提高了开发效率，减小了bug率。

依赖安装

1. 考虑依赖轻量级及现实使用，在组件中使用了但并没有包含Vant源码，所以项目中若并没有安装vant，请使用下面命令进行安装，若以安装请忽略。

yarn add vant@^4.0.0-0

2. 安装组件依赖 (使用vue2组件)

yarn add fast-login3

使用示例

vue项目入口文件 main.js

import vant from 'vant'
import 'vant/lib/index.css'

import fastLogin from 'fast-login3/lib/fast-login3.umd' // 引入组件

import 'fast-login3/lib/fast-login3.css'   // 引入样式

app
.use(vant)
.use(fastLogin) // 本地vue项目注册组件

YbLogin组件使用

<template>
  <fast-login 
   :findPasswordPath="true"
   tokenKey="kangsaidiToken"
   :login="login"
   :submitFunByProp="submitFunByProp"
  />
</template>

<script setup>
  import { useRouter } from 'vue-router'
  const router = useRouter()
   const login = async (data) => {
      return await {
          "code": 0,
          "msg": "登录成功",
          "data": {
              "id": 2,
              "realName": "解飞",
              "username": "18311110000",
              "password": "112233",
              "region": "广西管理区",
              "token": "token",	
              "type": 2,
              "front": true
          }
      }
   }
   const submitFunByProp = async (res) => {
    router.push('/loginSuccess')
   }
</script>

<style>
</style>

API说明

Props

| 属性名 | 类型 | 必填 | 默认值 | 说明 | | :---------------: | :------: | :---: | :---------------------: | :---------------------------------------------------------------------: | | login | Function | true | -- | 登录函数，({username: '', password: ''}) => Promise({ data: { token: '' } }) | | title | String | false | "欢迎来到Login登录系统" | 描述登录表单的title | | regPwd | RegExp | false | /^[0-9A-Za-z]{1,10}$/ | 密码正则表达式 | | regPwdMsg | String | false | 密码应是1-10位数字、字母 | 密码格式错误提示 | | tokenKey | String | false | "token" | 本地用于localStorage中用于存储token的key | | submitFunByProp | Function | false | -- | 登录之后要做的额外函数 async (data) => {} |