"請輸入手機號"
>
<
/el-input>
<
/el-form-item>
"checkmove"
>
="movebox"
>
="movego"
>
<
/div>
="txt" id=
"txt"
>按住滑塊,拖動到最右邊<
/div>
="move movebefore" v-move=
"pull"
>
<
/div>
<
!-- v-move 為自定義指令 --
>
<
/div>
<
/el-form-item>
"smscode"
>
"請輸入驗證碼" v-model.trim=
"form.smscode" autocomplete=
"off"
>
<
/el-input>
"sendcode('form')"
:disabled=
"!show"
>
"show"
>獲取簡訊驗證碼<
/span>
"!show"
>已傳送
}s<
/span>
<
/el-button>
<
/el-form-item>
"codelogin('form')"
>登 錄<
/el-button>
<
/el-form-item>
<
/el-form>
<
/div>
<
/template>
export
default
, coderules:,]
, smscode:
, checkmove:
,},}
},directives:
//臨界值大於if(
parseint
(el.style.left)
>= width)};
};document.
onmouseup
=function()
;}},
methods:
,//傳送簡訊驗證碼
sendcode
(formname));
return;}
if(!this
.form.checkmove));
return;}
let params =
//傳送簡訊驗證碼介面
sendverificationcode()
.then
(res =>
else},
1000)}
else})
},codelogin()
}}<
/script>
vue滑塊驗證登入
滑塊樣式 請輸入手機號 el input el form item checkmove movebox movego div txt id txt 按住滑塊,拖動到最右邊 div move movebefore v move pull div v move 為自定義指令 div el form it...
vue 滑塊驗證 移動端
上篇是pc端的滑塊驗證，這篇是我自己寫的移動端的，親測在ipad上可以，跟上篇差不多，但是在這篇裡多了判斷是pc端還是移動端的 相應的事件也會不一樣。這是判斷是啥pc還是移動端的方法os else if ispc created elseif this.os pc 接下來是vue jc compon...
vue 實現滑塊驗證碼
圖一為拖拽前效果，圖二為拖拽後效果 一 新建檔案jcrange.vue，如下 1 模板 1 template 2 div class jc component range 3 div class jc range class rangestatus?success 4 i mousedown ran...