vue制限inputは正数しか入力できません
1348 ワード
一部のプロジェクトではinputボックスに数字しか入力できません.次の方法で使用できます.
ラベルに@inputイベントをバインドしてラベルの値の変化を傍受し、入力した値を正規に変更します.
第2部パッケージのカスタム命令はラベルの上に置きます!
次はページに行って効果を見ることができて、数字を入力するしかなくてしかも正数だけです!
elementのinputスタイルコードを添付
ラベルに@inputイベントをバインドしてラベルの値の変化を傍受し、入力した値を正規に変更します.
第2部パッケージのカスタム命令はラベルの上に置きます!
directives: {
numberOnly: {
bind: function(el) {
el.handler = function() {
el.value = Number(el.value.replace(/\D+/, ''))
}
el.addEventListener('input', el.handler)
},
unbind: function(el) {
el.removeEventListener('input', el.handler)
}
}
},
次はページに行って効果を見ることができて、数字を入力するしかなくてしかも正数だけです!
elementのinputスタイルコードを添付
.keep_input {
-webkit-appearance: none;
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
outline: 0;
padding: 0 15px;
-webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
height: 30px;
line-height: 30px;
text-align: left;
}
.keep_input:focus {
border-color: #54a6de;
outline: 0;
}