分享一个假的拖拽验证码 vue-puzzle-vcode

npm: vue-puzzle-vcode

纯前端校验。

用法

<template>
  <Vcode :show="verificationVisible" @success="sendVCode" @close="verificationVisible = false" />
</template>

<script>
import Vcode from 'vue-puzzle-vcode';

export default {
  components: {
    Vcode,
  },
  data() {
    return {
      verificationVisible: false,
    };
  },
  methods: {
    sendVCode() {
      // 验证通过，执行后续的业务逻辑…
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .vue-puzzle-vcode {
  z-index: 1000 !important;
}
</style>