vue移动端登录页面（包含国际区号选择、账号密码登录、手机登录和忘记密码）

bm-vlogin

介绍

基于vue的移动端登录组件库。
包含：普通登录页面、手机登录页面、国际区号选择页面和重置密码页面

特性

• 支持组件按需加载
• 可以在组件配置中自行选择需要的元素
• 区号选择支持字母检索和中英文、首拼、区号搜索

• 展示

  

  安装

  npm install bm-vlogin --save
  

  引入

  //main.js中
  
  //全部引入
  import bmVlogin from 'bm-vlogin'
  Vue.use(bmVlogin)
  
  //按需引入
  import {
       bm_login,bm_phone_login,bm_select_code,bm_reset_password} from 'bm-vlogin'
  Vue.use(bm_login);
  Vue.use(bm_phone_login);
  Vue.use(bm_select_code);
  Vue.use(bm_reset_password);
  

  使用

  示例的路由配置

    routes: [
       {
       
         path: '/',
         name: 'login',
         component: login
       },
       {
       
         path: '/phoneLogin',
         name: 'phoneLogin',
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route
         // which is lazy-loaded when the route is visited.
         component: () => import('./views/phone_login.vue')
       },
       {
       
         path: '/selectCode',
         name: 'selectCode',
         component: () => import('./views/select_code.vue')
       },
       {
       
         path: '/phoneValidate',
         name: 'phoneValidate',
         component: () => import('./views/phone_validate.vue')
       },
       {
       
         path: '/phoneValidate/resetPassword',
         name: 'resetPassword',
         component: () => import('./views/reset_password.vue')
       },
     ]
  

• 登录页面(bm_login)
• 配置:

  参数	类型	默认值	备注
  baseConfig	Object	forgetPwd_register_protocol: true, forgetPassword:true, register:true, protocol:true, quickLogin:true, rememberPassword:true, otherLoginWays: true, login_btn_value:'登录'	根据需要选择 相关内容， 需要用true， 不需要用false
  iconsBase64	Object	username_icon username_blur username_active password_icon password_active password_hidden password_visiable	修改默认图标 （包括用户和密码图标, 默认图标采用base64格式）

  使用示例

  template

   <bm_login :base-config="myConfig"
             v-on:phoneLogin="to_phoneLogin"
             v-on:forgetPassword="to_forgetPassword"
             v-on:toProtocol="to_protocol"
             v-on:register="to_register"
             v-on:qqLogin="qq_login"
             v-on:weixinLogin="weixin_login"
             v-on:weiboLogin="weibo_login"
             @parent_rememberMe="rememberMe"
             @parent_login="login">
        <!-----------------------可以自定义内容放在header中(以下为示例)--------------------------->
         <template v-slot:header>
             <div style="display: flex;flex-direction: row;justify-content: space-around;align-items: center">
                 <h2>Welcome To Login</h2>
             </div>
         </template>
   </bm_login>
  

  script

      data(){
       
          return{
       
              myConfig:{
       
                  forgetPwd_register_protocol: true,
                      //为false时，下面三项设置为true无效
                  forgetPassword:true,
                  register:true,
                  protocol:true,
                  quickLogin:true,
                  otherLoginWays: true,
                  login_btn_value:'登录'
              }
          }
      },
      methods:{
                                
       //根据配置自行选择需要的方法
          to_phoneLogin(){