@lambo-design-mobile/login-page

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: "http://doc.lambo.top/lambo-design/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	‘http://doc.lambo.top/lambo-design/logo.png’	-
pasCryptor	密码加密方式	string	‘’	-
msg	认证错误提示内容	string	‘’	-
title	登录页标题	string	‘云庭’	-

Events

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