vue移动端登录页面（包含国际区号选择、账号密码登录、手机登录和忘记密码）
bm-vlogin
介绍
基于vue3的移动端登录组件库。
包含：普通登录页面、手机登录页面、国际区号选择页面和重置密码页面
特性
展示
安装
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')
},
]
| 参数 | 类型 | 默认值 | 备注 |
|---|---|---|---|
| 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">
<template v-slot:header>
<div style="display: flex;flex-direction: row;justify-content: space-around;align-items: center">
<h2>Welcome To Loginh2>
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(){
//进入手机登录页面
this.$router.push({path:'/phoneLogin'});
},
to_forgetPassword(){
//进入忘记密码页面
},
to_register(){
//进入注册页面
},
to_protocol(){
//阅读协议
},
qq_login(){
//qq登录
},
weixin_login(){
//微信登录
},
weibo_login(){
//微博登录
},
/**
* 记住我功能
* 关闭掉了客户端的cookie实现，请开发者自行与服务端通信实现该功能
*/
rememberMe(isActive) {
console.log("rememberMe:::", isActive); // 该功能是否开启
},
login(input_info){
//登录
console.log(input_info); //用户输入的用户名和密码
let params = new URLSearchParams();
params.append('YourParamsName1',input_info.username);
params.append('YourParamsName2',input_info.password);
this.axios.post('xxx',params)
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
})
}
}
配置:
| 参数 | 类型 | 默认值 | 备注 |
|---|---|---|---|
| baseConfig | Object | accountLogin:true, changedPhone: true, protocol: true, otherLoginWays: true, code_length:'4', login_btn_value:'登录' |
根据需要选择 相关内容，需要用true， 不需要用false code_length为默认验证码位数 |
使用示例
template
<bm_phone_login v-on:accountLogin="to_account_login"
v-on:changedPhone="to_change_phone"
v-on:qq_login="qqLogin"
v-on:weixin_login="weixinLogin"
v-on:weibo_login="weiboLogin"
@parent_choose_area="to_chooseArea"
@parent_get_code="getCode"
@parent_phone_login="phoneLogin"
:base-config="myConfig">
<template v-slot:header>
<div style="display: flex;flex-direction: row;justify-content: space-around;align-items: center">
<h2>Welcome To PhoneLoginh2>
div>
template>
<template v-slot:country_tel>+{{countryTel}}template>
bm_phone_login>
script
data(){
return{
countryTel:"",
myConfig: {
code_length:'6',
accountLogin:true,
changedPhone: true,
protocol: true,
otherLoginWays: true,
//登录按钮中的内容
login_btn_value: '注册'
}
}
},
methods:{
to_chooseArea(){
// 跳转到区号选择页面
this.$router.push({path:'/phoneLogin/selectCode'});
},
to_account_login(){
// 跳转到账号密码登录页面
this.$router.push({path:'/'});
},
to_change_phone(){
//跳转到更改手机号页面
},
getCode(tel){
//获取验证码
console.log("tel:"+tel);//用户输入的手机号
let params = new URLSearchParams();
//参数：手机号（可根据自己需要自行添加）
params.append('YourParamName',tel);
//发送请求
this.axios.post('xxx',params)
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
},
phoneLogin(inputInfo){
//登录
console.log(inputInfo);//用户输入的手机号及验证码
let params = new URLSearchParams();
//参数：手机号，验证码（可根据自己需要自行添加）
params.append('YourParamName1',inputInfo.phone);
params.append('YourParamName2',inputInfo.code);
//发送请求
this.axios.post('xxx',params)
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
},
qqLogin(){},
weixinLogin(){},
weiboLogin(){}
},
mounted() {
this.countryTel = this.$route.params.tel || 86;
}
template
<bm_select_code v-on:choose="selectCountry($event)">bm_select_code>
script
methods:{
selectCountry(event){
let country_tel = event.tel;
//向手机登录页面传参
this.$router.push({name:"phoneLogin",params:{tel:country_tel}})
}
}
<bm_phone_login v-on:accountLogin="to_account_login"
@parent_choose_area="to_chooseArea"
@parent_get_code="getCode"
@parent_phone_login="resetPassword"
:base-config="myConfig">
<template v-slot:header>
<div style="display: flex;flex-direction: column;align-items: center;">
<h2>忘记密码h2>
div>
template>
<template v-slot:country_tel>+{{countryTel}}template>
bm_phone_login>
script
data(){
return{
countryTel:"",
myConfig: {
//根据需要自行修改
code_length:'6',
accountLogin:true,
changedPhone: false,
protocol: false,
otherLoginWays: false,
login_btn_value:'验证'
}
}
},
methods:{
to_account_login(){
//跳转到账号密码登录页面
this.$router.push({path:'/'});
},
to_chooseArea(){
// 跳转到区号选择页面
this.$router.push({path:'/selectCode'});
},
getCode(tel){
//获取验证码
console.log("tel:"+tel);//用户输入的手机号
let params = new URLSearchParams();
//参数：手机号（可根据自己需要自行添加）
params.append('tel',tel);
//发送请求
this.axios.post(this.baseUrl+'/sys/sms/send',params)
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
},
resetPassword(){
//跳转到重置密码页面
this.$router.push({path:'/phoneValidate/resetPassword'})
}
},
mounted() {
this.countryTel = this.$route.params.tel || 86;
}
| 参数 | 类型 | 默认值 | 备注 |
|---|---|---|---|
| baseConfig | Object | finish_btn_value:'完成' |
完成按钮上的文字 |
| iconsBase64 | Object | password_icon1:"", password_icon2:"", password_blur:"", password_active:"" | 图标设置(默认采用base64格式) |
用法示例
template
<bm_reset_password :base-config="myConfig"
:iconsBase64="myIcons"
@parent_finish="finish_modify">
<template v-slot:header>
<h2>重置密码h2>
template>>
bm_reset_password>
script
data(){
return{
//修改按钮上的文字
myConfig:{
finish_btn_value: '完成'
},
//修改图标（默认采用base64格式）
myIcons:{
}
}
},
methods:{
//修改密码完成
finish_modify(password){
// console.log(password);
//发送请求，提交用户输入的新密码
let params = new URLSearchParams();
params.append('param1',password); //用户输入的新密码
//...
this.axios.post('xxx',params)
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
//跳转到登录页面
this.$router.push('/');
}
}
注册页面
用法示例（采用bm_login组件）
template
<div class="register">
<bm_login :base-config="myConfig"
v-on:forgetPassword="to_forgetPassword"
v-on:phoneLogin="back_to_login"
@parent_login="login">
<template v-slot:header>
<div style="display: flex;flex-direction: column;align-items: flex-start;">
<h2>用户注册h2>
<h2>账号密码注册h2>
div>
template>
bm_login>
div>
script
data(){
return{
myConfig:{
forgetPwd_register_protocol: false,
//为false时，下面三项设置为true无效
rememberPassword:false,
quickLogin:true,
otherLoginWays: false,
login_btn_value:'注册',
phone_login_text:'返回账号密码登录'
}
}
},
methods:{
//根据配置自行选择需要的方法
to_forgetPassword(){
//进入忘记密码页面
this.$router.push({path:'/phoneLogin'});
},
login(input_info){
//登录
console.log(input_info); //用户输入的用户名和密码
let params = new URLSearchParams();
params.append('param1',input_info.username);
params.append('param2',input_info.password);
//其余参数根据需要自行添加
this.axios.post('xxx',params)
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
})
},
back_to_login(){
//返回登录页面
this.$router.push({path:'/'});
}
}
GitHub
开源地址： bm_vlogin.
欢迎star！
更新日志
0.1.8：城市区号页面按字母排序，修复字母索引会乱序的bug
0.2.0：新增重置密码页面,修复跳转页面计时器依然计时的bug
1.0.0：增加注册页面，修复记住我功能的bug
1.3.0：处于安全性考虑删除记住我功能