vue滑块组件验证

vue滑块组件验证

日常吐槽
作为一个程序员的我，使用element发现没有，类似滑块组件验证的那种组件，我流下了无法使用轮子的眼泪，请element大佬多造一点组件可好，我们这种实习生切图切的慢哦，慢的话是要被开除的》》》

后台开发需要一个滑块验证

滑块验证可以解决一些安全问题，和带来用户体验上的上升
类似这种（这里用一下图，如果侵权请联系一下我）

这里用一下别人的图，公司的不太方便贴出来

代码

这里主要使用了vue,原始js的一些事件，事件对象，css这块主要采用 的是sass,编写的
注意：

• 1，因为项目是基础element框架的，所以这里的图标是饿了吗里面的，如果是其他框架（没有饿了吗字体），可以通过prop里面的参数传进去，这里已经封装好了，请看props对象
• 2，因为项目是pc端的，这里的事件只用了pc端的，没有移动端的事件，所以不兼容移动端哦，如果需要的话可以联系我交流一下，我是前端实习生结城
• 3，详细使用的方法我写在文尾了，或者你看我代码也行，注释也写了一点
• 4，暂时还没有吧
• 5， 不用sass的猿友，我在后面写了一个css的，你复制后面的就行

html部分

<template>
  <div class="jc-component__range">
    <div class="jc-range" :class="rangeStatus?'success':''" >
    	<i @mousedown="rangeMove" :class="rangeStatus?successIcon:startIcon"></i>
    	{{rangeStatus?successText:startText}}
    </div>
  </div>
</template>

javascript部分

<script>
export default {
	props: {
		// 成功之后的函数
		successFun: {
			type: Function
		},
		//成功图标
		successIcon: {
			type: String,
			default: 'el-icon-success'
		},
		//成功文字
		successText: {
			type: String,
			default: '验证成功'
		},
		//开始的图标
		startIcon: {
			type: String,
			default: 'el-icon-d-arrow-right'
		},
		//开始的文字
		startText: {
			type: String,
			default: '拖动滑块到最右边'
		},
		//失败之后的函数
		errorFun: {
			type: Function
		},
		//或者用值来进行监听
		status: {
			type: String
		}
	},
	data(){
		return {
			disX : 0,
			rangeStatus: false
		}
	},
  methods:{
		//滑块移动
		rangeMove(e){
			let ele = e.target;
			let startX = e.clientX;
			let eleWidth = ele.offsetWidth;
			let parentWidth =  ele.parentElement.offsetWidth;
			let MaxX = parentWidth - eleWidth;
			if(this.rangeStatus){//不运行
				return false;
			}
			document.onmousemove = (e) => {
				let endX = e.clientX;
				this.disX = endX - startX;
				if(this.disX<=0){
					this.disX = 0;
				}
				if(this.disX>=MaxX-eleWidth){//减去滑块的宽度,体验效果更好
					this.disX = MaxX;
				}
				ele.style.transition = '.1s all';
				ele.style.transform = 'translateX('+this.disX+'px)';
				e.preventDefault();
			}
			document.onmouseup = ()=> {
				if(this.disX !== MaxX){
					ele.style.transition = '.5s all';
					ele.style.transform = 'translateX(0)';
					//执行成功的函数
					this.errorFun && this.errorFun();
				}else{
					this.rangeStatus = true;
					if(this.status){
						this.$parent[this.status] = true;
					}
					//执行成功的函数
					this.successFun && this.successFun();
				}
				document.onmousemove = null;
				document.onmouseup = null;
			}
		}
	}
};
</script>

css部分

<style lang="scss" scoped>
@mixin jc-flex{
	display: flex;
	justify-content: center;
	align-items: center;
}
.jc-component__range{
	.jc-range{
		background-color: #FFCCCC;
		position: relative;
		transition: 1s all;
		user-select: none;
		color: #333;
		@include jc-flex;
		height: 45px; /*no*/
		&.success{
			background-color: #7AC23C;
			color: #fff;
			i{
				color: #7AC23C;
			}
		}
		i{
			position: absolute;
			left: 0;
			width: 60px;/*no*/
			height: 100%;
			color: #919191;
			background-color: #fff;
			border: 1px solid #bbb;
			cursor: pointer;
			@include jc-flex;
		}
	}
}
</style>

基本用法介绍

• 用一个vue文件把上面三个装起来，如果要使用的话，就直接在你要使用 的组件里引入，或者你全局注册也行，vue的组件的全局注册方法可以看一下vue文档

javascript里面

<script>
import JcRange from '@/components/public/JcRange.vue'
export default {
	data(){
		return {
			status: false
		}
	},
	components: {
		JcRange
	}
}
</script>

html里面

<JcRange status="status"></JcRange>

这里的status是一个字符串，因为在组件的内部我使用了this.$parent.[属性名称]改变父组件里面的值的，（这里我没有采用数据的双向绑定，我感觉没必要）

我们可以通过父组件的status来判断滑块是否成功，或者通过子组件中的成功和失败函数

//调用方法可以这样
<JcRange 
:successFun="这里传递你的函数(成功)"
:errorFun="这里传递你的函数(失败)"
></JcRange>

关于组件的样式

1. 文字已经默认了，当然你也可以外部传入，
2. 这里图标是element，你可以换成自己的类，successIcon属性，startIcon属性，可以通过外部传入，记得加v-bind或者缩写:冒号
3. 如果你想改变其他样式，比如背景，高度啊，你可以在局部的样式前面在写了style标签，再在里面书写你要覆盖的样式，这里建议用控制台看一下属性

如果想使用css在这里

<style scoped>
.jc-range{
	background-color: #FFCCCC;
	position: relative;
	transition: 1s all;
	user-select: none;
	color: #333;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 45px; /*no*/
}
.jc-range i{
	position: absolute;
	left: 0;
	width: 60px;/*no*/
	height: 100%;
	color: #919191;
	background-color: #fff;
	border: 1px solid #bbb;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}
.jc-range.success{
	background-color: #7AC23C;
	color: #fff;
}
.jc-range.success i{
	color: #7AC23C;
}
</style>

效果图

滑动之前

滑动最右端之后

手感还是不错的，经过了transition过渡效果加持后，用户的手不抖了，腰杆直了

这里没有兼容移动端，我在下一篇发表

2019/8/4说明

最后分享一波我的ui框架收藏

好看的ios图标库 iosicongallery.com
打包字体的国外网站 icomoon.io/
还有比较火的font Awesome
妹纸ui
懒ui – layui
饿了吗ui
有赞公司的vant
美团公司的iview
Mui
bootstrap就不说了，咱都不太用了
-------- 下面这几个色系的网站,真的不错
web安全色
中国色