@gaopeng123/login-module

login-module

登录模块，统一管理登录逻辑

属性配置

属性	说明	类型	默认值
title	项目上面的项目名称	string	某某系统
id	拼接本地数据存储的key值	string	login-module
main-style	登录页样式，可替换背景图	string	''
title-style	title的样式	string	''
body-style	form表单的样式	string	''
item-style	form表单每一项的样式	string	''
method	请求类型 GET POST	string	POST
url	是否需要组件去处理登录逻辑， 默认fetch下发数据请求	string	null
user	form表单用户的name属性	string	user
password	form表单密码的name属性	string	password
password-text	密码是否支持明文显示 plain支持切换明文 cipher不支持	string	plain
captcha	验证码能力，同时定义验证码字段名词	string	''
captchasrc	验证码src地址，手动设置	string	null
captchaurl	验证码请求地址地址	string | null	null
captchamethod	验证码请求类型	string	POST
publickey	加密公钥	string	null
keeplogged	支持记住密码	boolean	false
browser-remembers-password	是否允许浏览器记住密码	boolean	false
agreement-proprietary	用户协议的主题 （主要体现的解释权）例如：干饭人集团 用户协议中，会将title和“干饭人集团”进行拼接	string	''
forgot-password-url	是否支持忘记密码功能，如果传递url 插件处理密码找回逻辑 否则使用事件监听处理	url | boolean	‘’
phone-login-url	手机号登录，如果传递url 则插件会处理验证码请求， 如果不传则使用监听函数处理	url | boolean	‘’
slot
tabs	表单上方title下方区域位置
username-helper	表单用户名输入区域位置

事件配置

（注意webpace5摇树配置会导致导入不可用时，请直接使用import ‘@gaopeng123/login-module’ 导入)

submit事件 在点击登录时触发，传递的登录信息在，detail字段中
afterSubmit 在登录数据下发服务端后触发 用于处理登录后的路由跳转等逻辑
submitError 在fetch出错情况下触发
captchaClick 在点击验证码的时候触发

<login-module
    url="/login"
    method="POST"
    publickey="*"
    user="userId"
    password="password"
    captcha="captcha"
    captchamethod="GET"
    captchaurl="/captcha"
    id="form"
    main-style="background-image: url(./assets/background.jpg)"
    body-style="right: 200px;"
    title="系统">
</login-module>

// 事件订阅
<script>
        const form = document.querySelector('#form');
    // 提交事件
    form.addEventListener('submit', (data)=> {
        console.log(data)
    });
    // fetch请求响应后
    form.addEventListener('afterSubmit', (data)=> {
        console.log(data)
    });
    // fetch请求失败后
    form.addEventListener('submitError', (data)=> {
        console.log(data)
    });
    // 点击验证码触发事件
    form.addEventListener('captchaClick', (data) => {
        console.log(data);
        form.setAttribute('captchasrc', '/iconfont/test.svg')   
    });
    // 密码重置
    form.addEventListener('resetPasswordSubmit', (data) => {
        console.log('resetPasswordSubmit', data);
        // 关闭窗口
        form.success();
    });
    /**
    * 短信验证码接口
    */
    form.addEventListener('sendSMSVerificationCode', (data) => {
        console.log('sendSMSVerificationCode', data);
    });
</script>

CSS variables

变量名	含义	默认值
--login-module-login-title-color	title颜色	#333333
--login-module-login-title-fontSize	title字体fontSize	28px
--login-module-login-title-fontWeight	title字体fontWeight	600
--login-module-login-title-fontFamily	title字体fontFamily	PingFangSC-Semibold, PingFang SC
--login-module-agreement-proprietary-color	agreement-proprietary颜色	#42b983

slot

tabs // 顶部
username-helper // 账号下方
footer // 底部