Login 登录

介绍

LoginPage是一个登录页示例组件

引入

import Vue from 'vue';
import { LoginPage } from '@lambo-design-mobile/login-epage';
 
Vue.use(LoginPage);

代码演示

基础用法

<login-page :loading="loading" :logo-img="logoImg" :title="title" @on-success-valid="handleLogin"/>

import { Notify } from 'vant';
export default {
  components: {
    [Notify.Component.name]: Notify.Component,
  },
  data() {
    return {
      loading:  false ,
      captchaImgUrl: "",
      logoImg: "/docs/logo.png",
      pasCryptor:  "",
      msg:  "",
      title:  '云庭' 
    }
  },
  methods: {
    async handleLogin({ userName, password, validCodeInput, validCodeId}) {
      this.msg = ''
      this.loading = true
       // 完成认证 并处理后续逻辑
      // eslint-disable-next-line no-global-assign
      self = this;
      setTimeout(function() {
        self.loading=false;
        Notify({ type: 'success', message: '登录成功' });
      }, 3000);

    },
   
  }
}

API

Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|------|------| | loading | 按钮加载状态 | boolean | false | - | | captchaImgUrl | 验证码url | string | - | - | | logoImg | 登录页ogo url | string | ‘/docs/logo.png’ | - | | pasCryptor | 密码加密方式 | string | ‘’ | - | | msg | 认证错误提示内容 | string | ‘’ | - | | title | 登录页标题 | string | ‘云庭’ | - |

Events

| 事件名 | 说明 | 回调参数 | |------|------|------| | on-success-valid | 登录按钮触发 | param |