1 Star 4 Fork 1

Toling网络 / Vue3.0 常规图形验证码

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.md 1.35 KB
一键复制 编辑 原始数据 按行查看 历史
Toling网络 提交于 2021-03-12 00:33 . update README.md.

Vue3.0 常规图形验证码

介绍

Vue3.0 常规图形验证码 仅有简单英文+数字的 最常规的4位验证

超简单仅限前端验证用
通过网上原生的js修改过来的
小项目临时用还是够的 看后面有空的话会更新题库模式的

说明

2021.3.12 自己要用个简易的验证码组件

网上找到的都是vue2.0的

索性自己百度加工了下搞了个vue3.0的凑合用下

顺便发出来 给需要的人参考使用

Vue3.0使用此组件

1、复制 仓库内的 PicCode 文件夹 到你vue3.0项目的 src/components/ 文件夹下

2、 参考下面示例代码

<template>
  {{ Code }}
  <PicCode :width="200" :height="60" v-model:Code="Code" />
</template>

<script lang='ts'>
import { defineComponent, reactive, ref } from "vue";
import PicCode from "@/components/PicCode/PicCode.vue";

export default defineComponent({
  components: { PicCode },
  setup() {
    const Code = ref(1);
    return {
      Code,
    };
  },
});
</script>

<style>
</style>

Code为生成的验证码文本内容 用作对比验证码是否输入正确 其他的没啥了吧,使用挺简单的
小项目凑合用吧!

效果示例:

效果示例

JavaScript
1
https://gitee.com/toling/vue3PicCode.git
git@gitee.com:toling/vue3PicCode.git
toling
vue3PicCode
Vue3.0 常规图形验证码
master

搜索帮助