短视频直播源码,拖动滑块实现图片验证效果
2022/6/2 1:22:11
本文主要是介绍短视频直播源码,拖动滑块实现图片验证效果,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
短视频直播源码,拖动滑块实现图片验证效果
1、 基本滑块验证组件
// 安装 npm i vue-drag-verify2 -S // 引用: main.js 中引用 import Vue from 'vue' import dragVerify from 'vue-drag-verify2' Vue.use(dragVerify) <template> <div> <h3>模块验证:</h3> <div class="verifybox"> <el-row style="margin-top:10px;"> <drag-verify ref="dragVerify" :width="300" :isPassing.sync="isPassing" text="请按住滑块拖动" successText="验证通过" handlerIcon="el-icon-d-arrow-right" successIcon="el-icon-circle-check" @passcallback="passcallback"> <i v-show="!isPassing" slot="textBefore" class="el-icon-lock"></i> </drag-verify> </el-row> <el-button style="margin-top:5px;margin-left:10px;" size="small" @click="reset">还原</el-button> </div> </div> </template> <script> export default { data() { return { isPassing: false } }, methods: { passcallback() { this.$message({ message: "验证通过", type: "success" }); }, reset() { this.isPassing = false; this.$refs.dragVerify.reset() }, }, } </script> <style> .verifybox { display: flex; } </style>
2、图片滑块组件
// 安装 npm i vue-drag-verify-img -S <template> <div> <h3>图片滑块:</h3> <dragVerifyImg ref="dragVerify" :imgsrc=" imgsrc" :isPassing.sync="isPassing" :showRefresh="true" text="请按住滑块拖动" successText="验证通过" handlerIcon="el-icon-d-arrow-right" successIcon="el-icon-circle-check" @passcallback="passcallback"> </dragVerifyImg> <el-button type="primary" @click="reset">还原</el-button> </div> </template> <script> import dragVerifyImg from 'vue-drag-verify-img' export default { data() { return { isPassing: false, value: "", imgsrc: "http://celiang.oss-cn-hangzhou.aliyuncs.com/measurement/2022-04/26/y3zT5phpCPlkxi1650939813220426.jpg" } }, components: { dragVerifyImg }, methods: { passcallback() { this.$message({ message: "验证通过", type: "success" }); }, reset() { this.isPassing = false; this.$refs.dragVerify.reset() }, }, } </script> <style> .verifybox { display: flex; } </style>
以上就是 短视频直播源码,拖动滑块实现图片验证效果,更多内容欢迎关注之后的文章
这篇关于短视频直播源码,拖动滑块实现图片验证效果的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)
- 2024-05-30【Java】百万数据excel导出功能如何实现
- 2024-05-30我们小公司,哪像华为一样,用得上IPD(集成产品开发)?