学习使用vue实现一个验证码（随机生成汉字，按顺序点击汉字以完成验证）

目录

写在前面：

主要实现以及主要功能：

实现效果展示：

 具体实现：

 html：

data：

methods：

watch:

两个钩子：

样式：

---

写在前面：

这种形式的验证码有的时候色彩过于丰富，也可能出现背景图片、文字背景等加载不好等状况，对某些使用者（对颜色辨别能力较差或缺少颜色辨别能力、年长人群等）可能不太友好。可能基于这些原因，我很少见到这种验证码(‾◡◝)o(*￣▽￣*)ブ。

主要实现以及主要功能：

1、随机生成背景图片；

2、根据 utf-8（Unicode）中文编码的范围（u4e00 —— u9fa5）随机生成四个编码，再分别解码为汉字，覆盖在背景图片上方；

3、提示用户根据指定的汉字顺序依次点击层叠于背景图片上的汉字以完成验证；

4、根据用户对汉字的点击顺序，生成小于汉字大小的数字覆盖在点击位置以提示用户当前的点击顺序；

5、当用户再次点击已被点击的汉字，将取消当前汉字以及数字提示大于当前汉字的所有汉字的点击，使用户可以重新操作。（比如如用户根据主观判断依次点击了汉字 “一”、“二”、“三”，那么汉字 “一”、“二”、“三” 上方将分别出现数字提示图标①、②、③，当用户在未点击第四个汉字之前又点击了汉字“一”，其数字提示图标为①，那么大于等于数字1的图标将消失，大于等于数字图标1的操作将被撤销，所以用户的此次点击撤销了此前在本次验证中的所有点击，用户可以在本次验证中重新操作而不减少可验证次数）

6、当用户点击汉字个数达到四个，自动判断用户的验证是否通过。给予用户三次验证机会，每次验证失败弹出相应提示，显示一段时间后自动更新验证码；尝试三次都不成功则不可再操作；验证成功给予验证成功提示。在用户点击汉字验证阶段，用户可以更换（刷新）验证码。

实现效果展示：

 具体实现：

 html：

四个数字提示图标来源于网络，下载到了项目中的图片文件夹里

来源：https://www.iconfont.cn/      （阿里巴巴矢量图标库）

<template>
  <div class="outside" ref="outside">
    <div class="display-area" ref="content">
        <!-- 风景背景图 -->
        <img class="bg-picture" :src="background" alt="背景图片">
        <!-- 四个随机文字-->
        <span class="word-img" v-for="e of words" :key="e.index" :style="customStyle[e.index]" @click="choose(e.index,$event)">{
  
  {e.word}}</span>
        <!-- 点击汉字后贾昂出现提示数字小图标 -->
        <img class="number-tip" src="../assets/数字1.png" alt="1" v-show="choseOrder.length>=1" :style="numtip[0]" @click="withdrawChoose(0)">
        <img class="number-tip" src="../assets/数字2.png" alt="2" v-show="choseOrder.length>=2" :style="numtip[1]" @click="withdrawChoose(1)">
        <img class="number-tip" src="../assets/数字3.png" alt="3" v-show="choseOrder.length>=3" :style="numtip[2]" @click="withdrawChoose(2)">
        <img class="number-tip" src="../assets/数字4.png" alt="4" v-show="choseOrder.length>=4" :style="numtip[3]" @click="withdrawChoose(3)">
        
        <div v-show="isSucceed" class="tip">
            <div class="tip-content">验证成功！</div>
        </div>
    </div>
    
    <center>
        <div class="msg" v-show="!isSucceed">
            <p class="action-tip">请按顺序点击以下汉字以完成验证！</p>
            <!-- 打乱展示顺序 -