The way the vue front end implements the slider verification code

1. Install the plug-in

npm install vue-puzzle-vcode --save

Renderings:

Plugin document parameters:

2. Component code

<template>
  <Vcode
    :show="isShow"
    :canvasWidth="320"
    :canvasHeight="200"
    :puzzleScale="1"
    :sliderSize="40"
    :range="10"
    :imgs="picArray"
    successText="验证成功！"
    failText="验证失败，请重试！"
    sliderText="拖动滑块验证"
    @success="onSuccess"
    @close="close"
  />
</template>

<script>
import Vcode from 'vue-puzzle-vcode'
export default {
    
    
  name: 'SliderVerify',
  props: ['successFun', 'isShow'], //父组件控制isShow的true/false
  components: {
    
    
    Vcode
  },
  data () {
    
    
    return {
    
    
      //在data中引入`assets`中的图片可以通过`require`的方式来引入
      picArray: [
        require('../img/zhuce_logo.png'),
        require('../img/noData.png'),
        require('../img/checkPoster.png')
      ]
    }
  },
  methods: {
    
    
    onSuccess () {
    
    
      //调用父组件传递过来的验证通过的回调函数
      this.$emit('successFun')
    },
    close () {
    
    
      this.$emit('close') //关闭执行父组件的方法 将isShow设置为false
    }
  },
}
</script>

parent component code

Then the parent component introduces the component, and controls whether the child component is displayed through isShow

<SlideVerify @successFun="confirm" :isShow="isShow" @close="close" />

import SlideVerify from '../../components/SlideVerify.vue'

export default {
    
    
  components: {
    
    
    SlideVerify
  },
  data () {
    
    
    return {
    
    
      isShow: false, //是否弹框显示图形验证码
    }
  },
},