feat: add multiple examples (#5564)

src/field/README.md

@@ -195,6 +195,19 @@ Textarea Field can be auto resize when has `autosize` prop
 />
 ```
 
+### Input Align
+
+Use `input-align` prop to align the input value
+
+```html
+<van-field
+  v-model="value"
+  :label="Text"
+  :placeholder="Input Align Right"
+  input-align="right"
+/>
+```
+
 ## API
 
 ### Props

src/field/README.zh-CN.md

@@ -214,6 +214,19 @@ export default {
 />
 ```
 
+### 输入框内容对齐
+
+通过`input-align`属性可以设置输入框内容的对齐方式
+
+```html
+<van-field
+  v-model="value"
+  :label="文本"
+  :placeholder="输入框内容右对齐"
+  input-align="right"
+/>
+```
+
 ## API
 
 ### Props

src/field/demo/index.vue

@@ -145,6 +145,17 @@
         />
       </van-cell-group>
     </demo-block>
+
+    <demo-block :title="$t('inputAlign')">
+      <van-cell-group>
+        <van-field
+          v-model="value"
+          :label="$t('text')"
+          :placeholder="$t('alignPlaceHolder')"
+          input-align="right"
+        />
+      </van-cell-group>
+    </demo-block>
   </demo-section>
 </template>
 
@@ -171,13 +182,15 @@ export default {
       showWordLimit: '显示字数统计',
       inputReadonly: '输入框只读',
       inputDisabled: '输入框已禁用',
+      inputAlign: '输入框内容对齐',
       smsPlaceholder: '请输入短信验证码',
       textPlaceholder: '请输入文本',
       digitPlaceholder: '请输入整数',
       phonePlaceholder: '请输入手机号',
       textareaAutosize: '高度自适应',
       numberPlaceholder: '请输入数字（支持小数）',
-      messagePlaceholder: '请输入留言'
+      messagePlaceholder: '请输入留言',
+      alignPlaceHolder: '输入框内容右对齐',
     },
     'en-US': {
       tel: 'Tel',
@@ -199,13 +212,15 @@ export default {
       showWordLimit: 'Show Word Limit',
       inputReadonly: 'Input Readonly',
       inputDisabled: 'Input Disabled',
+      inputAlign: 'Input Align',
       smsPlaceholder: 'SMS',
       textPlaceholder: 'Text',
       digitPlaceholder: 'Digit',
       phonePlaceholder: 'Phone',
       textareaAutosize: 'Auto Resize',
       numberPlaceholder: 'Number',
-      messagePlaceholder: 'Message'
+      messagePlaceholder: 'Message',
+      alignPlaceHolder: 'Input Align Right',
     }
   },
 

src/field/test/__snapshots__/demo.spec.js.snap

@@ -146,5 +146,15 @@ exports[`renders demo correctly 1`] = `
       </div>
     </div>
   </div>
+  <div>
+    <div class="van-cell-group van-hairline--top-bottom">
+      <div class="van-cell van-field">
+        <div class="van-cell__title van-field__label"><span>文本</span></div>
+        <div class="van-cell__value">
+          <div class="van-field__body"><input type="text" placeholder="输入框内容右对齐" class="van-field__control van-field__control--right"></div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 `;