关于在 Vue 项目中使用滑块校验 vue-puzzle-verification

末蓝、 2022-09-07 09:55 122阅读 0赞

老规矩，官网链接 [https://github.com/he4398/vue-puzzle-verification][https_github.com_he4398_vue-puzzle-verification]  
本人资源地址：[https://download.csdn.net/download/lb1135909273/21454065][https_download.csdn.net_download_lb1135909273_21454065]

## 基本操作 ##

使用npm 下载

cnpm i vue-puzzle-verification

在使用的页面中引入

<van-popup v-model="isVerificationShow" style="border-radius: 16px">
      <div class="login-box">
        <div class="puzzle-box">
          <PuzzleVerification
          	:verificationShow="true"
            blockType="puzzle"
            :puzzleImgList="puzzleImgList"
            :onSuccess="submitForm"
          />
        </div>
      </div>
    </van-popup>
    
    
    import PuzzleVerification from 'vue-puzzle-verification'
    
    components: { 
      PuzzleVerification
    }

## 出现问题 ##

这里我们把是否需要显示绑定到了 外部的 van-popup 上，所以我们给滑块是否显示的属性一直为true ,不改变，但是你会发现点击之后滑块还是不显示，我们查看一下问题

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70]

## 解决问题 ##

我们看到，有个属性被持续加成 dispaly:none 那肯定不显示，我们来修改一下

加入样式

.puzzle-container { 
      display: block!important;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 1]

滑块出现，引入成功

处理成功事件就是 onSuccess 自己书写即可

因为这个滑块可能在项目中用到的地方并不多，所以我们在当前页面中引入比全局引入更加简便。

## 其他方法 ##

当然我刚开始使用的本方法就是把源码下载下来，然后将模块放到了我的 components 中，然后在我的页面中引入

import PuzzleVerification from '@/components/puzzleVerification'

![在这里插入图片描述][59d8d78d73214c7b8236afc7a21484dc.png]

图片和资源放对地方即可，注意的是 这种可以直接在源码中修改你所需要的样式！这种方法稍显累赘！也可参考。

关于不显示的问题，也可直接修改，将属性给为true，就不需要修改样式了。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 2]

[https_github.com_he4398_vue-puzzle-verification]: https://github.com/he4398/vue-puzzle-verification
[https_download.csdn.net_download_lb1135909273_21454065]: https://download.csdn.net/download/lb1135909273/21454065
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70]: /images/20220829/6688e82072fc49e4a769b51046fc3e7f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 1]: /images/20220829/2c8a2825db424fe9ae8c656119147567.png
[59d8d78d73214c7b8236afc7a21484dc.png]: /images/20220829/c8bcf82f247b4976a178d4b927dca1b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 2]: /images/20220829/24f550a036424b7ba5c0e2744889b8e2.png