From 31da78eae6c627cc9024ce11bbe779e825b5646b Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Sat, 12 Jan 2019 23:14:52 +0800
Subject: [PATCH] [improvement] Field: jsx (#2512)

---
 .../test/__snapshots__/demo.spec.js.snap      |  35 +----
 .../test/__snapshots__/index.spec.js.snap     |  63 ++------
 .../test/__snapshots__/demo.spec.js.snap      |  14 +-
 .../test/__snapshots__/index.spec.js.snap     |   5 +-
 .../test/__snapshots__/demo.spec.js.snap      |  14 +-
 packages/field/{index.vue => index.js}        | 146 ++++++++----------
 .../test/__snapshots__/demo.spec.js.snap      |  51 +-----
 .../test/__snapshots__/index.spec.js.snap     |  22 +--
 .../test/__snapshots__/demo.spec.js.snap      |  21 +--
 9 files changed, 97 insertions(+), 274 deletions(-)
 rename packages/field/{index.vue => index.js} (58%)

diff --git a/packages/address-edit/test/__snapshots__/demo.spec.js.snap b/packages/address-edit/test/__snapshots__/demo.spec.js.snap
index 5fedf68a6..b4e1fb662 100644
--- a/packages/address-edit/test/__snapshots__/demo.spec.js.snap
+++ b/packages/address-edit/test/__snapshots__/demo.spec.js.snap
@@ -7,34 +7,19 @@ exports[`renders demo correctly 1`] = `
       <div placeholder="收货人姓名" class="van-cell van-field">
         <div class="van-cell__title"><span>姓名</span></div>
         <div class="van-cell__value">
-          <div class="van-field__body"><input type="text" placeholder="收货人姓名" value="" class="van-field__control">
-            <!---->
-            <!---->
-            <!---->
-          </div>
-          <!---->
+          <div class="van-field__body"><input placeholder="收货人姓名" value="" class="van-field__control"></div>
         </div>
       </div>
       <div placeholder="收货人手机号" class="van-cell van-field">
         <div class="van-cell__title"><span>电话</span></div>
         <div class="van-cell__value">
-          <div class="van-field__body"><input type="tel" placeholder="收货人手机号" value="" class="van-field__control">
-            <!---->
-            <!---->
-            <!---->
-          </div>
-          <!---->
+          <div class="van-field__body"><input placeholder="收货人手机号" value="" class="van-field__control"></div>
         </div>
       </div>
       <div placeholder="选择省 / 市 / 区" class="van-cell van-field">
         <div class="van-cell__title"><span>地区</span></div>
         <div class="van-cell__value">
-          <div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" value="" class="van-field__control">
-            <!---->
-            <!---->
-            <!---->
-          </div>
-          <!---->
+          <div class="van-field__body"><input placeholder="选择省 / 市 / 区" readonly="readonly" value="" class="van-field__control"></div>
         </div>
       </div>
       <div class="van-cell van-address-edit-detail">
@@ -42,12 +27,7 @@ exports[`renders demo correctly 1`] = `
           <div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-field">
             <div class="van-cell__title"><span>详细地址</span></div>
             <div class="van-cell__value">
-              <div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea>
-                <!---->
-                <!---->
-                <!---->
-              </div>
-              <!---->
+              <div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
             </div>
           </div>
         </div>
@@ -55,12 +35,7 @@ exports[`renders demo correctly 1`] = `
       <div maxlength="6" placeholder="邮政编码" class="van-cell van-field">
         <div class="van-cell__title"><span>邮政编码</span></div>
         <div class="van-cell__value">
-          <div class="van-field__body"><input type="tel" maxlength="6" placeholder="邮政编码" value="" class="van-field__control">
-            <!---->
-            <!---->
-            <!---->
-          </div>
-          <!---->
+          <div class="van-field__body"><input maxlength="6" placeholder="邮政编码" value="" class="van-field__control"></div>
         </div>
       </div>
       <div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
diff --git a/packages/address-edit/test/__snapshots__/index.spec.js.snap b/packages/address-edit/test/__snapshots__/index.spec.js.snap
index b77959543..870684e79 100644
--- a/packages/address-edit/test/__snapshots__/index.spec.js.snap
+++ b/packages/address-edit/test/__snapshots__/index.spec.js.snap
@@ -5,34 +5,19 @@ exports[`create a AddressEdit 1`] = `
   <div placeholder="收货人姓名" class="van-cell van-field">
     <div class="van-cell__title"><span>姓名</span></div>
     <div class="van-cell__value">
-      <div class="van-field__body"><input type="text" placeholder="收货人姓名" value="" class="van-field__control">
-        <!---->
-        <!---->
-        <!---->
-      </div>
-      <!---->
+      <div class="van-field__body"><input placeholder="收货人姓名" value="" class="van-field__control"></div>
     </div>
   </div>
   <div placeholder="收货人手机号" class="van-cell van-field">
     <div class="van-cell__title"><span>电话</span></div>
     <div class="van-cell__value">
-      <div class="van-field__body"><input type="tel" placeholder="收货人手机号" value="" class="van-field__control">
-        <!---->
-        <!---->
-        <!---->
-      </div>
-      <!---->
+      <div class="van-field__body"><input placeholder="收货人手机号" value="" class="van-field__control"></div>
     </div>
   </div>
   <div placeholder="选择省 / 市 / 区" class="van-cell van-field">
     <div class="van-cell__title"><span>地区</span></div>
     <div class="van-cell__value">
-      <div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" value="" class="van-field__control">
-        <!---->
-        <!---->
-        <!---->
-      </div>
-      <!---->
+      <div class="van-field__body"><input placeholder="选择省 / 市 / 区" readonly="readonly" value="" class="van-field__control"></div>
     </div>
   </div>
   <div class="van-cell van-address-edit-detail">
@@ -40,12 +25,7 @@ exports[`create a AddressEdit 1`] = `
       <div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-field">
         <div class="van-cell__title"><span>详细地址</span></div>
         <div class="van-cell__value">
-          <div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea>
-            <!---->
-            <!---->
-            <!---->
-          </div>
-          <!---->
+          <div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
         </div>
       </div>
     </div>
@@ -83,34 +63,19 @@ exports[`create a AddressEdit with props 1`] = `
   <div placeholder="收货人姓名" class="van-cell van-field">
     <div class="van-cell__title"><span>姓名</span></div>
     <div class="van-cell__value">
-      <div class="van-field__body"><input type="text" placeholder="收货人姓名" value="测试" class="van-field__control">
-        <!---->
-        <!---->
-        <!---->
-      </div>
-      <!---->
+      <div class="van-field__body"><input placeholder="收货人姓名" value="测试" class="van-field__control"></div>
     </div>
   </div>
   <div placeholder="收货人手机号" class="van-cell van-field">
     <div class="van-cell__title"><span>电话</span></div>
     <div class="van-cell__value">
-      <div class="van-field__body"><input type="tel" placeholder="收货人手机号" value="13000000000" class="van-field__control">
-        <!---->
-        <!---->
-        <!---->
-      </div>
-      <!---->
+      <div class="van-field__body"><input placeholder="收货人手机号" value="13000000000" class="van-field__control"></div>
     </div>
   </div>
   <div placeholder="选择省 / 市 / 区" class="van-cell van-field">
     <div class="van-cell__title"><span>地区</span></div>
     <div class="van-cell__value">
-      <div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" value="北京市/朝阳区" class="van-field__control">
-        <!---->
-        <!---->
-        <!---->
-      </div>
-      <!---->
+      <div class="van-field__body"><input placeholder="选择省 / 市 / 区" readonly="readonly" value="北京市/朝阳区" class="van-field__control"></div>
     </div>
   </div>
   <div class="van-cell van-address-edit-detail">
@@ -118,12 +83,7 @@ exports[`create a AddressEdit with props 1`] = `
       <div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-field">
         <div class="van-cell__title"><span>详细地址</span></div>
         <div class="van-cell__value">
-          <div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control">详细地址</textarea>
-            <!---->
-            <!---->
-            <!---->
-          </div>
-          <!---->
+          <div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control">详细地址</textarea></div>
         </div>
       </div>
     </div>
@@ -131,12 +91,7 @@ exports[`create a AddressEdit with props 1`] = `
   <div maxlength="6" placeholder="邮政编码" class="van-cell van-field">
     <div class="van-cell__title"><span>邮政编码</span></div>
     <div class="van-cell__value">
-      <div class="van-field__body"><input type="tel" maxlength="6" placeholder="邮政编码" value="10000" class="van-field__control">
-        <!---->
-        <!---->
-        <!---->
-      </div>
-      <!---->
+      <div class="van-field__body"><input maxlength="6" placeholder="邮政编码" value="10000" class="van-field__control"></div>
     </div>
   </div>
   <div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
diff --git a/packages/contact-card/test/__snapshots__/demo.spec.js.snap b/packages/contact-card/test/__snapshots__/demo.spec.js.snap
index f4aef550e..9fb8dc8d1 100644
--- a/packages/contact-card/test/__snapshots__/demo.spec.js.snap
+++ b/packages/contact-card/test/__snapshots__/demo.spec.js.snap
@@ -28,23 +28,13 @@ exports[`renders demo correctly 1`] = `
         <div maxlength="30" placeholder="请填写姓名" class="van-cell van-field">
           <div class="van-cell__title"><span>张三</span></div>
           <div class="van-cell__value">
-            <div class="van-field__body"><input type="text" maxlength="30" placeholder="请填写姓名" value="" class="van-field__control">
-              <!---->
-              <!---->
-              <!---->
-            </div>
-            <!---->
+            <div class="van-field__body"><input maxlength="30" placeholder="请填写姓名" value="" class="van-field__control"></div>
           </div>
         </div>
         <div placeholder="请填写电话" class="van-cell van-field">
           <div class="van-cell__title"><span>电话</span></div>
           <div class="van-cell__value">
-            <div class="van-field__body"><input type="tel" placeholder="请填写电话" value="" class="van-field__control">
-              <!---->
-              <!---->
-              <!---->
-            </div>
-            <!---->
+            <div class="van-field__body"><input placeholder="请填写电话" value="" class="van-field__control"></div>
           </div>
         </div>
         <div class="van-contact-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div>
diff --git a/packages/coupon-list/test/__snapshots__/index.spec.js.snap b/packages/coupon-list/test/__snapshots__/index.spec.js.snap
index c15a1a5bc..e63a78404 100644
--- a/packages/coupon-list/test/__snapshots__/index.spec.js.snap
+++ b/packages/coupon-list/test/__snapshots__/index.spec.js.snap
@@ -22,12 +22,9 @@ exports[`render coupon list 1`] = `
 <div class="van-coupon-list">
   <div class="van-cell van-cell--borderless van-field van-coupon-list__field">
     <div class="van-cell__value van-cell__value--alone">
-      <div class="van-field__body"><input type="text" placeholder="请输入优惠码" maxlength="20" class="van-field__control">
-        <!---->
-        <!---->
+      <div class="van-field__body"><input placeholder="请输入优惠码" maxlength="20" class="van-field__control">
         <div class="van-field__button"><button disabled="disabled" class="van-button van-button--danger van-button--small van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button></div>
       </div>
-      <!---->
     </div>
   </div>
   <div class="van-tabs van-tabs--line van-coupon-list__tab">
diff --git a/packages/dialog/test/__snapshots__/demo.spec.js.snap b/packages/dialog/test/__snapshots__/demo.spec.js.snap
index b634a3097..a691ef147 100644
--- a/packages/dialog/test/__snapshots__/demo.spec.js.snap
+++ b/packages/dialog/test/__snapshots__/demo.spec.js.snap
@@ -18,23 +18,13 @@ exports[`renders demo correctly 1`] = `
         <div placeholder="请输入用户名" class="van-cell van-field">
           <div class="van-cell__title"><span>用户名</span></div>
           <div class="van-cell__value">
-            <div class="van-field__body"><input type="text" placeholder="请输入用户名" value="" class="van-field__control">
-              <!---->
-              <!---->
-              <!---->
-            </div>
-            <!---->
+            <div class="van-field__body"><input placeholder="请输入用户名" value="" class="van-field__control"></div>
           </div>
         </div>
         <div placeholder="请输入密码" class="van-cell van-field">
           <div class="van-cell__title"><span>密码</span></div>
           <div class="van-cell__value">
-            <div class="van-field__body"><input type="password" placeholder="请输入密码" value="" class="van-field__control">
-              <!---->
-              <!---->
-              <!---->
-            </div>
-            <!---->
+            <div class="van-field__body"><input placeholder="请输入密码" value="" class="van-field__control"></div>
           </div>
         </div>
       </div>
diff --git a/packages/field/index.vue b/packages/field/index.js
similarity index 58%
rename from packages/field/index.vue
rename to packages/field/index.js
index e3f431058..77bfc73c1 100644
--- a/packages/field/index.vue
+++ b/packages/field/index.js
@@ -1,84 +1,11 @@
-<template>
-  <cell
-    :icon="leftIcon"
-    :title="label"
-    :center="center"
-    :border="border"
-    :is-link="isLink"
-    :required="required"
-    :class="b({
-      error,
-      disabled: $attrs.disabled,
-      [`label-${labelAlign}`]: labelAlign,
-      'min-height': type === 'textarea' && !autosize
-    })"
-  >
-    <slot
-      name="left-icon"
-      slot="icon"
-    />
-    <slot
-      name="label"
-      slot="title"
-    />
-    <div :class="b('body')">
-      <textarea
-        v-if="type === 'textarea'"
-        v-bind="$attrs"
-        v-on="listeners"
-        ref="input"
-        :class="b('control', inputAlign)"
-        :value="value"
-        :readonly="readonly"
-      />
-      <input
-        v-else
-        v-bind="$attrs"
-        v-on="listeners"
-        ref="input"
-        :class="b('control', inputAlign)"
-        :type="type"
-        :value="value"
-        :readonly="readonly"
-      >
-      <icon
-        v-if="showClear"
-        name="clear"
-        :class="b('clear')"
-        @touchstart.prevent="onClear"
-      />
-      <div
-        v-if="$slots.icon || icon"
-        :class="b('icon')"
-        @click="onClickIcon"
-      >
-        <slot name="icon">
-          <icon :name="icon" />
-        </slot>
-      </div>
-      <div
-        v-if="$slots.button"
-        :class="b('button')"
-      >
-        <slot name="button" />
-      </div>
-    </div>
-    <div
-      v-if="errorMessage"
-      v-text="errorMessage"
-      :class="b('error-message')"
-    />
-  </cell>
-</template>
-
-<script>
-import create from '../utils/create';
+import { use, isObj, isDef } from '../utils';
+import Icon from '../icon';
+import Cell from '../cell';
 import CellMixin from '../mixins/cell';
-import { isObj } from '../utils';
 
-export default create({
-  name: 'field',
+const [sfc, bem] = use('field');
 
+export default sfc({
   inheritAttrs: false,
 
   mixins: [CellMixin],
@@ -118,7 +45,9 @@ export default create({
 
   computed: {
     showClear() {
-      return this.clearable && this.focused && this.value !== '' && this.isDef(this.value) && !this.readonly;
+      return (
+        this.clearable && this.focused && this.value !== '' && isDef(this.value) && !this.readonly
+      );
     },
 
     listeners() {
@@ -146,7 +75,7 @@ export default create({
       let { value } = target;
       const { maxlength } = this.$attrs;
 
-      if (this.type === 'number' && this.isDef(maxlength) && value.length > maxlength) {
+      if (this.type === 'number' && isDef(maxlength) && value.length > maxlength) {
         value = value.slice(0, maxlength);
         target.value = value;
       }
@@ -179,7 +108,8 @@ export default create({
       this.onIconClick && this.onIconClick();
     },
 
-    onClear() {
+    onClear(event) {
+      event.preventDefault();
       this.$emit('input', '');
       this.$emit('clear');
     },
@@ -188,7 +118,8 @@ export default create({
       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;
+        const isValidKey =
+          (keyCode >= 48 && keyCode <= 57) || (keyCode === 46 && allowPoint) || keyCode === 45;
         if (!isValidKey) {
           event.preventDefault();
         }
@@ -226,6 +157,55 @@ export default create({
         input.style.height = height + 'px';
       }
     }
+  },
+
+  render(h) {
+    const { type, labelAlign, $slots: slots } = this;
+
+    const inputProps = {
+      ref: 'input',
+      class: bem('control', this.inputAlign),
+      domProps: {
+        value: this.value
+      },
+      attrs: {
+        ...this.$attrs,
+        readonly: this.readonly
+      },
+      on: this.listeners
+    };
+
+    const Input = type === 'textarea' ? <textarea {...inputProps} /> : <input {...inputProps} />;
+
+    return (
+      <Cell
+        icon={this.leftIcon}
+        title={this.label}
+        center={this.center}
+        border={this.border}
+        isLink={this.isLink}
+        required={this.required}
+        class={bem({
+          error: this.error,
+          disabled: this.$attrs.disabled,
+          [`label-${labelAlign}`]: labelAlign,
+          'min-height': type === 'textarea' && !this.autosize
+        })}
+      >
+        {h('template', { slot: 'icon' }, slots['left-icon'])}
+        {h('template', { slot: 'title' }, slots.label)}
+        <div class={bem('body')}>
+          {Input}
+          {this.showClear && <Icon name="clear" class={bem('clear')} onTouchstart={this.onClear} />}
+          {(slots.icon || this.icon) && (
+            <div class={bem('icon')} onClick={this.onClickIcon}>
+              {slots.icon || <Icon name={this.icon} />}
+            </div>
+          )}
+          {slots.button && <div class={bem('button')}>{slots.button}</div>}
+        </div>
+        {this.errorMessage && <div class={bem('error-message')}>{this.errorMessage}</div>}
+      </Cell>
+    );
   }
 });
-</script>
diff --git a/packages/field/test/__snapshots__/demo.spec.js.snap b/packages/field/test/__snapshots__/demo.spec.js.snap
index baccfc325..bc69be03a 100644
--- a/packages/field/test/__snapshots__/demo.spec.js.snap
+++ b/packages/field/test/__snapshots__/demo.spec.js.snap
@@ -6,12 +6,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-cell-group van-hairline--top-bottom">
       <div placeholder="请输入用户名" class="van-cell van-field">
         <div class="van-cell__value van-cell__value--alone">
-          <div class="van-field__body"><input type="text" placeholder="请输入用户名" value="" class="van-field__control">
-            <!---->
-            <!---->
-            <!---->
-          </div>
-          <!---->
+          <div class="van-field__body"><input placeholder="请输入用户名" value="" class="van-field__control"></div>
         </div>
       </div>
     </div>
@@ -21,25 +16,17 @@ exports[`renders demo correctly 1`] = `
       <div placeholder="请输入用户名" class="van-cell van-cell--required van-field">
         <div class="van-cell__title"><span>用户名</span></div>
         <div class="van-cell__value">
-          <div class="van-field__body"><input type="text" placeholder="请输入用户名" value="" class="van-field__control">
-            <!---->
+          <div class="van-field__body"><input placeholder="请输入用户名" value="" class="van-field__control">
             <div class="van-field__icon"><i class="van-icon van-icon-question-o" style="color:undefined;font-size:undefined;">
                 <!---->
                 <!----></i></div>
-            <!---->
           </div>
-          <!---->
         </div>
       </div>
       <div placeholder="请输入密码" class="van-cell van-cell--required van-field">
         <div class="van-cell__title"><span>密码</span></div>
         <div class="van-cell__value">
-          <div class="van-field__body"><input type="password" placeholder="请输入密码" value="" class="van-field__control">
-            <!---->
-            <!---->
-            <!---->
-          </div>
-          <!---->
+          <div class="van-field__body"><input placeholder="请输入密码" value="" class="van-field__control"></div>
         </div>
       </div>
     </div>
@@ -51,12 +38,7 @@ exports[`renders demo correctly 1`] = `
           <!----></i>
         <div class="van-cell__title"><span>用户名</span></div>
         <div class="van-cell__value">
-          <div class="van-field__body"><input type="text" disabled="disabled" value="输入框已禁用" class="van-field__control">
-            <!---->
-            <!---->
-            <!---->
-          </div>
-          <!---->
+          <div class="van-field__body"><input disabled="disabled" value="输入框已禁用" class="van-field__control"></div>
         </div>
       </div>
     </div>
@@ -66,22 +48,13 @@ exports[`renders demo correctly 1`] = `
       <div placeholder="请输入用户名" class="van-cell van-field van-field--error">
         <div class="van-cell__title"><span>用户名</span></div>
         <div class="van-cell__value">
-          <div class="van-field__body"><input type="text" placeholder="请输入用户名" value="" class="van-field__control">
-            <!---->
-            <!---->
-            <!---->
-          </div>
-          <!---->
+          <div class="van-field__body"><input placeholder="请输入用户名" value="" class="van-field__control"></div>
         </div>
       </div>
       <div placeholder="请输入手机号" class="van-cell van-field">
         <div class="van-cell__title"><span>手机号</span></div>
         <div class="van-cell__value">
-          <div class="van-field__body"><input type="text" placeholder="请输入手机号" value="1365577" class="van-field__control">
-            <!---->
-            <!---->
-            <!---->
-          </div>
+          <div class="van-field__body"><input placeholder="请输入手机号" value="1365577" class="van-field__control"></div>
           <div class="van-field__error-message">手机号格式错误</div>
         </div>
       </div>
@@ -92,12 +65,7 @@ exports[`renders demo correctly 1`] = `
       <div placeholder="请输入留言" rows="1" class="van-cell van-field">
         <div class="van-cell__title"><span>留言</span></div>
         <div class="van-cell__value">
-          <div class="van-field__body"><textarea placeholder="请输入留言" rows="1" class="van-field__control"></textarea>
-            <!---->
-            <!---->
-            <!---->
-          </div>
-          <!---->
+          <div class="van-field__body"><textarea placeholder="请输入留言" rows="1" class="van-field__control"></textarea></div>
         </div>
       </div>
     </div>
@@ -107,14 +75,11 @@ exports[`renders demo correctly 1`] = `
       <div placeholder="请输入短信验证码" class="van-cell van-cell--center van-field">
         <div class="van-cell__title"><span>短信验证码</span></div>
         <div class="van-cell__value">
-          <div class="van-field__body"><input type="text" placeholder="请输入短信验证码" value="" class="van-field__control">
-            <!---->
-            <!---->
+          <div class="van-field__body"><input placeholder="请输入短信验证码" value="" class="van-field__control">
             <div class="van-field__button"><button class="van-button van-button--primary van-button--small"><span class="van-button__text">
           发送验证码
         </span></button></div>
           </div>
-          <!---->
         </div>
       </div>
     </div>
diff --git a/packages/field/test/__snapshots__/index.spec.js.snap b/packages/field/test/__snapshots__/index.spec.js.snap
index 2c6a94d80..f2a5673bd 100644
--- a/packages/field/test/__snapshots__/index.spec.js.snap
+++ b/packages/field/test/__snapshots__/index.spec.js.snap
@@ -3,12 +3,7 @@
 exports[`clearable 1`] = `
 <div class="van-cell van-field">
   <div class="van-cell__value van-cell__value--alone">
-    <div class="van-field__body"><input type="text" class="van-field__control">
-      <!---->
-      <!---->
-      <!---->
-    </div>
-    <!---->
+    <div class="van-field__body"><input class="van-field__control"></div>
   </div>
 </div>
 `;
@@ -16,13 +11,9 @@ exports[`clearable 1`] = `
 exports[`clearable 2`] = `
 <div class="van-cell van-field">
   <div class="van-cell__value van-cell__value--alone">
-    <div class="van-field__body"><input type="text" class="van-field__control"> <i class="van-icon van-icon-clear van-field__clear">
+    <div class="van-field__body"><input class="van-field__control"><i class="van-icon van-icon-clear van-field__clear">
         <!---->
-        <!----></i>
-      <!---->
-      <!---->
-    </div>
-    <!---->
+        <!----></i></div>
   </div>
 </div>
 `;
@@ -30,12 +21,7 @@ exports[`clearable 2`] = `
 exports[`render textarea 1`] = `
 <div class="van-cell van-field">
   <div class="van-cell__value van-cell__value--alone">
-    <div class="van-field__body"><textarea class="van-field__control" style="height: auto;"></textarea>
-      <!---->
-      <!---->
-      <!---->
-    </div>
-    <!---->
+    <div class="van-field__body"><textarea class="van-field__control" style="height: auto;"></textarea></div>
   </div>
 </div>
 `;
diff --git a/packages/search/test/__snapshots__/demo.spec.js.snap b/packages/search/test/__snapshots__/demo.spec.js.snap
index 1b5fb34f1..2a1db4ef8 100644
--- a/packages/search/test/__snapshots__/demo.spec.js.snap
+++ b/packages/search/test/__snapshots__/demo.spec.js.snap
@@ -8,12 +8,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
           <!----></i>
         <div class="van-cell__value van-cell__value--alone">
-          <div class="van-field__body"><input type="search" placeholder="请输入搜索关键词" value="" class="van-field__control">
-            <!---->
-            <!---->
-            <!---->
-          </div>
-          <!---->
+          <div class="van-field__body"><input placeholder="请输入搜索关键词" value="" class="van-field__control"></div>
         </div>
       </div>
       <!---->
@@ -26,12 +21,7 @@ exports[`renders demo correctly 1`] = `
             <!---->
             <!----></i>
           <div class="van-cell__value van-cell__value--alone">
-            <div class="van-field__body"><input type="search" placeholder="请输入搜索关键词" value="" class="van-field__control">
-              <!---->
-              <!---->
-              <!---->
-            </div>
-            <!---->
+            <div class="van-field__body"><input placeholder="请输入搜索关键词" value="" class="van-field__control"></div>
           </div>
         </div>
         <div class="van-search__action">
@@ -46,12 +36,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
           <!----></i>
         <div class="van-cell__value van-cell__value--alone">
-          <div class="van-field__body"><input type="search" placeholder="请输入搜索关键词" value="" class="van-field__control">
-            <!---->
-            <!---->
-            <!---->
-          </div>
-          <!---->
+          <div class="van-field__body"><input placeholder="请输入搜索关键词" value="" class="van-field__control"></div>
         </div>
       </div>
       <div class="van-search__action">