[new feature] Field: add click-left-icon event (#2605)

packages/field/demo/index.vue

@@ -16,9 +16,9 @@
           :label="$t('username')"
           :placeholder="$t('usernamePlaceholder')"
           clearable
-          icon="question-o"
+          right-icon="question-o"
           required
-          @click-icon="$toast('question')"
+          @click-right-icon="$toast('question')"
         />
 
         <van-field
@@ -151,7 +151,7 @@ export default {
 .demo-field {
   padding-bottom: 30px;
 
-  .van-field__icon .van-icon {
+  .van-field__right-icon .van-icon {
     color: @blue;
   }
 }

packages/field/en-US.md

@@ -28,9 +28,9 @@ Use `type` prop to custom diffrent type fields.
     required
     clearable
     label="Username"
-    icon="question-o"
+    right-icon="question-o"
     placeholder="Username"
-    @click-icon="$toast('question')"
+    @click-right-icon="$toast('question')"
   />
 
   <van-field
@@ -129,8 +129,8 @@ Field support all native properties of input tag，such as `maxlength`、`placeh
 | 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` |
 | 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` | - |
+| right-icon | Right side icon name | `String` | - |
 
 ### Event
 
@@ -138,8 +138,9 @@ Field support all native events of input tag，such as `focus`、`blur`、`keypr
 
 | Event | Description | Parameters |
 |------|------|------|
-| click-icon | Triggered when click the icon of Field | - |
 | clear | Triggered when click clear icon | - |
+| click-left-icon | Triggered when click the left icon of Field | - |
+| click-right-icon | Triggered when click the right icon of Field | - |
 
 ### Methods
 
@@ -156,5 +157,5 @@ Use ref to get field instance and call instance methods
 |------|------|
 | label | Custom label |
 | left-icon | Custom left icon |
-| icon | Custom right icon |
+| right-icon | Custom right icon |
 | button | Insert button |

packages/field/index.js

@@ -13,6 +13,7 @@ export default sfc({
   props: {
     error: Boolean,
     leftIcon: String,
+    rightIcon: String,
     readonly: Boolean,
     clearable: Boolean,
     labelAlign: String,
@@ -103,8 +104,14 @@ export default sfc({
       this.$emit('blur', event);
     },
 
-    onClickIcon() {
+    onClickLeftIcon() {
+      this.$emit('click-left-icon');
+    },
+
+    onClickRightIcon() {
+      // compatible old version
       this.$emit('click-icon');
+      this.$emit('click-right-icon');
       this.onIconClick && this.onIconClick();
     },
 
@@ -162,6 +169,20 @@ export default sfc({
   render(h) {
     const { type, labelAlign, $slots: slots } = this;
 
+    const showLeftIcon = slots['left-icon'] || this.leftIcon;
+    const showRightIcon = slots['right-icon'] || slots.icon || this.rightIcon || this.icon;
+
+    const LeftIcon = showLeftIcon && (
+      <div slot="icon" class={bem('left-icon')} onClick={this.onClickLeftIcon}>
+        {slots['left-icon'] || <Icon name={this.leftIcon} />}
+      </div>
+    );
+    const RightIcon = showRightIcon && (
+      <div class={bem('right-icon')} onClick={this.onClickRightIcon}>
+        {slots['right-icon'] || slots.icon || <Icon name={this.rightIcon || this.icon} />}
+      </div>
+    );
+
     const inputProps = {
       ref: 'input',
       class: bem('control', this.inputAlign),
@@ -192,16 +213,12 @@ export default sfc({
           'min-height': type === 'textarea' && !this.autosize
         })}
       >
-        {h('template', { slot: 'icon' }, slots['left-icon'])}
+        {LeftIcon}
         {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) && (
+          {RightIcon}
-            <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>}

packages/field/index.less

@@ -53,7 +53,7 @@
   }
 
   &__clear,
-  &__icon {
+  &__right-icon {
     padding: 0 10px;
     line-height: inherit;
     margin-right: -10px;
@@ -64,13 +64,22 @@
     font-size: 16px;
   }
 
-  &__icon .van-icon {
+  &__left-icon .van-icon,
+  &__right-icon .van-icon {
     display: block;
+    min-width: 1em;
     font-size: 16px;
-    color: @gray-dark;
     line-height: inherit;
   }
 
+  &__left-icon {
+    margin-right: 5px;
+  }
+
+  &__right-icon {
+    color: @gray-dark;
+  }
+
   &__button {
     padding-left: 10px;
   }

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

@@ -17,7 +17,7 @@ exports[`renders demo correctly 1`] = `
         <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__icon"><i class="van-icon van-icon-question-o" style="color:undefined;font-size:undefined;">
+            <div class="van-field__right-icon"><i class="van-icon van-icon-question-o" style="color:undefined;font-size:undefined;">
                 <!----></i></div>
           </div>
         </div>
@@ -32,8 +32,9 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom">
-      <div disabled="disabled" class="van-cell van-field"><i class="van-icon van-icon-contact van-cell__left-icon" style="color:undefined;font-size:undefined;">
+      <div disabled="disabled" class="van-cell van-field">
-          <!----></i>
+        <div class="van-field__left-icon"><i class="van-icon van-icon-contact" style="color:undefined;font-size:undefined;">
+            <!----></i></div>
         <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>

packages/field/test/index.spec.js

@@ -15,13 +15,17 @@ test('click icon event', () => {
   const wrapper = mount(Field, {
     propsData: {
       value: 'a',
-      icon: 'search',
+      leftIcon: 'contact',
+      rightIcon: 'search',
       onIconClick
     }
   });
 
-  wrapper.find('.van-field__icon').trigger('click');
+  wrapper.find('.van-field__left-icon').trigger('click');
+  wrapper.find('.van-field__right-icon').trigger('click');
   expect(wrapper.emitted('click-icon')).toBeTruthy();
+  expect(wrapper.emitted('click-left-icon')).toBeTruthy();
+  expect(wrapper.emitted('click-right-icon')).toBeTruthy();
   expect(onIconClick.mock.calls.length).toBe(1);
 });
 

packages/field/zh-CN.md

@@ -30,9 +30,9 @@ Vue.use(Field);
     required
     clearable
     label="用户名"
-    icon="question-o"
+    right-icon="question-o"
     placeholder="请输入用户名"
-    @click-icon="$toast('question')"
+    @click-right-icon="$toast('question')"
   />
 
   <van-field
@@ -131,8 +131,8 @@ Field 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pla
 | label-align | 文本对齐方式，可选值为 `center` `right` | `String` | `left` | 1.1.10 |
 | input-align | 输入框内容对齐方式，可选值为 `center` `right` | `String` | `left` | 1.1.10 |
 | autosize | 自适应内容高度，只对 textarea 有效，可传入对象,<br>如 { maxHeight: 100, minHeight: 50 }，单位为 px | `Boolean | Object` | `false` | 1.0.0 |
-| icon | 输入框尾部图标名称或图片链接，可选值见 Icon 组件 | `String` | - | - |
+| left-icon | 输入框左侧图标名称或图片链接，可选值见 Icon 组件 | `String` | - | 1.5.7 |
-| left-icon | 输入框左侧图标名称或图片链接，可选值见 Icon 组件 | `String` | - | 1.1.4 |
+| right-icon | 输入框尾部图标名称或图片链接，可选值见 Icon 组件 | `String` | - | 1.5.7 |
 
 ### Event
 
@@ -140,8 +140,9 @@ Field 默认支持 Input 标签所有的原生事件，如 `focus`、`blur`、`k
 
 | 事件 | 说明 | 回调参数 |
 |------|------|------|
-| click-icon | 点击尾部图标时触发 | - |
 | clear | 点击清除按钮后触发 | - |
+| click-left-icon | 点击头部图标时触发 | - |
+| click-right-icon | 点击尾部图标时触发 | - |
 
 ### 方法
 
@@ -158,5 +159,5 @@ Field 默认支持 Input 标签所有的原生事件，如 `focus`、`blur`、`k
 |------|------|
 | label | 自定义输入框标签 |
 | left-icon | 自定义输入框头部图标 |
-| icon | 自定义输入框尾部图标 |
+| right-icon | 自定义输入框尾部图标 |
 | button | 自定义输入框尾部按钮 |

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

@@ -4,8 +4,9 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-search" style="background:#f2f2f2;">
-      <div placeholder="请输入搜索关键词" class="van-cell van-cell--borderless van-field"><i class="van-icon van-icon-search van-cell__left-icon" style="color:undefined;font-size:undefined;">
+      <div placeholder="请输入搜索关键词" class="van-cell van-cell--borderless van-field">
-          <!----></i>
+        <div class="van-field__left-icon"><i class="van-icon van-icon-search" style="color:undefined;font-size:undefined;">
+            <!----></i></div>
         <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>
@@ -16,8 +17,9 @@ exports[`renders demo correctly 1`] = `
   <div>
     <form action="/">
       <div class="van-search van-search--show-action" style="background:#f2f2f2;">
-        <div placeholder="请输入搜索关键词" class="van-cell van-cell--borderless van-field"><i class="van-icon van-icon-search van-cell__left-icon" style="color:undefined;font-size:undefined;">
+        <div placeholder="请输入搜索关键词" class="van-cell van-cell--borderless van-field">
-            <!----></i>
+          <div class="van-field__left-icon"><i class="van-icon van-icon-search" style="color:undefined;font-size:undefined;">
+              <!----></i></div>
           <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>
@@ -30,8 +32,9 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-search van-search--show-action" style="background:#f2f2f2;">
-      <div placeholder="请输入搜索关键词" class="van-cell van-cell--borderless van-field"><i class="van-icon van-icon-search van-cell__left-icon" style="color:undefined;font-size:undefined;">
+      <div placeholder="请输入搜索关键词" class="van-cell van-cell--borderless van-field">
-          <!----></i>
+        <div class="van-field__left-icon"><i class="van-icon van-icon-search" style="color:undefined;font-size:undefined;">
+            <!----></i></div>
         <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>