前端页面设置滑动验证

 在前端实现这样的滑动验证

1.安装插件

npm i -S vue-puzzle-vcode

2.前端代码

<el-form ref="myForm" :model="formData" :rules="formRules">
  <el-form-item prop="username">
    <el-input v-model="formData.username"></el-input>
  </el-form-item>
  <el-form-item prop="password">
    <el-input type="password" v-model="formData.password"></el-input>
  </el-form-item>
  <el-form-item>
     <Vcode :show="isShow" @success="onsuccess" @close="close" />
     <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form-item>
</el-form>

<script>
import Vcode from "vue-puzzle-vcode";
export default {
data() {
    return {
      isShow: true // 验证码模态框是否出现
    };
  },
  components: {
    Vcode
  },
  methods: {
//唤起验证框
    submit() {
      this.isShow = true;
    },
//验证通过后隐藏验证框，调用登录方法
   onsuccess(msg) {
      this.isShow = false; 
      this.login();
    },
    // 点击其他地方关闭验证框
    close() {
      this.isShow = false;
    }
  }
};
</script>