diff --git a/src/field/README.md b/src/field/README.md index c9f694505..2abfaf402 100644 --- a/src/field/README.md +++ b/src/field/README.md @@ -17,34 +17,45 @@ The value of field is bound with v-model. ```html - + ``` +```js +export default { + data() { + return { + value: '' + }; + } +} +``` + ### Custom Type Use `type` prop to custom different type fields. ```html - - + - - + + + + + +``` + +```js +export default { + data() { + return { + tel: '', + number: '', + username: '', + password: '' + }; + } +} ``` ### Disabled @@ -52,9 +63,8 @@ Use `type` prop to custom different type fields. ```html diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md index 54c81d89a..b9327b74d 100644 --- a/src/field/README.zh-CN.md +++ b/src/field/README.zh-CN.md @@ -17,38 +17,54 @@ Vue.use(Field); ### 基础用法 -通过`v-model`绑定输入框的值 +可以通过`v-model`双向绑定输入框的值,通过`placeholder`设置占位提示文字 ```html + ``` +```js +export default { + data() { + return { + value: '' + }; + } +} +``` + ### 自定义类型 -根据`type`属性定义不同类型的输入框 +根据`type`属性定义不同类型的输入框,默认值为`text` ```html - - + + - - + + + + + + + + +``` + +```js +export default { + data() { + return { + tel: '', + text: '', + number: '', + password: '' + }; + } +} ``` ### 禁用输入框 @@ -56,9 +72,8 @@ Vue.use(Field); ```html diff --git a/src/field/demo/index.vue b/src/field/demo/index.vue index b28eed3bb..c87337571 100644 --- a/src/field/demo/index.vue +++ b/src/field/demo/index.vue @@ -2,20 +2,16 @@ - + + + + + - + -1) { + value = value.slice(0, dotIndex + 1) + value.slice(dotIndex).replace(/\./g, ''); + } + + return value.replace(/[^0-9.]/g, ''); +} + export default createComponent({ inheritAttrs: false, @@ -111,6 +121,16 @@ export default createComponent({ target.value = value; } + if (this.type === 'number') { + const originValue = value; + + value = formatNumber(value); + + if (value !== originValue) { + target.value = value; + } + } + return value; }, @@ -159,19 +179,6 @@ export default createComponent({ }, onKeypress(event) { - if (this.type === 'number') { - const { keyCode } = event; - const allowPoint = String(this.value).indexOf('.') === -1; - const isValidKey = - (keyCode >= 48 && keyCode <= 57) || - (keyCode === 46 && allowPoint) || - keyCode === 45; - - if (!isValidKey) { - preventDefault(event); - } - } - // trigger blur after click keyboard search button /* istanbul ignore next */ if (this.type === 'search' && event.keyCode === 13) { @@ -209,11 +216,7 @@ export default createComponent({ const inputSlot = this.slots('input'); if (inputSlot) { - return ( -
- {inputSlot} -
- ); + return
{inputSlot}
; } const inputProps = { @@ -240,7 +243,10 @@ export default createComponent({ return