refactor(Field): add new slot right-icon & add new prop right-icon & …

…add new external class right-ic fix youzan#1483
rex-zsd · Apr 16, 2019 · d94c5b1 · d94c5b1
1 parent 68db373
commit d94c5b1
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 44 deletions.
diff --git a/example/pages/field/index.wxml b/example/pages/field/index.wxml
@@ -12,8 +12,8 @@
       placeholder="请输入用户名"
       clearable
       size="large"
-      icon="question-o"
-      icon-class="icon"
+      right-icon="question-o"
+      right-icon-class="custom-icon"
       required
       bind:click-icon="onClickIcon"
     />

diff --git a/example/pages/field/index.wxss b/example/pages/field/index.wxss
@@ -2,6 +2,6 @@
   vertical-align: middle;
 }
 
-.icon {
+.custom-icon {
   color: #1989fa;
 }
diff --git a/packages/field/README.md b/packages/field/README.md
@@ -167,14 +167,12 @@ Page({
 | error-message-align | 底部错误提示文案对齐方式，可选值为 `center` `right` | `String` | `''` |
 | input-align | 输入框内容对齐方式，可选值为 `center` `right` | `String` | `left` |
 | autosize | 自适应内容高度，只对 textarea 有效 | `Boolean` | `false` |
-| icon | 输入框尾部图标名称或图片链接，可选值见 Icon 组件 | `String` | - |
+| right-icon | 输入框尾部图标名称或图片链接，可选值见 Icon 组件 | `String` | - |
 | left-icon | 输入框左侧图标名称或图片链接，可选值见 Icon 组件 | `String` | - |
 | confirm-type | 设置键盘右下角按钮的文字，仅在 type='text' 时生效 | `String` | `done` |
 | confirm-hold | 点击键盘右下角按钮时是否保持键盘不收起，在 type='textarea' 时无效 | `Boolean` | `false` |
 | cursor-spacing | 输入框聚焦时底部与键盘的距离 | `Number` | `50` |
 | adjust-position | 键盘弹起时，是否自动上推页面 | `Boolean` | `true` |
-| use-icon-slot | 是否使用 icon slot  | `Boolean` | `false` |
-| use-button-slot | 是否使用 button slot  | `Boolean` | `false` |
 | show-confirm-bar | 是否显示键盘上方带有”完成“按钮那一栏，只对 textarea 有效 | `Boolean` | `true` |
 
 ### Event
@@ -194,13 +192,13 @@ Page({
 | 名称 | 说明 |
 |-----------|-----------|
 | label | 自定义输入框标签，如果设置了`label`属性则不生效 |
-| left-icon | 自定义输入框头部图标，如果设置了`left-icon`属性则不生效 |
-| icon | 自定义输入框尾部图标，需要设置`use-icon-slot`属性，如果设置了`icon`属性则不生效 |
-| button | 自定义输入框尾部按钮，需要设置`use-button-slot`属性 |
+| left-icon | 自定义输入框头部图标 |
+| right-icon | 自定义输入框尾部图标 |
+| button | 自定义输入框尾部按钮 |
 
 ### 外部样式类
 
 | 类名 | 说明 |
 |-----------|-----------|
 | input-class | 输入框样式类 |
-| icon-class | 右侧图标样式类 |
+| right-icon-class | 右侧图标样式类 |
diff --git a/packages/field/index.less b/packages/field/index.less
@@ -11,6 +11,7 @@
   }
 
   &__input {
+    position: relative;
     display: block;
     width: 100%;
     height: 24px;
@@ -38,50 +39,58 @@
     &--right {
       text-align: right;
     }
-
-    &--error {
-      color: @red;
-    }
   }
 
   &__placeholder {
+    position: absolute;
+    top: 0;
+    left: 0;
     color: @gray-dark;
+    pointer-events: none;
+
+    &--error {
+      color: @red;
+    }
   }
 
-  &__clear-root {
+  &__icon-root {
     display: flex;
-    height: 24px;
+    min-height: 24px;
     align-items: center;
   }
 
-  &__clear,
-  &__icon-container,
-  &__button {
-    flex-shrink: 0;
-  }
-
-  &__clear,
+  &__clear-root,
   &__icon-container {
     padding: 0 10px;
     margin-right: -10px;
     line-height: inherit;
     vertical-align: middle;
   }
 
-  &__clear {
+  &__clear-root,
+  &__icon-container,
+  &__button {
+    flex-shrink: 0;
+  }
+
+  &__clear-root {
     color: @gray;
   }
 
   &__icon-container {
     color: @gray-dark;
-  }
 
-  &__icon {
-    display: block !important;
+    &:empty {
+      display: none;
+    }
   }
 
   &__button {
     padding-left: 10px;
+
+    &:empty {
+      display: none;
+    }
   }
 
   &__error-message {

diff --git a/packages/field/index.ts b/packages/field/index.ts
@@ -3,7 +3,7 @@ import { VantComponent } from '../common/component';
 VantComponent({
   field: true,
 
-  classes: ['input-class'],
+  classes: ['input-class', 'right-icon-class'],
 
   props: {
     size: String,
@@ -15,6 +15,7 @@ VantComponent({
     center: Boolean,
     isLink: Boolean,
     leftIcon: String,
+    rightIcon: String,
     disabled: Boolean,
     autosize: Boolean,
     readonly: Boolean,
@@ -29,8 +30,6 @@ VantComponent({
     errorMessage: String,
     placeholder: String,
     customStyle: String,
-    useIconSlot: Boolean,
-    useButtonSlot: Boolean,
     showConfirmBar: {
       type: Boolean,
       value: true

diff --git a/packages/field/index.wxml b/packages/field/index.wxml
@@ -24,17 +24,18 @@
       disabled="{{ disabled || readonly }}"
       maxlength="{{ maxlength }}"
       auto-height="{{ autosize }}"
-      placeholder="{{ placeholder }}"
-      placeholder-style="{{ placeholderStyle }}"
-      placeholder-class="{{ error ? 'van-field__input--error' : 'van-field__placeholder' }}"
       cursor-spacing="{{ cursorSpacing }}"
       adjust-position="{{ adjustPosition }}"
       show-confirm-bar="{{ showConfirmBar }}"
       bindinput="onInput"
       bind:blur="onBlur"
       bind:focus="onFocus"
       bind:confirm="onConfirm"
-    />
+    >
+      <view wx:if="{{ value == null || value.length === 0 }}" style="{{ placeholderStyle }}" class="{{ utils.bem('field__placeholder', { error }) }}">
+        {{ placeholder }}
+      </view>
+    </textarea>
     <input
       wx:else
       class="input-class {{ utils.bem('field__input', [inputAlign, { disabled, error }]) }}"
@@ -45,7 +46,7 @@
       maxlength="{{ maxlength }}"
       placeholder="{{ placeholder }}"
       placeholder-style="{{ placeholderStyle }}"
-      placeholder-class="{{ error ? 'van-field__input--error' : 'van-field__placeholder' }}"
+      placeholder-class="{{ error ? 'van-field__placeholder--error' : 'van-field__placeholder' }}"
       confirm-type="{{ confirmType }}"
       confirm-hold="{{ confirmHold }}"
       cursor-spacing="{{ cursorSpacing }}"
@@ -59,20 +60,21 @@
       wx:if="{{ showClear }}"
       size="16px"
       name="clear"
-      class="van-field__clear-root"
-      custom-class="van-field__clear"
-      bind:touchstart="onClear"
+      class="van-field__clear-root van-field__icon-root"
+      bindtouchstart="onClear"
     />
-    <view class="van-field__icon-container" wx:if="{{ icon || useIconSlot }}" bind:tap="onClickIcon">
+    <view class="van-field__icon-container" bind:tap="onClickIcon">
       <van-icon
-        wx:if="{{ icon }}"
+        wx:if="{{ rightIcon || icon }}"
         size="16px"
-        name="{{ icon }}"
-        custom-class="van-field__icon {{ iconClass }}"
+        name="{{ rightIcon || icon }}"
+        class="van-field__icon-root {{ iconClass }}"
+        custom-class="right-icon-class"
       />
-      <slot wx:else name="icon" />
+      <slot name="right-icon" />
+      <slot name="icon" />
     </view>
-    <view wx:if="{{ useButtonSlot }}" class="van-field__button">
+    <view class="van-field__button">
       <slot name="button" />
     </view>
   </view>