login-factory-render-vue3

1.0.1 • Public • Published

github: https://github.com/yanxiao8080/login-factory.git

用低代码的方式生成登陆页

使用

在线编辑登陆页

https://yanxiao8080.github.io/login-factory/#/editor

image.png

image.png

  1. 点击预览按钮打开预览页,修改配置时预览页实时更新 点击保存按钮,将配置下载为config.json 点击读取按钮,选择本地的config.json读取配置
  2. 全局配置,配置项目名称、项目描述、背景图片。
  3. 登陆方式,默认为用户名密码登陆,可点击右侧新增按钮,添加新的登陆方式。点击下方新增表单项,为这个登陆方式添加新的输入框
  4. 编辑提交按钮样式颜色
  5. 表单区域配置用来设置整个表单的位置,宽高、背景颜色和标题的文字、样式
  6. 标题/文字配置用来设置登陆页上的一些文字,可以是登陆页上的大标题,也可以是底部的一些说明文字。为了高自定义,文字可以设置html字符串,样式直接写行内style字符串

导出配置

编辑完成后点击保存按钮导出config.json文件,将config.json文件放到自己的项目目录。

下载登陆页渲染组件

npm install login-factory-render-vue3 -s

目前只封装了vue3的渲染组件,如果需要其他组件参考源码自行封装

渲染出登陆页

<template>
  <LFRenderVue3 :config="config" 
                @formSubmit="formSubmit"></LFRenderVue3>
</template>
<script setup lang="ts">
// 导入渲染组件
import LFRenderVue3 from "login-factory-render-vue3";
// 导入配置
import config from "./config.json";

function formSubmit(type: string, verifyRes:{res:boolean,verifyRes: Record<string, string>}, formData: Record<string, string>) {
  console.log('tabsActive',tabsActive)
  console.log('tabsActive, verifyRes, formData',tabsActive, verifyRes, formData)
}
</script>
  1. :config 登陆页配置

  2. @formSubmit 表单提交事件

  3. formSubmit回调参数

type:多个登陆方式会被放在不同的tabs中,type的值对应当前激活的tabs,等于提交表单的类型

verifyRes.res:表单校验结果,boolean值

verifyRes.verifyRes:导致表单校验失败的字段,key为字段name,value失败原因

formData:表单数据

Readme

Keywords

Package Sidebar

Install

npm i login-factory-render-vue3

Weekly Downloads

1

Version

1.0.1

License

none

Unpacked Size

28.3 kB

Total Files

18

Last publish

Collaborators

  • yanxiaos