介绍 & lt; template>
,& lt; div 类=癲rag", ref=癲ragDiv"比;
& lt;才能div 类=癲rag_bg"祝辞& lt;/div>
& lt;才能div 类=癲rag_text"在{{confirmWords}} & lt;/div>
& lt;才能div ref=癿oveDiv", @mousedown=癿ousedownFn(事件)美元“,:类=皗& # 39;handler_ok_bg& # 39;: confirmSuccess}“,类=癶andler handler_bg",祝辞& lt;/div>
,& lt;/div>
& lt;/template>
& lt; script>
,export default {
数据才能(){
,,return {
,,,beginClientX: 0,,,,/*距离屏幕左端距离*/,,,mouseMoveStata:假的,,,/*触发拖动状态,判断*/,,,maxwidth: & # 39; & # 39;,,,,,/*拖动最大宽度,依据滑块宽度算出来的*/,,,confirmWords: & # 39;拖动滑块验证& # 39;,,/*滑块文字*/,,,confirmSuccess: false ,,/*验证成功判断*/,,}
,,},
方法:才能,{
,,mousedownFn: function (e), {
,,,如果(! this.confirmSuccess) {
,,,,e.preventDefault ,,, e.preventDefault();,//阻止文字选中等,浏览器默认事件
,,,,this.mouseMoveStata =,真的;
,,,,this.beginClientX =, e.clientX;
,,,}
,,},,,//mousedoen 事件
,,successFunction () {
,,,this.confirmSuccess =,真的
,,,this.confirmWords =, & # 39;验证通过& # 39;;
,,,如果(window.addEventListener) {
,,,,document.getElementsByTagName (& # 39; html # 39;) [0] .removeEventListener (& # 39; mousemove& # 39;, this.mouseMoveFn);
,,,,document.getElementsByTagName (& # 39; html # 39;) [0] .removeEventListener (& # 39; mouseup # 39;, this.moseUpFn);
,,,}else {
,,,,document.getElementsByTagName (& # 39; html # 39;) [0] .removeEventListener (& # 39; mouseup # 39;()=在{});
,,,}
,,,document.getElementsByClassName (& # 39; drag_text& # 39;) [0] .style.color =, & # 39; # fff& # 39;
,,,document.getElementsByClassName(& # 39;处理程序# 39;)[0].style.left =, this.maxwidth +, & # 39; px # 39;;
,,,document.getElementsByClassName (& # 39; drag_bg& # 39;) [0] .style.width =, this.maxwidth +, & # 39; px # 39;;
,,},,,,,//验证成功函数
,,mouseMoveFn (e) {
,,,如果(this.mouseMoveStata) {
,,,,let width =, e.clientX 作用;this.beginClientX;
,,,,如果(width> 0,,,, width<=this.maxwidth) {
,,,,,document.getElementsByClassName(& # 39;处理程序# 39;)[0].style.left =, width +, & # 39; px # 39;;
,,,,,document.getElementsByClassName (& # 39; drag_bg& # 39;) [0] .style.width =, width +, & # 39; px # 39;;
,,,,}else 如果(width> this.maxwidth) {
,,,,,this.successFunction ();
,,,,}
,,,}
,,},,,,,,//mousemove事件
,,moseUpFn (e) {
,,,this.mouseMoveStata =,假;
,,,var width =, e.clientX 作用;this.beginClientX;
,,,如果(width
& lt; style scoped>
,.drag {
位置:,才能相对;
,,背景颜色:# e8e8e8;
,,宽度:100%;
,,身高:34 px;
,,行高:34 px;
,,text-align:中心;
,}
,.handler {
,,宽度:40像素;
,,身高:32像素;
边境才能:1 px solid # ccc;
,,光标:移动;
,}
,.handler_bg {
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章主要介绍了vue怎么实现一拉到底的滑动验证功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
直接上代码
