Today Vue project to add a third-party components slide to unlock, renderings posted later, the general purpose of doing this is to reduce the number of bad faith registration, login and other frequently, although generally need to support the back-end, front-end only do processing so, what's the egg did not use. . But better than nothing.
Demo address components: https://www.ukobd2.com/wholesale/fvdi-j2534-diagnostic-interface-147.html
FIG effect after achieve the following:
(Without unlocking)
(Situation after unlocking)
This component is based on Vue2.x, the other version did not try. In the style of a little change, because had to fit the overall style elementUI.
Let me talk about the third-party components, and I here is vue-drag-verify (portal), GitHub also wrote in the basic installation, use and parameter list, but one thing not mentioned is that after the verification is successful callback, see for yourself the source code, you can find support, but I did not use it callback, ha ha ha.
Here the point of usage:
1. Installation Package:
1 |
npm install vue-drag-verify --save |
2. Use the file in the Vue, the main component is the introduction and use ofcomponents
1 2 3 4 5 6 7 8 9 |
import Vue from 'vue'
import dragVerify from 'vue-drag-verify'
export default {
name: 'app',
components:{
dragVerify
}
} |
3. Specific Use:
GitHub links上是这样写的：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<drag-verify :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" :circle="getShape"> </drag-verify> |
我举个例子：
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<drag-verify :width="358" :height="40" handlerIcon='el-icon-d-arrow-right' successIcon='el-icon-check' text="请将滑块拖动到右侧" success-text="验证成功" background="#ddd" progress-bar-bg="#2ACBF8" text-size="14px" :circle="true" ref="Verify"> </drag-verify> |
这里参数都可以自定义的，不懂的话可以参考文档哦。
参数的图如下：
4. 简单的调整样式，这一步非必须，根据自己项目来。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// drag verify
.drag_verify {
border-radius: 4px!important;
.dv_progress_bar {
border-radius: 4px!important;
}
.dv_handler {
border-radius: 4px!important;
top: 1px!important;
}
.dv_text{
background: -webkit-gradient(linear,left top,right top,color-stop(0, #4d4d4d),color-stop(0.4, #4d4d4d),color-stop(0.5, white),color-stop(0.6, #4d4d4d),color-stop(1, #4d4d4d));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-size-adjust: none;
-webkit-animation: slidetounlock 5s infinite;
}
@-webkit-keyframes slidetounlock {
0% {background-position: -200px 0;}
100%{background-position: 200px 0;}
}
} |
Tips: 我这里加了一个文字的动画效果，组件本身是没有的哦。但动画兼容性不是很好，建议谨慎使用。
5. 在提交表单的时候，做验证，因为我用的是elementUI的表单验证和提交，所以部分代码是下面这样的，仅做参考：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
onSubmit (formName) {
let $self = this
$self.$refs[formName].validate((valid) => {
if (valid) {
// 如果没有滑动到右侧，则提示
if (!$self.$refs.Verify.isPassing) {
$self.$message.warning('请将滑块拖动到右侧')
return false
}
// 通过验证
let _params = {
account: $self.loginForm.username,
password: $self.loginForm.password
}
$self.$http.post('/signin', _params).then((response) => {
let data = response.data
if (data.code !== '1000') {
$self.$message.warning(data.msg)
// 恢复滑动到原点
$self.resetVerify()
return false
}
// 这里做接口请求成功后的逻辑。。。
}).catch(err => {
$self.resetVerify()
})
} else {
// 未通过验证
return false
}
})
},
resetVerify () {
// 恢复滑动到原点
this.$refs.Verify.isMoving = false
this.$refs.Verify.x = 0
this.$refs.Verify.isPassing = false
this.$refs.Verify.$refs.handler.style.left = '0';
this.$refs.Verify.$refs.progressBar.style.width = '0';
} |
ok, i.e. above enables the use of the slide assembly, everyone can be adjusted according to specific needs.
Trough point
Looks like this component may fight against the universal code login, registration procedures
but few general-purpose robot can "universal" sign in a variety of popular sites
if the robot is specifically registered for a website, log in, "defensive with this component "obviously just decoration
will not speak of the most Low can also" crack (basically do not coding) button wizard "software system
by analyzing login, registration can simply bypass the http protocol
called directly via the browser plug-in after the introduction of the original js code (ajax) api will also be able to log on
so the case of all roads can "attack", do so might as well just sign in with verification codes or SMS
from the future trend terms, through micro-channel scan code to log more appropriate overall , users are less troublesome, sites do not have the burden of the cost of text messaging
Written in the last
Well, this article is over!
If you have any questions or suggestions, welcome more exchanges, if that article help you, make a reward, so I have a greater incentive to create, thank you!
Reference article: https://www.ukobd2.com/wholesale/fvdi-j2534-diagnostic-interface-147.html