1、在utils中新建乙個testinput.js檔案,testinput中的**如下:
2、在main.js中引入testinput.js// 註冊全域性自定義指令
//保留整數
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
;
3、在需要用到的地方使用。import inputpd from
"@/utils/testinput.js"
;//用來校驗input輸入是否是數字,小數等
vue.prototype.$common = inputpd;
//掛載input的檢驗方法
// 在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 來實現,但此處我們專門來介紹下自定義指令的實現方式。效果...