diff --git a/packages/common/style/var.less b/packages/common/style/var.less index 24a4a7ee..76e96d4f 100644 --- a/packages/common/style/var.less +++ b/packages/common/style/var.less @@ -204,11 +204,17 @@ @field-input-error-text-color: @red; @field-input-disabled-text-color: @gray-6; @field-placeholder-text-color: @gray-6; +@field-icon-size: 16px; +@field-clear-icon-size: 16px; @field-clear-icon-color: @gray-5; @field-icon-container-color: @gray-6; @field-error-message-color: @red; @field-error-message-text-font-size: @font-size-sm; @field-text-area-min-height: 18px; +@field-word-limit-color: @gray-7; +@field-word-limit-font-size: @font-size-sm; +@field-word-limit-line-height: 16px; +@field-word-num-full-color: @red; // GoodsAction @goods-action-background-color: @white; diff --git a/packages/field/README.md b/packages/field/README.md index 466ca4cd..ba2148ca 100644 --- a/packages/field/README.md +++ b/packages/field/README.md @@ -182,44 +182,45 @@ 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* | - | - | -| error | 是否将输入内容标红 | *boolean* | `false` | - | -| error-message | 底部错误提示文案，为空时不展示 | *string* | `''` | - | -| error-message-align | 底部错误提示文案对齐方式，可选值为 `center` `right` | *string* | `''` | - | -| input-align | 输入框内容对齐方式，可选值为 `center` `right` | *string* | `left` | - | -| autosize | 自适应内容高度，只对 textarea 有效 | *boolean* | `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` | 2.8.2 | -| 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` | ### Events diff --git a/packages/field/index.less b/packages/field/index.less index 4fa4df46..e56565ac 100644 --- a/packages/field/index.less +++ b/packages/field/index.less @@ -2,6 +2,8 @@ @import '../common/style/theme.less'; .van-field { + .theme(--cell-icon-size, '@field-icon-size'); + &__body { display: flex; align-items: center; @@ -10,10 +12,6 @@ line-height: 1.2em; .theme(min-height, '@cell-line-height'); } - - &--textarea&--ios { - margin-top: -4.5px; - } } &__input { @@ -90,10 +88,12 @@ } &__clear-root { + .theme(font-size, '@field-clear-icon-size'); .theme(color, '@field-clear-icon-color'); } &__icon-container { + .theme(font-size, '@field-icon-size'); .theme(color, '@field-icon-container-color'); &:empty { @@ -122,4 +122,20 @@ text-align: right; } } + + &__word-limit { + text-align: right; + .theme(margin-top, '@padding-base'); + .theme(color, '@field-word-limit-color'); + .theme(font-size, '@field-word-limit-font-size'); + .theme(line-height, '@field-word-limit-line-height'); + } + + &__word-num { + display: inline; + + &--full { + .theme(color, '@field-word-num-full-color'); + } + } } diff --git a/packages/field/index.ts b/packages/field/index.ts index 3f6c3272..3911cd45 100644 --- a/packages/field/index.ts +++ b/packages/field/index.ts @@ -1,6 +1,5 @@ import { VantComponent } from '../common/component'; import { Weapp } from 'definitions/weapp'; -import { getSystemInfoSync } from '../common/utils'; VantComponent({ field: true, @@ -19,7 +18,7 @@ VantComponent({ leftIcon: String, rightIcon: String, disabled: Boolean, - autosize: Boolean, + autosize: [Boolean, Object], readonly: Boolean, required: Boolean, password: Boolean, @@ -34,6 +33,7 @@ VantComponent({ holdKeyboard: Boolean, errorMessage: String, arrowDirection: String, + showWordLimit: Boolean, placeholderStyle: String, errorMessageAlign: String, selectionEnd: { @@ -76,7 +76,6 @@ VantComponent({ data: { focused: false, - system: getSystemInfoSync().system.split(' ').shift().toLowerCase() }, methods: { diff --git a/packages/field/index.wxml b/packages/field/index.wxml index 2d9585f0..e3633db3 100644 --- a/packages/field/index.wxml +++ b/packages/field/index.wxml @@ -1,4 +1,5 @@ + - +