diff --git a/docs/demos/views/field.vue b/docs/demos/views/field.vue index fe408aa95..f91c0b0d8 100644 --- a/docs/demos/views/field.vue +++ b/docs/demos/views/field.vue @@ -36,6 +36,12 @@ + @@ -65,10 +71,13 @@ export default { username: '用户名', password: '密码', message: '留言', + phone: '手机号', + phonePlaceholder: '请输入手机号', usernamePlaceholder: '请输入用户名', passwordPlaceholder: '请输入密码', messagePlaceholder: '请输入留言', - inputDisabled: '输入框已禁用' + inputDisabled: '输入框已禁用', + phoneError: '手机号格式错误' }, 'en-US': { title2: 'Custom type', @@ -78,10 +87,13 @@ export default { username: 'Username', password: 'Password', message: 'Message', + phone: 'Phone', + phonePlaceholder: 'Phone', usernamePlaceholder: 'Username', passwordPlaceholder: 'Password', messagePlaceholder: 'Message', - inputDisabled: 'Disabled' + inputDisabled: 'Disabled', + phoneError: 'Invalid phone' } }, @@ -90,7 +102,8 @@ export default { value: '', password: '', username: '', - message: '' + message: '', + phone: '1365577' }; } }; diff --git a/docs/markdown/en-US/field.md b/docs/markdown/en-US/field.md index 27ce1eaa7..eda5c0736 100644 --- a/docs/markdown/en-US/field.md +++ b/docs/markdown/en-US/field.md @@ -46,15 +46,29 @@ Use `type` prop to custom diffrent type fileds. ```html - + ``` #### Error info +Use `error` or `error-message` to show error info ```html - + + ``` @@ -84,6 +98,7 @@ Filed support all native properties of input tag,such as `maxlength`、`placeh | label | Filed label | `String` | - | - | | disabled | Disable field | `Boolean` | `false` | - | | error | Whether to show error info | `Boolean` | `false` | - | +| error-message | Error message | `String` | `''` | - | | autosize | Textarea auto resize | `Boolean` | `false` | - | | icon | Right side Icon name | `String` | - | - | diff --git a/docs/markdown/zh-CN/field.md b/docs/markdown/zh-CN/field.md index 435675928..922e0d6ba 100644 --- a/docs/markdown/zh-CN/field.md +++ b/docs/markdown/zh-CN/field.md @@ -48,15 +48,29 @@ Vue.use(Field); ```html - + ``` #### 错误提示 +通过`error`或者`error-message`属性增加对应的错误提示 ```html - + + ``` @@ -86,6 +100,7 @@ Filed 默认支持 Input 标签所有的原生属性,比如 `maxlength`、`pla | label | 输入框标签 | `String` | - | - | | disabled | 是否禁用输入框 | `Boolean` | `false` | - | | error | 输入框是否有错误 | `Boolean` | `false` | - | +| error-message | 输入框底部错误提示文案 | `String` | `''` | - | | autosize | 高度自适应(仅支持textarea) | `Boolean` | `false` | - | | icon | 输入框尾部图标 | `String` | - | Icon 组件支持的类型 | diff --git a/packages/field/index.vue b/packages/field/index.vue index ac92a0ac2..ee454b65f 100644 --- a/packages/field/index.vue +++ b/packages/field/index.vue @@ -30,6 +30,11 @@ :type="type" :value="value" > +
{} diff --git a/packages/vant-css/src/field.css b/packages/vant-css/src/field.css index 956804408..c2aa845ba 100644 --- a/packages/vant-css/src/field.css +++ b/packages/vant-css/src/field.css @@ -22,6 +22,12 @@ padding-left: 90px; } + &__error-message { + color: $red; + font-size: 12px; + text-align: left; + } + &--has-textarea { .van-field__control { min-height: 60px;