vue3.0實現點選切換驗證碼(元件)及校驗

阿新 • • 發佈：2020-11-19

本文例項為大家分享了vue3.0實現點選切換驗證碼(元件)及校驗的具體程式碼，供大家參考，具體內容如下

先看效果

父元件

<template>
 <div class="login">
 <van-field
  center
  clearable
  label="驗證碼"
  placeholder="輸入驗證碼"
  v-model="verify"
 >
  <template #button>
  <vueImgVerify ref="verifyRef" />
  </template>
 </van-field>
 <span style="margin:20px">點選更換驗證碼</span>
 <van-button round block type="info" native-type="submit" @click="btn">
  提交
 </van-button>
 </div>
</template>

<script>
// ref 接受一個內部值並返回一個響應式且可變的 ref 物件。ref 物件具有指向內部值的單個 property .value。
import { reactive,ref,toRefs } from "vue";
import vueImgVerify from "../views/lv.vue"; // 引入的子元件 
import { Toast } from "vant";
export default {
 components: {
 vueImgVerify,},setup() {
 const verifyRef = ref(null);
 const state = reactive({
  verify: "",});
 const btn = function() {
 // console.log(verifyRef.value.imgCode);
 // console.log(state.verify);
  if (verifyRef.value.imgCode === state.verify) {
  Toast.success("驗證碼輸入正確");
  } else {
  Toast.fail("驗證碼輸入錯誤");
  }
 };

 return {
  ...toRefs(state),btn,verifyRef,};
 },};
</script>

<style lang="less"></style>

reactive,toRefs 可以去官網檢視各代表的含義官網

子元件封裝元件，即用即貼上

<template>
 <div class="img-verify">
 <canvas ref="verify" :width="width" :height="height" @click="handleDraw"></canvas>
 </div>
</template>

<script type="text/ecmascript-6">
import { reactive,onMounted,toRefs } from 'vue'
export default {
 setup() {
 const verify = ref(null)
 const state = reactive({
  pool: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890',// 字串
  width: 120,height: 40,imgCode: ''
 })
 onMounted(() => {
  // 初始化繪製圖片驗證碼
  state.imgCode = draw()
 })
 
 // 點選圖片重新繪製
 const handleDraw = () => {
  state.imgCode = draw()
 }

 // 隨機數
 const randomNum = (min,max) => {
  return parseInt(Math.random() * (max - min) + min)
 }
 // 隨機顏色
 const randomColor = (min,max) => {
  const r = randomNum(min,max)
  const g = randomNum(min,max)
  const b = randomNum(min,max)
  return `rgb(${r},${g},${b})`
 }

 // 繪製圖片
 const draw = () => {
  // 3.填充背景顏色，背景顏色要淺一點
  const ctx = verify.value.getContext('2d')
  // 填充顏色
  ctx.fillStyle = randomColor(180,230)
  // 填充的位置
  ctx.fillRect(0,state.width,state.height)
  // 定義paramText
  let imgCode = ''
  // 4.隨機產生字串，並且隨機旋轉
  for (let i = 0; i < 4; i++) {
  // 隨機的四個字
  const text = state.pool[randomNum(0,state.pool.length)]
  imgCode += text
  // 隨機的字型大小
  const fontSize = randomNum(18,40)
  // 字型隨機的旋轉角度
  const deg = randomNum(-30,30)
  /*
   * 繪製文字並讓四個文字在不同的位置顯示的思路 :
   * 1、定義字型
   * 2、定義對齊方式
   * 3、填充不同的顏色
   * 4、儲存當前的狀態（以防止以上的狀態受影響）
   * 5、平移translate()
   * 6、旋轉 rotate()
   * 7、填充文字
   * 8、restore出棧
   * */
  ctx.font = fontSize + 'px Simhei'
  ctx.textBaseline = 'top'
  ctx.fillStyle = randomColor(80,150)
  /*
   * save() 方法把當前狀態的一份拷貝壓入到一個儲存影象狀態的棧中。
   * 這就允許您臨時地改變影象狀態，
   * 然後，通過呼叫 restore() 來恢復以前的值。
   * save是入棧，restore是出棧。
   * 用來儲存Canvas的狀態。save之後，可以呼叫Canvas的平移、放縮、旋轉、錯切、裁剪等操作。 restore：用來恢復Canvas之前儲存的狀態。防止save後對Canvas執行的操作對後續的繪製有影響。
   *
   * */
  ctx.save()
  ctx.translate(30 * i + 15,15)
  ctx.rotate((deg * Math.PI) / 180)
  // fillText() 方法在畫布上繪製填色的文字。文字的預設顏色是黑色。
  // 請使用 font 屬性來定義字型和字號，並使用 fillStyle 屬性以另一種顏色/漸變來渲染文字。
  // context.fillText(text,x,y,maxWidth);
  ctx.fillText(text,-15 + 5,-15)
  ctx.restore()
  }
  // 5.隨機產生5條幹擾線,干擾線的顏色要淺一點
  for (let i = 0; i < 5; i++) {
  ctx.beginPath()
  ctx.moveTo(randomNum(0,state.width),randomNum(0,state.height))
  ctx.lineTo(randomNum(0,state.height))
  ctx.strokeStyle = randomColor(180,230)
  ctx.closePath()
  ctx.stroke()
  }
  // 6.隨機產生40個干擾的小點
  for (let i = 0; i < 40; i++) {
  ctx.beginPath()
  ctx.arc(randomNum(0,state.height),1,2 * Math.PI)
  ctx.closePath()
  ctx.fillStyle = randomColor(150,200)
  ctx.fill()
  }
  return imgCode
 }

 return {
  ...toRefs(state),verify,handleDraw
 }
 }
}
</script>
<style type="text/css">
.img-verify canvas {
 cursor: pointer;
}
</style>

關於vue.js的學習教程，請大家點選專題vue.js元件學習教程、Vue.js前端元件學習教程進行學習。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。