[Improvement] Field: support v-model.number (#1221)

packages/field/en-US.md

@@ -114,7 +114,7 @@ Field support all native properties of input tag，such as `maxlength`、`placeh
 
 | Attribute | Description | Type | Default |
 |-----------|-----------|-----------|-------------|
-| value | Field value | `String` | - |
+| value | Field value | `String | Number` | - |
 | label | Field label | `String` | - |
 | type | Input type | `String` | `text` |
 | disabled | Disable field | `Boolean` | `false` |

packages/field/index.vue

@@ -8,7 +8,7 @@
     :class="b({
       error,
       disabled: $attrs.disabled,
-      'has-icon': hasIcon,
+      'has-icon': showIcon,
       'min-height': type === 'textarea' && !autosize
     })"
   >
@@ -35,8 +35,7 @@
       :class="b('error-message')"
     />
     <div
-      v-if="hasIcon"
+      v-if="showIcon"
-      v-show="$slots.icon || value"
       :class="b('icon')"
       @touchstart.prevent="onClickIcon"
     >
@@ -60,7 +59,7 @@ export default create({
   inheritAttrs: false,
 
   props: {
-    value: null,
+    value: [String, Number],
     icon: String,
     label: String,
     error: Boolean,
@@ -91,8 +90,8 @@ export default create({
   },
 
   computed: {
-    hasIcon() {
+    showIcon() {
-      return this.$slots.icon || this.icon;
+      return this.$slots.icon || (this.icon && this.value !== '' && this.isDef(this.value));
     },
 
     listeners() {
@@ -117,7 +116,7 @@ export default create({
     onKeypress(event) {
       if (this.type === 'number') {
         const { keyCode } = event;
-        const allowPoint = this.value.indexOf('.') === -1;
+        const allowPoint = String(this.value).indexOf('.') === -1;
         const isValidKey = (keyCode >= 48 && keyCode <= 57) || (keyCode === 46 && allowPoint) || keyCode === 45;
         if (!isValidKey) {
           event.preventDefault();

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

@@ -19,7 +19,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom">
-      <div placeholder="请输入用户名" class="van-cell van-cell--required van-hairline van-field van-field--has-icon">
+      <div placeholder="请输入用户名" class="van-cell van-cell--required van-hairline van-field">
         <!---->
         <div class="van-cell__title"><span>用户名</span>
           <!---->
@@ -27,11 +27,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-cell__value">
           <input type="text" placeholder="请输入用户名" value="" class="van-field__control">
           <!---->
-          <div class="van-field__icon" style="display:none;">
+          <!---->
-            <i class="van-icon van-icon-clear" style="color:undefined;">
-              <!---->
-            </i>
-          </div>
           <!---->
         </div>
         <!---->
@@ -119,7 +115,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom">
-      <div placeholder="请输入短信验证码" class="van-cell van-cell--center van-hairline van-field van-field--has-icon">
+      <div placeholder="请输入短信验证码" class="van-cell van-cell--center van-hairline van-field">
         <!---->
         <div class="van-cell__title"><span>短信验证码</span>
           <!---->
@@ -127,11 +123,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-cell__value">
           <input type="text" placeholder="请输入短信验证码" value="" class="van-field__control">
           <!---->
-          <div class="van-field__icon" style="display:none;">
+          <!---->
-            <i class="van-icon van-icon-clear" style="color:undefined;">
-              <!---->
-            </i>
-          </div>
         </div>
         <!---->
         <div class="van-field__button">

packages/field/test/field.spec.js

@@ -14,6 +14,7 @@ test('click icon event', () => {
   const onIconClick = jest.fn();
   const wrapper = mount(Field, {
     propsData: {
+      value: 'a',
       icon: 'search',
       onIconClick
     }

packages/field/zh-CN.md

@@ -117,7 +117,7 @@ Field 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pla
 | 参数 | 说明 | 类型 | 默认值 |
 |-----------|-----------|-----------|-------------|-------------|
 | label | 标签 | `String` | - |
-| value | 当前输入的值 | `String` | - |
+| value | 当前输入的值 | `String | Number` | - |
 | type | 可设置为任意原生类型, 如 `number` `tel` `textarea` | `String` | `text` |
 | disabled | 是否禁用输入框 | `Boolean` | `false` |
 | error | 是否将输入内容标红 | `Boolean` | `false` |

packages/search/test/__snapshots__/demo.spec.js.snap

@@ -7,17 +7,13 @@ exports[`renders demo correctly 1`] = `
       <i class="van-icon van-icon-search" style="color:undefined;">
         <!---->
       </i>
-      <div placeholder="请输入商品名称" class="van-cell van-field van-field--has-icon">
+      <div placeholder="请输入商品名称" class="van-cell van-field">
         <!---->
         <!---->
         <div class="van-cell__value van-cell__value--alone">
           <input type="search" placeholder="请输入商品名称" value="" class="van-field__control">
           <!---->
-          <div class="van-field__icon" style="display:none;">
+          <!---->
-            <i class="van-icon van-icon-clear" style="color:undefined;">
-              <!---->
-            </i>
-          </div>
           <!---->
         </div>
         <!---->
@@ -31,17 +27,13 @@ exports[`renders demo correctly 1`] = `
         <i class="van-icon van-icon-search" style="color:undefined;">
           <!---->
         </i>
-        <div placeholder="请输入商品名称" class="van-cell van-field van-field--has-icon">
+        <div placeholder="请输入商品名称" class="van-cell van-field">
           <!---->
           <!---->
           <div class="van-cell__value van-cell__value--alone">
             <input type="search" placeholder="请输入商品名称" value="" class="van-field__control">
             <!---->
-            <div class="van-field__icon" style="display:none;">
+            <!---->
-              <i class="van-icon van-icon-clear" style="color:undefined;">
-                <!---->
-              </i>
-            </div>
             <!---->
           </div>
           <!---->
@@ -57,17 +49,13 @@ exports[`renders demo correctly 1`] = `
       <i class="van-icon van-icon-search" style="color:undefined;">
         <!---->
       </i>
-      <div class="van-cell van-field van-field--has-icon">
+      <div class="van-cell van-field">
         <!---->
         <!---->
         <div class="van-cell__value van-cell__value--alone">
           <input type="search" value="" class="van-field__control">
           <!---->
-          <div class="van-field__icon" style="display:none;">
+          <!---->
-            <i class="van-icon van-icon-clear" style="color:undefined;">
-              <!---->
-            </i>
-          </div>
           <!---->
         </div>
         <!---->