用于登陆验证的vue组件滑动

最新推荐文章于 2025-06-27 09:23:23 发布

原创最新推荐文章于 2025-06-27 09:23:23 发布 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#验证滑动 #vue #组件

vue 同时被 2 个专栏收录

34 篇文章

订阅专栏

css

11 篇文章

订阅专栏

本文详细介绍如何使用Vue和vue-drag-verify组件创建自定义拖动验证码功能，包括安装依赖、配置样式、设置参数及回调函数等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：通过npm安装

npm install vue-drag-verify --save
npm install  font-awesome

<template>
	<div  class="login">
		<van-popup v-model="show" :overlay="true" :close-on-click-overlay="true">
			<div class="ver">
				<drag-verify 
					@passcallback= "passcallback"
                     :width="width" 
                     :height="height" 
                     :text="text" 
                     :success-text="successText" 
                     :background="background" 
                     :progress-bar-bg="progressBarBg" 
                     :completed-bg="completedBg" 
                     :handler-bg="handlerBg" 
                     :handler-icon="handlerIcon" 
                     :text-size="textSize" 
                     :success-icon="successIcon"
                     ref="Verify"
                  >
                  </drag-verify>
			</div>
		</van-popup>
	</div>
</template>

<script>
import 'font-awesome/css/font-awesome.min.css'
import dragVerify from 'vue-drag-verify'
export default{
	name: "login",
	components:{
		dragVerify
	},
	data() {
		return {
			show: true,
			handlerIcon: "fa fa-angle-double-right",
			successIcon: "fa fa-check",
			background: "#cccccc",
			progressBarBg: "#4b0",
			completedBg: "#66cc66",
			handlerBg: "#fff",
			text: "请将滑块拖动到右侧",
			successText: "验证成功",
			width: 320,
			height: 42,
			textSize: "18px",
			isCircle:'true'
		}
	},
	methods:{
	// 滑动完成消失
		passcallback() {
			if(this.$refs.Verify.isPassing){
				this.show = false
			}
		}
	}
}
</script>

<style lang="less" scoped>
.login{
	.ver{
		padding: 10px;
	}
}
</style>