上篇是pc端的滑塊驗證,這篇是我自己寫的移動端的,親測在ipad上可以,跟上篇差不多,但是在這篇裡多了判斷是pc端還是移動端的**,相應的事件也會不一樣。
//這是判斷是啥pc還是移動端的方法os(
)else
if(ispc)},
created()
elseif(
this.os
()=='pc')}
,
接下來是vue**
="jc-component__range"
>
="jc-range"
:class
="rangestatus?'success':''"
>
"rangemove"
:class
="rangestatus?successicon:starticon" v-if=
"ispc"
>
<
/i>
"rangemoveipad"
:class
="rangestatus?successicon:starticon" v-
else
>
<
/i>
}<
/div>
<
/div>
<
/template>
鞋面是移動端滑動的**
rangemoveipad
(e) document.
ontouchmove
=(e)
=>if(
this
.disx>=maxx-elewidth)
ele.style.transition =
'.1s all'
; ele.style.transform =
'translatex('
+this
.disx+
'px)'
; e.
preventdefault()
;}document.
ontouchend=(
)=>
else
//執行成功的函式
this
.successfun &&
this
.successfun()
;}document.ontouchmove =
null
; document.ontouchend =
null;}
},
又發現好方法的小夥伴可以一起討論哦!!! 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 item sm...
js移動端滑塊驗證解鎖元件
本文修改自pc端的js滑塊驗證元件,pc端使用的是onmousedown,onmouseup,nomousemove。原文找不到了,也是文章,在此感謝廣大的生產力吧。說下對外掛程式和元件的理解 元件是擁有靜態dom的外掛程式,所以說元件可以轉為外掛程式。如果元件的dom部分,動態建立了,那就可以變為...
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...