chu1204505056.gitee.io
Atercia
前端开发
获得徽章 0
- vue快速编写一个图形验证码组件
百度搜了一圈图形验证码组件，竟然都是付费的开什么玩笑，那就自己写一个吧，效果如下
演示地址：
chu1204505056.gitee.io
开源地址：github.com
实现代码如下：
cnpm i zx-verify -S
import ByuiVerify from "zx-verify";
export default ByuiVerify;
<template>
<div class="verify-container">
<byui-verify
ref="slideDiv"
:w="350"
:slider-text="text"
:h="175"
@success="handleSuccess"
@fail="handleError"
></byui-verify>
</div>
</template>
<script>
import ByuiVerify from "@/plugins/byuiVerify";
export default {
name: "Verify",
components: { ByuiVerify },
data() {
return {
text: "向右滑动",
};
},
created() {},
mounted() {},
methods: {
handleSuccess() {
this.$baseMessage("校验成功", "success");
},
handleError() {
this.$baseMessage("校验失败", "error");
},
},
};
</script>展开127
