[Improvement] Field: input text align (#1352)

packages/field/en-US.md

@@ -125,7 +125,8 @@ Field support all native properties of input tag，such as `maxlength`、`placeh
 | is-link | Whether to show link icon | `Boolean` | `false` |
 | error | Whether to show error info | `Boolean` | `false` |
 | error-message | Error message | `String` | `''` |
-| autosize | Textarea auto resize，can accpet an object, e.g. { maxHeight: 100, minHeight: 50 } | `Boolean | Object` | `false` |
+| input-align | Input text align, can be set to `center` `right` | `String` | `left` |
+| autosize | Textarea auto resize，can accpet an object,<br>e.g. { maxHeight: 100, minHeight: 50 } | `Boolean | Object` | `false` |
 | icon | Right side icon name | `String` | - |
 | left-icon | Left side icon name | `String` | - |
 

packages/field/index.vue

@@ -9,6 +9,7 @@
     :class="b({
       error,
       disabled: $attrs.disabled,
+      [labelAlign]: labelAlign,
       'min-height': type === 'textarea' && !autosize
     })"
   >
@@ -19,7 +20,7 @@
         v-bind="$attrs"
         v-on="listeners"
         ref="input"
-        :class="b('control')"
+        :class="b('control', inputAlign)"
         :value="value"
       />
       <input
@@ -27,7 +28,7 @@
         v-bind="$attrs"
         v-on="listeners"
         ref="input"
-        :class="b('control')"
+        :class="b('control', inputAlign)"
         :type="type"
         :value="value"
       >
@@ -73,6 +74,8 @@ export default create({
     leftIcon: String,
     required: Boolean,
     clearable: Boolean,
+    labelAlign: String,
+    inputAlign: String,
     onIconClick: Function,
     autosize: [Boolean, Object],
     errorMessage: String,

packages/field/zh-CN.md

@@ -127,7 +127,8 @@ Field 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pla
 | is-link | 是否展示右侧箭头并开启点击反馈 | `Boolean` | `false` |
 | error | 是否将输入内容标红 | `Boolean` | `false` |
 | error-message | 底部错误提示文案，为空时不展示 | `String` | `''` |
-| autosize | 自适应内容高度，只对 textarea 有效，可传入对象，如 { maxHeight: 100, minHeight: 50 }，单位为 px | `Boolean | Object` | `false` |
+| input-align | 输入框内容对齐方式，可选值为 `center` `right` | `String` | `left` |
+| autosize | 自适应内容高度，只对 textarea 有效，可传入对象,<br>如 { maxHeight: 100, minHeight: 50 }，单位为 px | `Boolean | Object` | `false` |
 | icon | 输入框尾部图标 (可选值见 Icon 组件)  | `String` | - |
 | left-icon | 输入框左侧图标 (可选值见 Icon 组件)  | `String` | - |
 

packages/vant-css/src/field.css

@@ -29,6 +29,14 @@
       color: $gray-darker;
       background-color: transparent;
     }
+
+    &--center {
+      text-align: center;
+    }
+
+    &--right {
+      text-align: right;
+    }
   }
 
   &__clear,