diff --git a/packages/field/README.md b/packages/field/README.md
index 8ad33574..37a707f4 100644
--- a/packages/field/README.md
+++ b/packages/field/README.md
@@ -43,6 +43,7 @@ Page({
```
### 自定义类型
+
根据`type`属性定义不同类型的输入框
```html
@@ -83,6 +84,7 @@ Page({
```
### 错误提示
+
通过`error`或者`error-message`属性增加对应的错误提示
```html
@@ -102,21 +104,24 @@ Page({
/>
```
+
### 内容对齐方式
+
可以通过`input-align`属性设置内容的对齐方式
```html
-
-
-
+
+
+
```
### 高度自适应
+
对于 textarea，可以通过`autosize`属性设置高度自适应
```html
@@ -133,6 +138,7 @@ Page({
```
### 插入按钮
+
通过 button slot 可以在输入框尾部插入按钮
```html
@@ -146,7 +152,9 @@ Page({
border="{{ false }}"
use-button-slot
>
- 发送验证码
+ 发送验证码
```
@@ -166,7 +174,7 @@ Page({
微信小程序的 textarea 组件在 Android 和 iOS 中默认样式不同，在 iOS 中会有默认的 `padding`，且无法置 0。
-同时 `placeholder-style` 对 `vertical-align`、`line-height` 等大量css属性都不生效。
+同时 `placeholder-style` 对 `vertical-align`、`line-height` 等大量 css 属性都不生效。
这一系列的问题导致了 placeholder 在真机上可能会出现偏移。@vant/weapp 已经尽量抹平 textarea 在不同环境下的差异。
@@ -182,70 +190,75 @@ Page({
### Props
-| 参数 | 说明 | 类型 | 默认值 |
-|-----------|-----------|-----------|-------------|
-| name | 在表单内提交时的标识符 | *string* | - |
-| label | 输入框左侧文本 | *string* | - |
-| size | 单元格大小，可选值为 `large` | *string* | - |
-| value | 当前输入的值 | *string \| number* | - |
-| type | 可设置为任意原生类型, 如 `number` `idcard` `textarea` `digit` | *string* | `text` |
-| fixed | 如果 type 为 `textarea` 且在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true | *boolean* | `false` |
-| focus | 获取焦点 | *boolean* | `false` |
-| border | 是否显示内边框 | *boolean* | `true` |
-| disabled | 是否禁用输入框 | *boolean* | `false` |
-| readonly | 是否只读 | *boolean* | `false` |
-| clearable | 是否启用清除控件 | *boolean* | `false` |
-| clickable | 是否开启点击反馈 | *boolean* | `false` |
-| required | 是否显示表单必填星号 | *boolean* | `false` |
-| password | 是否是密码类型 | *boolean* | `false` |
-| title-width | 标题宽度 | *string* | `90px` |
-| maxlength | 最大输入长度，设置为 -1 的时候不限制最大长度 | *number* | `-1` |
-| placeholder | 输入框为空时占位符 | *string* | - |
-| placeholder-style | 指定 placeholder 的样式 | *string* | - |
-| custom-style | 自定义样式 | *string* | - |
-| is-link | 是否展示右侧箭头并开启点击反馈 | *boolean* | `false` |
-| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | *string* | - |
-| show-word-limit | 是否显示字数统计，需要设置`maxlength`属性 | *boolean* | `false` |
-| error | 是否将输入内容标红 | *boolean* | `false` |
-| error-message | 底部错误提示文案，为空时不展示 | *string* | `''` |
-| error-message-align | 底部错误提示文案对齐方式，可选值为 `center` `right` | *string* | `''` |
-| input-align | 输入框内容对齐方式，可选值为 `center` `right` | *string* | `left` |
-| autosize | 是否自适应内容高度，只对 textarea 有效，
可传入对象,如 { maxHeight: 100, minHeight: 50 }，
单位为`px` | *boolean \| object* | `false` |
-| left-icon | 左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | *string* | - |
-| right-icon | 右侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | *string* | - |
-| confirm-type | 设置键盘右下角按钮的文字，仅在 type='text' 时生效 | *string* | `done` |
-| confirm-hold | 点击键盘右下角按钮时是否保持键盘不收起，在 type='textarea' 时无效 | *boolean* | `false` |
-| hold-keyboard | focus 时，点击页面的时候不收起键盘 | *boolean* | `false` |
-| cursor-spacing | 输入框聚焦时底部与键盘的距离 | *number* | `50` |
-| adjust-position | 键盘弹起时，是否自动上推页面 | *boolean* | `true` |
-| show-confirm-bar | 是否显示键盘上方带有”完成“按钮那一栏，只对 textarea 有效 | *boolean* | `true` |
-| selection-start | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | *number* | `-1` |
-| selection-end | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | *number* | `-1` |
+| 参数 | 说明 | 类型 | 默认值 |
+| ----------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------- | ------- |
+| name | 在表单内提交时的标识符 | _string_ | - |
+| label | 输入框左侧文本 | _string_ | - |
+| size | 单元格大小，可选值为 `large` | _string_ | - |
+| value | 当前输入的值 | _string \| number_ | - |
+| type | 可设置为任意原生类型, 如 `number` `idcard` `textarea` `digit` | _string_ | `text` |
+| fixed | 如果 type 为 `textarea` 且在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true | _boolean_ | `false` |
+| focus | 获取焦点 | _boolean_ | `false` |
+| border | 是否显示内边框 | _boolean_ | `true` |
+| disabled | 是否禁用输入框 | _boolean_ | `false` |
+| readonly | 是否只读 | _boolean_ | `false` |
+| clearable | 是否启用清除控件 | _boolean_ | `false` |
+| clickable | 是否开启点击反馈 | _boolean_ | `false` |
+| required | 是否显示表单必填星号 | _boolean_ | `false` |
+| password | 是否是密码类型 | _boolean_ | `false` |
+| title-width | 标题宽度 | _string_ | `90px` |
+| maxlength | 最大输入长度，设置为 -1 的时候不限制最大长度 | _number_ | `-1` |
+| placeholder | 输入框为空时占位符 | _string_ | - |
+| placeholder-style | 指定 placeholder 的样式 | _string_ | - |
+| custom-style | 自定义样式 | _string_ | - |
+| is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` |
+| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | _string_ | - |
+| show-word-limit | 是否显示字数统计，需要设置`maxlength`属性 | _boolean_ | `false` |
+| error | 是否将输入内容标红 | _boolean_ | `false` |
+| error-message | 底部错误提示文案，为空时不展示 | _string_ | `''` |
+| error-message-align | 底部错误提示文案对齐方式，可选值为 `center` `right` | _string_ | `''` |
+| input-align | 输入框内容对齐方式，可选值为 `center` `right` | _string_ | `left` |
+| autosize | 是否自适应内容高度，只对 textarea 有效，
可传入对象,如 { maxHeight: 100, minHeight: 50 }，
单位为`px` | _boolean \| object_ | `false` |
+| left-icon | 左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - |
+| right-icon | 右侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - |
+| confirm-type | 设置键盘右下角按钮的文字，仅在 type='text' 时生效 | _string_ | `done` |
+| confirm-hold | 点击键盘右下角按钮时是否保持键盘不收起，在 type='textarea' 时无效 | _boolean_ | `false` |
+| hold-keyboard | focus 时，点击页面的时候不收起键盘 | _boolean_ | `false` |
+| cursor-spacing | 输入框聚焦时底部与键盘的距离 | _number_ | `50` |
+| adjust-position | 键盘弹起时，是否自动上推页面 | _boolean_ | `true` |
+| show-confirm-bar | 是否显示键盘上方带有”完成“按钮那一栏，只对 textarea 有效 | _boolean_ | `true` |
+| selection-start | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | _number_ | `-1` |
+| selection-end | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | _number_ | `-1` |
+| auto-focus | 自动聚焦，拉起键盘 | _boolean_ | `false` |
+| disable-default-padding | 是否去掉 iOS 下的默认内边距，只对 textarea 有效 | _boolean_ | `true` |
+| cursor | 指定 focus 时的光标位置 | _number_ | `-1` |
### Events
-| 事件 | 说明 | 回调参数 |
-|-----------|-----------|-----------|
-| bind:input | 输入内容时触发 | value: 当前输入值 |
-| bind:change | 输入内容时触发 | value: 当前输入值 |
-| bind:confirm | 点击完成按钮时触发 | value: 当前输入值 |
-| bind:click-icon | 点击尾部图标时触发 | - |
-| bind:focus | 输入框聚焦时触发 | event.detail.value: 当前输入值;
event.detail.height: 键盘高度 |
-| bind:blur | 输入框失焦时触发 | event.detail.value: 当前输入值;
event.detail.cursor: 游标位置(如果 `type` 不为 `textarea`，值为 `0`) |
-| bind:clear | 点击清空控件时触发 | - |
+| 事件 | 说明 | 回调参数 |
+| ------------------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| bind:input | 输入内容时触发 | value: 当前输入值 |
+| bind:change | 输入内容时触发 | value: 当前输入值 |
+| bind:confirm | 点击完成按钮时触发 | value: 当前输入值 |
+| bind:click-icon | 点击尾部图标时触发 | - |
+| bind:focus | 输入框聚焦时触发 | event.detail.value: 当前输入值;
event.detail.height: 键盘高度 |
+| bind:blur | 输入框失焦时触发 | event.detail.value: 当前输入值;
event.detail.cursor: 游标位置(如果 `type` 不为 `textarea`，值为 `0`) |
+| bind:clear | 点击清空控件时触发 | - |
+| bind:linechange | 输入框行数变化时调用，只对 textarea 有效 | event.detail = { height: 0, heightRpx: 0, lineCount: 0 } |
+| bind:keyboardheightchange | 键盘高度发生变化的时候触发此事件 | event.detail = { height: height, duration: duration } |
### Slot
-| 名称 | 说明 |
-|-----------|-----------|
-| label | 自定义输入框标签，如果设置了`label`属性则不生效 |
-| left-icon | 自定义输入框头部图标 |
-| right-icon | 自定义输入框尾部图标 |
-| button | 自定义输入框尾部按钮 |
+| 名称 | 说明 |
+| ---------- | ----------------------------------------------- |
+| label | 自定义输入框标签，如果设置了`label`属性则不生效 |
+| left-icon | 自定义输入框头部图标 |
+| right-icon | 自定义输入框尾部图标 |
+| button | 自定义输入框尾部按钮 |
### 外部样式类
-| 类名 | 说明 |
-|-----------|-----------|
-| input-class | 输入框样式类 |
+| 类名 | 说明 |
+| ---------------- | -------------- |
+| input-class | 输入框样式类 |
| right-icon-class | 右侧图标样式类 |
diff --git a/packages/field/index.ts b/packages/field/index.ts
index 3911cd45..8a06356b 100644
--- a/packages/field/index.ts
+++ b/packages/field/index.ts
@@ -1,5 +1,6 @@
import { VantComponent } from '../common/component';
import { Weapp } from 'definitions/weapp';
+import { commonProps, inputProps, textareaProps } from './props';
VantComponent({
field: true,
@@ -7,63 +8,35 @@ VantComponent({
classes: ['input-class', 'right-icon-class'],
props: {
+ ...commonProps,
+ ...inputProps,
+ ...textareaProps,
size: String,
icon: String,
label: String,
error: Boolean,
- fixed: Boolean,
- focus: Boolean,
center: Boolean,
isLink: Boolean,
leftIcon: String,
rightIcon: String,
- disabled: Boolean,
autosize: [Boolean, Object],
- readonly: Boolean,
+ readonly: {
+ type: Boolean,
+ observer: 'setShowClear'
+ },
required: Boolean,
- password: Boolean,
iconClass: String,
- clearable: Boolean,
+ clearable: {
+ type: Boolean,
+ observer: 'setShowClear'
+ },
clickable: Boolean,
inputAlign: String,
- placeholder: String,
customStyle: String,
- confirmType: String,
- confirmHold: Boolean,
- holdKeyboard: Boolean,
errorMessage: String,
arrowDirection: String,
showWordLimit: Boolean,
- placeholderStyle: String,
errorMessageAlign: String,
- selectionEnd: {
- type: Number,
- value: -1
- },
- selectionStart: {
- type: Number,
- value: -1
- },
- showConfirmBar: {
- type: Boolean,
- value: true
- },
- adjustPosition: {
- type: Boolean,
- value: true
- },
- cursorSpacing: {
- type: Number,
- value: 50
- },
- maxlength: {
- type: Number,
- value: -1
- },
- type: {
- type: String,
- value: 'text'
- },
border: {
type: Boolean,
value: true
@@ -76,26 +49,33 @@ VantComponent({
data: {
focused: false,
+ innerValue: '',
+ showClear: false
+ },
+
+ created() {
+ this.value = this.data.value;
+ this.setData({ innerValue: this.value });
},
methods: {
onInput(event: Weapp.Event) {
const { value = '' } = event.detail || {};
- this.setData({ value });
-
- wx.nextTick(() => {
- this.emitChange(value);
- });
+ this.value = value;
+ this.setShowClear();
+ this.emitChange();
},
onFocus(event: Weapp.Event) {
- this.setData({ focused: true });
+ this.focused = true;
+ this.setShowClear();
this.$emit('focus', event.detail);
},
onBlur(event: Weapp.Event) {
- this.setData({ focused: false });
+ this.focused = false;
+ this.setShowClear();
this.$emit('blur', event.detail);
},
@@ -104,21 +84,53 @@ VantComponent({
},
onClear() {
- this.setData({ value: '' });
+ this.setData({ innerValue: '' });
+ this.value = '';
+ this.setShowClear();
wx.nextTick(() => {
- this.emitChange('');
+ this.emitChange();
this.$emit('clear', '');
});
},
- onConfirm() {
- this.$emit('confirm', this.data.value);
+ onConfirm(event) {
+ const { value = '' } = event.detail || {};
+ this.value = value;
+ this.setShowClear();
+ this.$emit('confirm', value);
},
- emitChange(value) {
- this.$emit('input', value);
- this.$emit('change', value);
+ setValue(value) {
+ this.value = value;
+ this.setShowClear();
+
+ if (value === '') {
+ this.setData({ innerValue: '' });
+ }
+
+ this.emitChange();
+ },
+
+ onLineChange(event) {
+ this.$emit('linechange', event.detail);
+ },
+
+ onKeyboardHeightChange(event) {
+ this.$emit('keyboardheightchange', event.detail);
+ },
+
+ emitChange() {
+ this.$emit('input', this.value);
+ this.$emit('change', this.value);
+ },
+
+ setShowClear() {
+ const { clearable, readonly } = this.data;
+ const { focused, value } = this;
+ this.setData({
+ showClear: clearable && focused && !!value && !readonly
+ });
},
noop() {}
diff --git a/packages/field/index.wxml b/packages/field/index.wxml
index e3633db3..aea2e59d 100644
--- a/packages/field/index.wxml
+++ b/packages/field/index.wxml
@@ -23,7 +23,9 @@
class="input-class {{ utils.bem('field__input', [inputAlign, type, { disabled, error }]) }}"
fixed="{{ fixed }}"
focus="{{ focus }}"
- value="{{ value }}"
+ cursor="{{ cursor }}"
+ value="{{ innerValue }}"
+ auto-focus="{{ autoFocus }}"
disabled="{{ disabled || readonly }}"
maxlength="{{ maxlength }}"
placeholder="{{ placeholder }}"
@@ -37,10 +39,13 @@
hold-keyboard="{{ holdKeyboard }}"
selection-end="{{ selectionEnd }}"
selection-start="{{ selectionStart }}"
+ disable-default-padding="{{ disableDefaultPadding }}"
bindinput="onInput"
- bind:blur="onBlur"
- bind:focus="onFocus"
- bind:confirm="onConfirm"
+ bindblur="onBlur"
+ bindfocus="onFocus"
+ bindconfirm="onConfirm"
+ bindlinechange="onLineChange"
+ bindkeyboardheightchange="onKeyboardHeightChange"
>