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

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>

组件的参数：
width | Number | 200 | 组件的宽度
height | Number | 60 | 组件的高度
text | String | swiping to the right side | 提示信息文字
successText | String | success | 验证通过时的提示信息文字
background | String | #ccc | 组件背景色
color | String | #ffffff | 组件文字颜色
progressBarBg | String | #FFFF99 | 拖拽过程中的背景颜色
completedBg | String | #66cc66 | 验证成功的背景颜色
circle | Boolean | true | 设为true,组件为圆形按钮，否则为长方形
handlerIcon | String | - | 拖拽按钮的icon
successIcon | String | - | 验证通过时拖拽按钮的icon
handlerBg | String | #fff | 拖拽按钮的背景色
textSize | String | 20px | 组件的文字大小