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 // 底部