介绍

基于vue2.0的图形验证码组件（当频繁请求接口时弹出验证窗口，提示用户输入验证码）

组件使用

安装

npm install --save jx-vue2-image-verify

使用

<template>
  <div id="app">
    <image-verify
     v-if="showVerify" 
     refreshApi="/captcha/refresh"
     validateApi="/captcha/validate"
     :catchHtml="catchHtml"
     bckColor="#40a9ff"
    ></image-verify>
  </div>
</template>
 <script>
 import ImageVerify from 'jx-vue2-image-verify'; 
 export default {
  name: 'App', 
  data() {
    return {
      showVerify: false, 
      catchHtml: ''
    }
  },
  components: {
    ImageVerify
  },
  methods: {
    showVerifyPopup() {
      this.catchHtml = ''; // 从接口获取html内容
      this.showVerify = true;  
    } 
  } 
 }
 </script>

属性配置说明

refreshApi 刷新接口url，默认值：/captcha/refresh；
validateApi 验证接口url，默认值：/captcha/validate；
bckColor: 按钮颜色，默认值：#40a9ff；
catchHtml 异常时接口返回的html内容。