vue 滑塊驗證 移動端

2021-09-29 09:58:09 字數 1335 閱讀 4538

上篇是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...