diff --git a/example/pages/field/index.wxml b/example/pages/field/index.wxml index 3939bb27..98fd3e17 100644 --- 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 index dd3e4b5a..8cc66e1f 100644 --- 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 index 18556cb9..9c9f17b3 100644 --- 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 index 4a1b4770..d2879a9d 100644 --- a/packages/field/index.less +++ b/packages/field/index.less @@ -11,6 +11,7 @@ } &__input { + position: relative; display: block; width: 100%; height: 24px; @@ -38,29 +39,27 @@ &--right { text-align: right; } + } + + &__placeholder { + position: absolute; + top: 0; + left: 0; + color: @gray-dark; + pointer-events: none; &--error { color: @red; } } - &__placeholder { - color: @gray-dark; - } - - &__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; @@ -68,20 +67,30 @@ 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 index 8ec2c6cf..02f13708 100644 --- 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 index afaca58d..06e45941 100644 --- a/packages/field/index.wxml +++ b/packages/field/index.wxml @@ -24,9 +24,6 @@ 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 }}" @@ -34,7 +31,11 @@ bind:blur="onBlur" bind:focus="onFocus" bind:confirm="onConfirm" - /> + > + + {{ placeholder }} + + - + - + + - +