全域性自定義指令,限制只能輸入數字

2021-10-10 11:51:56 字數 1454 閱讀 3738

1、在utils中新建乙個testinput.js檔案,testinput中的**如下:

// 註冊全域性自定義指令

//保留整數

function

inputpdint

(e, data, name =

false

)else

}//保留兩位小數

function

inputpdtwo

(e, data, name =

false)/g

,".").

replace

("."

,"$#$").

replace

(/\./g,""

).replace

("$#$"

,".").

replace

(/^(\-)*(\d+)\.(\d\d).*$/

,"$1$2.$3");

if(name)

else

}//保留四位小數

function

inputpdfour

(e, data, name =

false)/g

,".").

replace

("."

,"$#$").

replace

(/\./g,""

).replace

("$#$"

,".").

replace

(/^(\-)*(\d+)\.(\d\d\d\d).*$/

,"$1$2.$3");

if(name)

else

}export

default

;

2、在main.js中引入testinput.js

import inputpd from

"@/utils/testinput.js"

;//用來校驗input輸入是否是數字,小數等

vue.prototype.$common = inputpd;

//掛載input的檢驗方法

3、在需要用到的地方使用。

// 在input中使用,限制只能輸入整數

"addinfo.number" @input=

"$common.inputpdint($event,addinfo,'number')" type=

"text"

/>

//在element ui的input輸入框中限制只能輸入2位小數數字

"addinfo.number" @input=

"$common.inputpdtwo($event,addinfo,'number')" clearable size=

"small"

>

<

/el-input>

Vue自定義指令實現input限制輸入正整數

種一棵樹最好的時間是十年前,其次是現在。誰說的不重要。在做表單時,我們經常會遇到各種input輸入框,例如在設計填寫個數時,要求輸入正整數。如果只是個別輸入框,那麼我們完全可以檢測input的keyup事件,在該事件裡對keyup事件進行操作即可 type text v model value ke...

vue自定義指令(全域性 區域性)

vue除了提供了缺省內置的指令外,還允許開發人員根據實際情況自定義指令,它的作用價值在於當開發人員在某些場景下需要對普通dom元素進行操作的時候。vue自定義指令和元件一樣存在著全域性註冊和區域性註冊兩種方式。全域性指令 效果 區域性指令 顧名思義 區域性指令定義在組建內,寫法上最大的不同是定義時d...

Vue 自定義指令(全域性定義 區域性定義)

前面已經介紹了幾個系統提供的指令,比如 v text v bind v on 等等,本文我們來介紹下自定義指令的實現。我們想建立乙個自動獲取焦點的指令,該功能其實可以通過document.getelementbyid search focus 來實現,但此處我們專門來介紹下自定義指令的實現方式。效果...