登錄頁面有個驗證碼，暫時沒用到后臺，在網上找了兩個博客，記錄一下。

一、直接寫（參考-UIEngineer）

這個樣式比較簡單，直接在需要驗證碼的地方添加就行了。如果這個頁面比較復雜，用組件會比較好。

<template><div class="join_formitem"><label class="enquiry">驗證碼<span>:</span></label><div class="captcha"><input type="text" placeholder="請輸入驗證碼" class="yanzhengma_input" v-model="picLyanzhengma" /><input type="button" @click="createdCode" class="verification" v-model="checkCode" /></div></div> </template><script> 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}} } </script><style> .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，復制下面的代碼：

<template><div class="ValidCode disabled-select" :style="`width:${width}; height:${height}`" @click="refreshCode"><span v-for="(item, index) in codeList" :key="index" :style="getStyle(item)">{{item.code}}</span></div> </template><script> 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}`}} } </script><style scoped lang="scss">.ValidCode{display: flex;justify-content: center;align-items: center;cursor: pointer;span{display: inline-block;}} </style>

2. 在父組件中使用

<validCode v-model="validCode" @sendData="getCode"></validCode>//在<script>下面引入組件 import validCode from '@/components/verificationCode'data(){return{validCode:""} }, methods:{ //在方法中獲取驗證碼的數據 //從子組件獲取驗證碼，并將驗證碼返回到頁面getCode(data){console.log(data)this.validCode = data;//在data中定義一個 validCode:'',用來記錄驗證碼。} }

3. 鑒于有的小伙伴需要，第三步就貼全部代碼吧。

<el-form :model="loginForm" :rules="rules" ref="loginForm"class="demo-ruleForm login-form"><el-form-item prop="userName"><el-input v-model="loginForm.userName" style="width:418px" placeholder="輸入您的賬號或手機號" class="nobr" size="meddle" autocomplete="off"></el-input></el-form-item><el-form-item prop="password"><el-input show-password v-model="loginForm.password" style="width:418px" placeholder="輸入您的密碼" class="nobr" autocomplete="off"></el-input></el-form-item><el-form-item required><el-col :span="18"><el-form-item prop="validCode"><el-input v-model="loginForm.validCode" style="width:313px" placeholder="輸入驗證碼（忽略大小寫）" class="nobr"></el-input></el-form-item> </el-col><el-col :span="6" align="right"><validCode v-model="validCode" ref="refresh" @sendData="getCode"></validCode></el-col></el-form-item> <el-form-item><el-button type="primary" class="nobr" style="width:418px;" @click="submitForm('loginForm')">登錄</el-button></el-form-item> </el-form><script> import validCode from '@/components/verificationCode'data(){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>

總結

以上是生活随笔為你收集整理的基于 vue 的验证码组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。