feat(Form): add input-align prop

src/field/index.js

@@ -326,18 +326,17 @@ export default createComponent({
     genInput() {
       const { type } = this;
       const inputSlot = this.slots('input');
+      const inputAlign = this.getProp('inputAlign');
 
       if (inputSlot) {
         return (
-          <div class={bem('control', [this.inputAlign, 'custom'])}>
+          <div class={bem('control', [inputAlign, 'custom'])}>{inputSlot}</div>
-            {inputSlot}
-          </div>
         );
       }
 
       const inputProps = {
         ref: 'input',
-        class: bem('control', this.inputAlign),
+        class: bem('control', inputAlign),
         domProps: {
           value: this.value,
         },
@@ -435,11 +434,13 @@ export default createComponent({
     },
 
     getProp(key) {
+      if (isDef(this[key])) {
+        return this[key];
+      }
+
       if (this.vanForm && isDef(this.vanForm[key])) {
         return this.vanForm[key];
       }
-
-      return this[key];
     },
   },
 

src/form/README.md

@@ -406,6 +406,7 @@ export default {
 | Attribute | Description | Type | Default |
 |------|------|------|------|
 | label-align | Label text align, can be set to `center` `right` | *string* | `left` |
+| input-align | Input text align, can be set to `center` `right` | *string* | `left` |
 | validate-first | Whether to stop the validation when a rule fails | *boolean* | `false` |
 
 ### Events

src/form/README.zh-CN.md

@@ -437,7 +437,8 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 |
 |------|------|------|------|
-| label-align | 表单项左侧文本对齐方式，可选值为 `center` `right` | *string* | `left` |
+| label-align | 表单项文本对齐方式，可选值为 `center` `right` | *string* | `left` |
+| input-align | 输入框内容对齐方式，可选值为 `center` `right` | *string* | `left` |
 | validate-first | 是否在某一项校验不通过时停止校验 | *boolean* | `false` |
 
 ### Events

src/form/demo/BasicUsage.vue

@@ -1,6 +1,6 @@
 <template>
   <demo-block :title="$t('basicUsage')">
-    <van-form ref="form" @submit="onSubmit" @failed="onFailed">
+    <van-form @submit="onSubmit" @failed="onFailed">
       <van-field
         v-model="username"
         name="username"

src/form/index.js

@@ -5,6 +5,7 @@ const [createComponent, bem] = createNamespace('form');
 export default createComponent({
   props: {
     labelAlign: String,
+    inputAlign: String,
     validateFirst: Boolean,
   },