提交 759b34ea 编写于 作者: D DCloud_LXH

feat(docs): input组件添加verifyNumber属性

上级 04f0b3fd
......@@ -24,6 +24,7 @@
|adjust-position|Boolean|true|键盘弹起时,是否自动上推页面|App-Android(vue 页面 softinputMode 为 adjustResize 时无效)、微信小程序、百度小程序、QQ小程序|
|hold-keyboard|boolean|false|focus时,点击页面的时候不收起键盘|微信小程序2.8.2|
|auto-blur|boolean|false|键盘收起时,是否自动失去焦点|App 3.0.0+|
|verifyNumber|boolean|false|当设置`type="number"`时,是否对输入的字符执行`当前输入是否有效`判断|HBuilder 3.1.18+|
|@input|EventHandle||当键盘输入时,触发input事件,event.detail = {value}|差异见下方 Tips|
|@focus|EventHandle||输入框聚焦时触发,event.detail = { value, height },height 为键盘高度|仅微信小程序、App(2.2.3+) 、QQ小程序支持 height|
|@blur|EventHandle||输入框失去焦点时触发,event.detail = {value: value}||
......@@ -36,6 +37,10 @@
- 如果遇到 value 属性设置不生效的问题参考:[组件属性设置不生效解决办法](/vue-api?id=_4-组件属性设置不生效解决办法)
- `input` 组件上有默认的 `min-height` 样式,如果 `min-height` 的值大于 `height` 的值那么 `height` 样式无效。
- H5 暂未支持动态切换,请使用 `v-if`进行整体切换。
- `verifyNumber`:是否对输入的字符执行输入是否有效判断判断
-`false`时:不执行输入是否有效判断,输入时会响应`input`事件,此时`event.detail = {value,valid}`,属性`valid`用来表明当前输入是否有效。
-`true`时:执行输入是否有效判断, 输入非数字字符将不会被赋值,也不会响应`input`事件。例如:`-(负号)`就是非数字字符。输入负数时,需要输入数字后再移动光标到数字最前面输入`-(负号)`
```html
<!-- 错误写法 -->
<input :type="isText?'text':'number'" placeholder="请输入内容" />
......
......@@ -94,6 +94,10 @@ export default {
confirmType: {
type: String,
default: 'done'
},
verifyNumber: {
type: Boolean,
default: false
}
},
data () {
......@@ -179,20 +183,21 @@ export default {
}
if (~NUMBER_TYPES.indexOf(this.type)) {
// 在输入 - 负号 的情况下,event.target.value没有值,但是会触发校验 false,因此做此处理
// 在输入 - 负号 的情况下,event.target.value没有值,但是会触发校验 false
this.valid = this.$refs.input.validity && this.$refs.input.validity.valid
this.cachedValue = this.valueSync
// 处理部分输入法可以输入其它字符的情况
// 上一处理导致无法输入 - ,因此去除
/* if (this.$refs.input.validity && !this.$refs.input.validity.valid) {
$event.target.value = this.cachedValue
this.valueSync = $event.target.value
// 输入非法字符不触发 input 事件
return
} else {
if (!this.verifyNumber) {
this.cachedValue = this.valueSync
} */
} else {
// 处理部分输入法可以输入其它字符的情况,此处理无法先输入 -(负号),只能输入数字再移动光标输入负号
if (this.$refs.input.validity && !this.valid) {
$event.target.value = this.cachedValue
this.valueSync = $event.target.value
// 输入非法字符不触发 input 事件
return
} else {
this.cachedValue = this.valueSync
}
}
}
// type="number" 不支持 maxlength 属性,因此需要主动限制长度。
......@@ -205,9 +210,16 @@ export default {
return
}
}
this.$triggerInput($event, {
this.$triggerInput($event, Object.assign({
value: this.valueSync
}, force)
}, (() => {
if (!this.verifyNumber) {
return {
valid: this.valid
}
}
})()), force)
},
_onComposition ($event) {
if ($event.type === 'compositionstart') {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册