图片网站怎么做排名,如何做网站 写代码,网站开发前端和后端,常州高端网站制作公司排名登录页面有个验证码#xff0c;暂时没用到后台#xff0c;在网上找了两个博客#xff0c;记录一下。
一、直接写#xff08;参考-UIEngineer#xff09;
这个样式比较简单#xff0c;直接在需要验证码的地方添加就行了。如果这个页面比较复杂#xff0c;用组件会比较好…登录页面有个验证码暂时没用到后台在网上找了两个博客记录一下。
一、直接写参考-UIEngineer
这个样式比较简单直接在需要验证码的地方添加就行了。如果这个页面比较复杂用组件会比较好。
templatediv classjoin_formitemlabel classenquiry验证码span:/span/labeldiv classcaptchainput typetext placeholder请输入验证码 classyanzhengma_input v-modelpicLyanzhengma /input typebutton clickcreatedCode classverification v-modelcheckCode //div/div
/templatescript
export default {data(){return{code:,checkCode:, picLyanzhengma: //..验证码图片}},created(){this.createdCode()},methods: {// 图片验证码createdCode(){// 先清空验证码输入this.code this.checkCode this.picLyanzhengma // 验证码长度const codeLength 4// 随机数const random new Array(0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z)for(let i 0;i codeLength;i){// 取得随机数的索引(0~35)let index Math.floor(Math.random() * 36)// 根据索引取得随机数加到code上this.code random[index]}// 把code值赋给验证码this.checkCode this.code}}
}
/scriptstyle
.yanzhengma_input{font-family: Exo 2,sans-serif;border: 1px solid #fff;color: #fff;outline: none;border-radius: 12px;letter-spacing: 1px;font-size: 17px;font-weight: normal;background-color: rgba(82,56,76,.15);padding: 5px 0 5px 10px;margin-left: 30px;height: 30px;margin-top: 25px;border: 1px solid #e6e6e6;
}
.verification{border-radius: 12px;width: 100px;letter-spacing: 5px;margin-left: 50px;height: 40px;transform: translate(-15px,0);
}
.captcha{height:50px;text-align: justify;
}
/style效果 二、组件参考-我在长安长安
1. 新建一个文件夹 verificationCode文件夹随便自己命名然后在该文件下新建一个 index.vue复制下面的代码
templatediv classValidCode disabled-select :stylewidth:${width}; height:${height} clickrefreshCodespan v-for(item, index) in codeList :keyindex :stylegetStyle(item){{item.code}}/span/div
/templatescript
export default {name: validCode,props: {width: {type: String,default: 100px},height: {type: String,default: 48px},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.length// 生成for (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() * 10)]}px,padding: ${[Math.floor(Math.random() * 10)]}px,transform: rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)})}// 指向this.codeList codeList;// 将当前数据派发出去// this.$emit(update:value, codeList.map(item item.code).join())this.$emit(sendData, codeList.map(item item.code).join());//this.$emit(暴露给父组件的方法名,携带的参数); //记住你命名的这个方法},// 每个元素生成动态的样式getStyle (data) {return color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}}}
}
/scriptstyle scoped langscss.ValidCode{display: flex;justify-content: center;align-items: center;cursor: pointer;span{display: inline-block;}}
/style2. 在父组件中使用
validCode v-modelvalidCode sendDatagetCode/validCode//在script下面引入组件
import validCode from /components/verificationCodedata(){return{validCode:}
},
methods:{
//在方法中获取验证码的数据
//从子组件获取验证码并将验证码返回到页面getCode(data){console.log(data)this.validCode data;//在data中定义一个 validCode:,用来记录验证码。}
} 3. 鉴于有的小伙伴需要第三步就贴全部代码吧。
el-form :modelloginForm :rulesrules refloginFormclassdemo-ruleForm login-formel-form-item propuserNameel-input v-modelloginForm.userName stylewidth:418px placeholder输入您的账号或手机号 classnobr sizemeddle autocompleteoff/el-input/el-form-itemel-form-item proppasswordel-input show-password v-modelloginForm.password stylewidth:418px placeholder输入您的密码 classnobr autocompleteoff/el-input/el-form-itemel-form-item requiredel-col :span18el-form-item propvalidCodeel-input v-modelloginForm.validCode stylewidth:313px placeholder输入验证码忽略大小写 classnobr/el-input/el-form-item /el-colel-col :span6 alignrightvalidCode v-modelvalidCode refrefresh sendDatagetCode/validCode/el-col/el-form-item el-form-itemel-button typeprimary classnobr stylewidth:418px; clicksubmitForm(loginForm)登录/el-button/el-form-item
/el-formscript
import validCode from /components/verificationCodedata(){let validUserName (rule,value,callback) {if(!value){return callback(new Error(用户名不能为空));} else {callback();}}let validPassword (rule,value,callback) {if(!value){return callback(new Error(密码不能为空));} else{callback();}}const checkValidCode (rule, value, callback) {if (!value) {callback(new Error(请输入验证码))} else if (value.toUpperCase() ! this.validCode.toUpperCase()) {callback(new Error(验证码不正确))} else {callback()}}return {validCode:,loginForm:{userName: ,password: },rules:{userName:[{ validator: validUserName, trigger: blur }],password:[{ validator: validPassword, trigger: blur }],validCode:[{ validator: checkValidCode, trigger: blur }]}}
}, methods:{submitForm(formName){this.$refs[formName].validate((valid) {if (valid) {//调用录接口//如果登录失败需要刷新验证码的this.$refs.refresh.createdCode();this.validCode ; //清空验证码输入框的内容} else {console.log(error submit!!);return false;}});},//从子组件获取验证码并将验证码返回到页面getCode(data){// console.log(data)this.validCode data;}
/script
