diff --git a/packages/field/README.md b/packages/field/README.md
index 9d237898..3a0333d3 100644
--- a/packages/field/README.md
+++ b/packages/field/README.md
@@ -185,8 +185,9 @@ Page({
### 真机上为什么会出现聚焦时 placeholder 加粗、闪烁的现象?
-- 由于微信小程序的 input 组件和 textarea 组件是原生组件,聚焦时会将原生的输入框覆盖在对应位置上,导致了这个现象的产生。
-- 相关的讨论可以查看[微信开放社区](https://developers.weixin.qq.com/community/search?query=placeholder%20%E9%97%AA%E7%83%81%20%E5%8A%A0%E7%B2%97)
+由于微信小程序的 input 组件和 textarea 组件是原生组件,聚焦时会将原生的输入框覆盖在对应位置上,导致了这个现象的产生。
+
+相关的讨论可以查看[微信开放社区](https://developers.weixin.qq.com/community/search?query=placeholder%20%E9%97%AA%E7%83%81%20%E5%8A%A0%E7%B2%97)
### 真机上 placeholder 为什么会盖过 popup 等其它组件?
@@ -198,9 +199,9 @@ Page({
同时 `placeholder-style` 对 `vertical-align`、`line-height` 等大量 css 属性都不生效。
-这一系列的问题导致了 placeholder 在真机上可能会出现偏移。@vant/weapp 已经尽量抹平 textarea 在不同环境下的差异。
+这一系列的问题导致了 placeholder 在真机上可能会出现偏移。
-微信已经将 `padding` 的问题列为修复中的问题,可以查看[微信开放社区](https://developers.weixin.qq.com/community/develop/issue/96)
+微信已经在 `2.10.0` 基础库版本后支持移除默认的 `padding`,但低版本仍有问题。详情可以查看 [微信开放社区](https://developers.weixin.qq.com/community/develop/issue/96)
### 手写输入法为什么会丢失部分字符 / 手写输入法为什么不会触发 input 事件?
@@ -259,24 +260,26 @@ Page({
| 事件 | 说明 | 回调参数 |
| --- | --- | --- |
-| bind:input | 输入内容时触发 | value: 当前输入值 |
-| bind:change | 输入内容时触发 | value: 当前输入值 |
-| bind:confirm | 点击完成按钮时触发 | value: 当前输入值 |
+| bind:input | 输入内容时触发 | event.detail: 当前输入值 |
+| bind:change | 输入内容时触发 | event.detail: 当前输入值 |
+| bind:confirm | 点击完成按钮时触发 | event.detail: 当前输入值 |
| 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:click-input | 点击输入区域时触发 | - |
| 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 | 自定义输入框,使用此插槽后,与输入框相关的属性和事件将失效 |
### 外部样式类
diff --git a/packages/field/index.less b/packages/field/index.less
index cd62c77f..082b579b 100644
--- a/packages/field/index.less
+++ b/packages/field/index.less
@@ -24,9 +24,13 @@
}
}
- &__input {
- position: relative;
+ &__control:empty + &__control {
display: block;
+ }
+
+ &__control {
+ position: relative;
+ display: none;
box-sizing: border-box;
width: 100%;
margin: 0;
@@ -36,10 +40,15 @@
background-color: transparent;
border: 0;
resize: none;
+
.theme(color, '@field-input-text-color');
.theme(height, '@cell-line-height');
.theme(min-height, '@cell-line-height');
+ &:empty {
+ display: none;
+ }
+
&--textarea {
.theme(height, '@field-text-area-min-height');
.theme(min-height, '@field-text-area-min-height');
@@ -62,6 +71,13 @@
&--right {
text-align: right;
}
+
+ &--custom {
+ display: flex;
+ align-items: center;
+
+ .theme(min-height, '@cell-line-height');
+ }
}
&__placeholder {
diff --git a/packages/field/index.ts b/packages/field/index.ts
index 883d0bda..a01c52d6 100644
--- a/packages/field/index.ts
+++ b/packages/field/index.ts
@@ -1,3 +1,4 @@
+import { nextTick } from '../common/utils';
import { VantComponent } from '../common/component';
import { commonProps, inputProps, textareaProps } from './props';
@@ -86,12 +87,16 @@ VantComponent({
this.$emit('click-icon');
},
+ onClickInput(event: WechatMiniprogram.TouchEvent) {
+ this.$emit('click-input', event.detail);
+ },
+
onClear() {
this.setData({ innerValue: '' });
this.value = '';
this.setShowClear();
- wx.nextTick(() => {
+ nextTick(() => {
this.emitChange();
this.$emit('clear', '');
});
@@ -132,7 +137,7 @@ VantComponent({
emitChange() {
this.setData({ value: this.value });
- wx.nextTick(() => {
+ nextTick(() => {
this.$emit('input', this.value);
this.$emit('change', this.value);
});
@@ -141,6 +146,7 @@ VantComponent({
setShowClear() {
const { clearable, readonly } = this.data;
const { focused, value } = this;
+
this.setData({
showClear: !!clearable && !!focused && !!value && !readonly,
});
diff --git a/packages/field/index.wxml b/packages/field/index.wxml
index 6254e676..9dc8b666 100644
--- a/packages/field/index.wxml
+++ b/packages/field/index.wxml
@@ -21,63 +21,12 @@
-
-
+
+
+
+
+
+
diff --git a/packages/field/props.ts b/packages/field/props.ts
index d4d63c44..9610842f 100644
--- a/packages/field/props.ts
+++ b/packages/field/props.ts
@@ -1,7 +1,7 @@
-export const commonProps = {
+export const commonProps: WechatMiniprogram.Component.PropertyOption = {
value: {
type: String,
- observer(this: WechatMiniprogram.Component.TrivialInstance, value: string) {
+ observer(this: WechatMiniprogram.Component.TrivialInstance, value) {
if (value !== this.value) {
this.setData({ innerValue: value });
this.value = value;
@@ -41,7 +41,7 @@ export const commonProps = {
holdKeyboard: Boolean,
};
-export const inputProps = {
+export const inputProps: WechatMiniprogram.Component.PropertyOption = {
type: {
type: String,
value: 'text',
@@ -51,7 +51,7 @@ export const inputProps = {
confirmHold: Boolean,
};
-export const textareaProps = {
+export const textareaProps: WechatMiniprogram.Component.PropertyOption = {
autoHeight: Boolean,
fixed: Boolean,
showConfirmBar: {
diff --git a/packages/field/textarea.wxml b/packages/field/textarea.wxml
new file mode 100644
index 00000000..5015a51d
--- /dev/null
+++ b/packages/field/textarea.wxml
@@ -0,0 +1,29 @@
+