登录页添加验证码
引入验证码页面组件：ValidCode.vue < template> < div class = "ValidCodeContent" style= "" > < divclass = "ValidCode disabled-select" : style= "`width:${width}; height:${height}`" @click= "refreshCode" > < spanv- for = "(item, index) in codeList" : key= "index" : style= "getStyle(item)" > { { item. code } } < / span> < / div> < div class = "kbq" @click= "refreshCode" > 看不清< / div> < / div>
< / template> < script>
export default { name : 'validCode' , props : { width : { type : String, default : '100px' , } , height : { type : String, default : '40px' , } , length : { type : Number, default : 4 , } , } , data ( ) { return { codeList : [ ] , } } , mounted ( ) { this . createdCode ( ) } , methods : { refreshCode ( ) { this . createdCode ( ) } , createdCode ( ) { let len = this . length, codeList = [ ] , chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789' , charsLen = chars. lengthfor ( let i = 0 ; i < len; i++ ) { let rgb = [ Math. round ( Math. random ( ) * 220 ) , Math. round ( Math. random ( ) * 240 ) , Math. round ( Math. random ( ) * 200 ) , ] codeList. push ( { code : chars. charAt ( Math. floor ( Math. random ( ) * charsLen) ) , color : ` rgb( ${ rgb} ) ` , fontSize : ` 1 ${ [ Math. floor ( Math. random ( ) * 1 + 9 ) ] } px ` , padding : ` ${ [ Math. floor ( Math. random ( ) * 2 + 4 ) ] } px ` , transform : ` rotate( ${ Math. floor ( Math. random ( ) * 90 ) - Math. floor ( Math. random ( ) * 90 ) } deg) ` , } ) } this . codeList = codeListthis . $emit ( 'update:value' , codeList. map ( ( item ) => item. code) . join ( '' ) ) } , getStyle ( data ) { return ` color: ${ data. color} ; font-size: ${ data. fontSize} ; padding: ${ data. padding} ; transform: ${ data. transform} ; ` } , } ,
}
< / script> < style scoped>
. ValidCodeContent { display : flex; flex- direction: row; justify- content: center; margin- left: 20px;
}
. ValidCode { display : flex; justify- content: center; align- items: center; cursor : pointer; background : #eaeaea;
} . ValidCode > span { display : inline- block;
} . kbq { width : 60px; height : 40px; line- height: 40px; color : #ed7610; margin- left: 10px; cursor : pointer; font- size: 16px; font- family: simhei;
}
< / style>
登录页 login.vue < template> < div id= "loginPage" class = "subpage applogin" : style= "getStyle()" > < el- form ref= "LoginData" : model= "loginData" label- width= "0px" style= "padding-top: 35px;width:90%;margin-left: auto;margin-right: auto;" class = "loginForm" > < el- form- item> < el- input : input- style= "{ height: '40px !important', lineHeight: '50px',color:'#333' }" type= "text" v- model= "loginData.userName" autocomplete= "off" placeholder= "请输入用户名" class = "username" / > < / el- form- item> < el- form- item> < el- input : input- style= "{ height: '40px !important', lineHeight: '50px',color:'#333' }" class = "password" type= "password" v- model= "loginData.password" autocomplete= "off" placeholder= "请输入密码" show- password / > < / el- form- item> < el- form- item prop= "validCode" style= "display: flex" > < div style= "display: flex" > < div class = "loginBodyItem validCode" > < div> < / div> < el- input : input- style= "{ height: '40px !important', lineHeight: '50px',color:'#333' }" type= "text" v- model= "inputValidCode" autocomplete= "off" placeholder= "请输入验证码" class = "valid" / > < / div> < ValidCode class = "validCode" v- model: value= "validCode" > < / ValidCode> < / div> < / el- form- item> < el- form- item> < el- button style= "background:#0147eb !important;" color= "#0147eb" @click= "login" dark= "true" v- preventReClick> 登& nbsp; & nbsp; 录< / el- button> < / el- form- item> < / el- form> < / div>
< / template>
< script> import ValidCode from './ValidCode.vue' ;
export default { data : function ( ) { return { validCode : '' , inputValidCode : '' , loginData : { "userName" : "" , "password" : "" } , } } , methods : { login : async function ( ) { let data = JSON . parse ( JSON . stringify ( this . loginData) ) ; if ( ! data. userName) { this . $message ( { type : "warning" , message : "请输入用户名" } ) ; return ; } if ( ! data. password) { this . $message ( { type : "warning" , message : "请输入密码" } ) ; return ; } if ( this . inputValidCode. toLocaleLowerCase ( ) == '' ) { this . $message ( { type : "warning" , message : "请输入验证码" } ) ; return } else { if ( this . inputValidCode. toLocaleLowerCase ( ) !== this . validCode. toLocaleLowerCase ( ) ) { this . $message ( { type : "warning" , message : "验证码输入有误" } ) ; return } else { } } let res = await FrameWork. SendGet ( url, formData) ; ... . } } , components : { ValidCode} }
< / script>
< style scoped= "scoped" > / deep / . validCode { float : left; margin- top: 10px; }
< / style>
)
中构建离线地图服务)
)
