更新记录

1.0.4（2022-08-03）

• 添加作用域插槽：third，可自定义第三方账号登录样式

1.0.3（2022-07-12）

• 修改样式
  • 按钮颜色：若配置的渐变$hic-login-btn-bg-color不生效，使用背景颜色$hic-login-bg-color
• 添加参数
  • autoClearPwd：删除账号，是否自动清空密码

平台兼容性

hic-login 登录组件

基本用法

示例

• 修改登录组件主题颜色：uni.scss文件引入默认的scss自定义变量

  @import '~@/uni_modules/hic-login/theme.scss';

  或者不引入，直接在uni.scss文件添加scss自定义变量

  $hic-login-bg-color: #4e9eeb;       // 背景颜色
  $hic-login-input-bg: #f8f8f8;       // 输入框背景颜色
  $hic-login-triangle-color: #5057cb; // 输入框右侧三角颜色
  $hic-login-btn-bg-color: linear-gradient(45deg, #0081ff, #1cbbb4);  // 按钮背景渐变色
  $hic-login-btn-color: #fff;         // 按钮文字颜色
  // 文字大小
  $font-xl: 19px;
  $font-df: 30rpx;
  $font-light: #c0c4cc;   // 文字颜色

• 组件示例

<hic-login
    logo="/static/images/logo/logo_white.png"
    title="益农数字农业"
    :props="props"
    :history="history"
    :thirdProps="thirdProps"
    wxProfile
    @login="handleLogin"
    @remove="remove"
    @third-login="thirdLogin"
    @wx-login="wxLogin">
    <template #user>
        <text class="cuIcon-my form-input"></text>
    </template>
    <template #pwd>
        <text class="cuIcon-unlock form-input"></text>
    </template>
    <template #bottom>
        <view>福建海智信息技术有限公司</view>
        <view class="text-center">0591-88515005</view>
    </template>
</hic-login>

对应script

export default {
    data() {
        return {
            props: {account: 'loginName', password: 'password'},
            history: [],
            thirdProps: [
                { provider: 'weixin', text: '微信授权', icon: 'cuIcon-weixin', color: 'lines-green' }
            ]
        }
    },
    methods: {
        handleLogin(form) {
            // 表单验证
            console.log(form);  // {loginName: '13xxx81', password: '123'}
        },
        remove(item, index) {
            uni.showModal({
                title: '提示',
                content: `确定删除账号${item.loginName}？`,
                success: (res) => {
                    this.history.splice(index, 1);
                }
            });
        },
        thirdLogin(res) {
            console.log(res);   // {errMsg: "login:ok", code: "xxx"}
        },
        wxLogin(data) {
            console.log(data);  // {code: "xxx", userInfo: {nickName: 'xx', gender: '0', avatarUrl: 'http://xxx'}}
        }
    }
};

对应css

.form-input {
    font-size: 45rpx;
    color: $hic-login-triangle-color;
    margin: 0 10rpx;
}
.cuIcon-weixin:before {
    content: "\e612";
}
.text-green, .line-green, .lines-green {
    color: #39b54a;
}

• 可以修改pages.json，取消默认的原生导航栏

{
    "path": "pages/login/login",
    "style": {
        "navigationBarTitleText": "登录",
        "navigationStyle": "custom"
    }
}

API

hic-login Props

props Options

参考：{account: 'loginName', password: 'password'}

thirdProps Options

参考：{ provider: 'weixin', text: '微信授权', icon: 'cuIcon-weixin', color: 'lines-green' }

hic-login Slot

hic-login Events