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 }}
+
+
-
+
-
+
+
-
+