Sabemos que el propósito del código de verificación es verificar si es un humano o una máquina.
Lo que escribí aquí solo imitó el estilo y no realizó esas operaciones complicadas, por lo que no es seguro (no puedo juzgar a humanos o máquinas), vea el efecto a continuación:
1. Cree un nuevo archivo login-form.vue, el código es el siguiente:
1. Agregue el código del código de verificación de la actividad en el formulario de plantilla:
<FormItem prop="rangeStatus">
<div class="jc-component__range" ref="dragcomponent">
<div class="jc-range" :class="rangeStatus?'success':''">
<i @mousedown="rangeMove" :class="rangeStatus?successIcon:startIcon" id="jc-range"></i>
{
{rangeStatus?successText:startText}}
</div>
</div>
</FormItem>
2. código js
<script>
export default {
props: {
// 成功之后的函数
successFun: {
type: Function
},
//成功图标
successIcon: {
type: String,
default: 'ivu-icon ivu-icon-ios-checkmark-circle'
},
//成功文字
successText: {
type: String,
default () {
return this.$t('drag_successText')
}
},
//开始的图标
startIcon: {
type: String,
default: 'ivu-icon ivu-icon-ios-arrow-forward'
},
//开始的文字
startText: {
type: String,
default () {
return this.$t('drag_startText')
}
},
//失败之后的函数
errorFun: {
type: Function
},
//或者用值来进行监听
status: {
type: String
}
},
data(){
return {
disX : 0,
rangeStatus: false
},
rules () {
const checkRangeStatus = (rule, value, callback) => {
if (!this.rangeStatus) {
return callback(new Error(this.$t('drag_fail')));
} else {
callback();
}
};
return {
userName: [
{ required: true, message: this.$t('username_required'), trigger: 'change' },
{ type: 'string', min: 3, max: 20, trigger: 'change' }
],
password: [
{ required: true, message: this.$t('password_required'), trigger: 'change' },
{ type: 'string', min: 6, max: 32, trigger: 'blur' }
],
rangeStatus: [{ validator: checkRangeStatus, trigger: "change" }]
}
}
},
},
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();
this.rangeStatus = false;
}else{
this.rangeStatus = true;
if(this.status){
this.$parent[this.status] = true;
}
//执行成功的函数
this.successFun && this.successFun();
let children = this.$refs.dragcomponent.children;
if(children[0].offsetParent.children.length>1) {
children[0].offsetParent.children[1].innerHTML = ''
}
}
document.onmousemove = null;
document.onmouseup = null;
}
}
}
};
</script>3. Código CSS (aquí se usa sass)
Ninguna instalación requiere instalación manual:
npm install sass-loader --save-dev ；
<style lang="scss" scoped>
@mixin jc-flex{
display: flex;
justify-content: center;
align-items: center;
}
.jc-component__range{
.jc-range{
background-color: #e9e9e9;
position: relative;
transition: 1s all;
user-select: none;
color: #585858;
@include jc-flex;
height: 50px; /*no*/
&.success{
background-color: #3bc923;
color: #fff;
i{
color: #3bc923;
}
}
i{
position: absolute;
left: 0;
width: 50px;/*no*/
height: 100%;
color: #3fcd26;
background-color: #fff;
border: 1px solid #d8d8d8;
cursor: pointer;
font-size: 24px;
@include jc-flex;
}
}
}
</style>
Introduzca este componente en su formulario:
<login-form @ on-success-valid = "handleSubmit"> </login-form>
Tenga en cuenta que si la verificación falla, es necesario restaurar el control deslizante:
Agregue el siguiente código a la falla de validación del método de envío de su formulario:
this.rangeStatus = false
this.disX = 0
document.getElementById ("jc-range"). style = ''
El efecto es el siguiente:
