feat(Field): add new prop showWordLimit & support max/min height & add new css variables (#2856)

fix #2469, fix #2594
This commit is contained in:
rex 2020-03-13 15:16:06 +08:00 committed by GitHub
parent f1ba20e5b4
commit b8cbc8dd44
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 95 additions and 49 deletions

View File

@ -204,11 +204,17 @@
@field-input-error-text-color: @red; @field-input-error-text-color: @red;
@field-input-disabled-text-color: @gray-6; @field-input-disabled-text-color: @gray-6;
@field-placeholder-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-clear-icon-color: @gray-5;
@field-icon-container-color: @gray-6; @field-icon-container-color: @gray-6;
@field-error-message-color: @red; @field-error-message-color: @red;
@field-error-message-text-font-size: @font-size-sm; @field-error-message-text-font-size: @font-size-sm;
@field-text-area-min-height: 18px; @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 // GoodsAction
@goods-action-background-color: @white; @goods-action-background-color: @white;

View File

@ -182,44 +182,45 @@ Page({
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|
| name | 在表单内提交时的标识符 | *string* | - | - | | name | 在表单内提交时的标识符 | *string* | - |
| label | 输入框左侧文本 | *string* | - | - | | label | 输入框左侧文本 | *string* | - |
| size | 单元格大小,可选值为 `large` | *string* | - | - | | size | 单元格大小,可选值为 `large` | *string* | - |
| value | 当前输入的值 | *string \| number* | - | - | | value | 当前输入的值 | *string \| number* | - |
| type | 可设置为任意原生类型, 如 `number` `idcard` `textarea` `digit` | *string* | `text` | - | | type | 可设置为任意原生类型, 如 `number` `idcard` `textarea` `digit` | *string* | `text` |
| fixed | 如果 type 为 `textarea` 且在一个 `position:fixed` 的区域,需要显示指定属性 fixed 为 true | *boolean* | `false` | - | | fixed | 如果 type 为 `textarea` 且在一个 `position:fixed` 的区域,需要显示指定属性 fixed 为 true | *boolean* | `false` |
| focus | 获取焦点 | *boolean* | `false` | - | | focus | 获取焦点 | *boolean* | `false` |
| border | 是否显示内边框 | *boolean* | `true` | - | | border | 是否显示内边框 | *boolean* | `true` |
| disabled | 是否禁用输入框 | *boolean* | `false` | - | | disabled | 是否禁用输入框 | *boolean* | `false` |
| readonly | 是否只读 | *boolean* | `false` | - | | readonly | 是否只读 | *boolean* | `false` |
| clearable | 是否启用清除控件 | *boolean* | `false` | - | | clearable | 是否启用清除控件 | *boolean* | `false` |
| clickable | 是否开启点击反馈 | *boolean* | `false` | - | | clickable | 是否开启点击反馈 | *boolean* | `false` |
| required | 是否显示表单必填星号 | *boolean* | `false` | - | | required | 是否显示表单必填星号 | *boolean* | `false` |
| password | 是否是密码类型 | *boolean* | `false` | - | | password | 是否是密码类型 | *boolean* | `false` |
| title-width | 标题宽度 | *string* | `90px` | - | | title-width | 标题宽度 | *string* | `90px` |
| maxlength | 最大输入长度,设置为 -1 的时候不限制最大长度 | *number* | `-1` | - | | maxlength | 最大输入长度,设置为 -1 的时候不限制最大长度 | *number* | `-1` |
| placeholder | 输入框为空时占位符 | *string* | - | - | | placeholder | 输入框为空时占位符 | *string* | - |
| placeholder-style | 指定 placeholder 的样式 | *string* | - | - | | placeholder-style | 指定 placeholder 的样式 | *string* | - |
| custom-style | 自定义样式 | *string* | - | - | | custom-style | 自定义样式 | *string* | - |
| is-link | 是否展示右侧箭头并开启点击反馈 | *boolean* | `false` | - | | is-link | 是否展示右侧箭头并开启点击反馈 | *boolean* | `false` |
| arrow-direction | 箭头方向,可选值为 `left` `up` `down` | *string* | - | - | | arrow-direction | 箭头方向,可选值为 `left` `up` `down` | *string* | - |
| error | 是否将输入内容标红 | *boolean* | `false` | - | | show-word-limit | 是否显示字数统计,需要设置`maxlength`属性 | *boolean* | `false` |
| error-message | 底部错误提示文案,为空时不展示 | *string* | `''` | - | | error | 是否将输入内容标红 | *boolean* | `false` |
| error-message-align | 底部错误提示文案对齐方式,可选值为 `center` `right` | *string* | `''` | - | | error-message | 底部错误提示文案,为空时不展示 | *string* | `''` |
| input-align | 输入框内容对齐方式,可选值为 `center` `right` | *string* | `left` | - | | error-message-align | 底部错误提示文案对齐方式,可选值为 `center` `right` | *string* | `''` |
| autosize | 自适应内容高度,只对 textarea 有效 | *boolean* | `false` | - | | input-align | 输入框内容对齐方式,可选值为 `center` `right` | *string* | `left` |
| left-icon | 左侧图标名称或图片链接,可选值见 [Icon 组件](#/icon) | *string* | - | - | | autosize | 是否自适应内容高度,只对 textarea 有效,<br>可传入对象,如 { maxHeight: 100, minHeight: 50 }<br>单位为`px` | *boolean \| object* | `false` |
| right-icon | 右侧图标名称或图片链接,可选值见 [Icon 组件](#/icon) | *string* | - | - | | left-icon | 左侧图标名称或图片链接,可选值见 [Icon 组件](#/icon) | *string* | - |
| confirm-type | 设置键盘右下角按钮的文字,仅在 type='text' 时生效 | *string* | `done` | - | | right-icon | 右侧图标名称或图片链接,可选值见 [Icon 组件](#/icon) | *string* | - |
| confirm-hold | 点击键盘右下角按钮时是否保持键盘不收起,在 type='textarea' 时无效 | *boolean* | `false` | - | | confirm-type | 设置键盘右下角按钮的文字,仅在 type='text' 时生效 | *string* | `done` |
| hold-keyboard | focus 时,点击页面的时候不收起键盘 | *boolean* | `false` | 2.8.2 | | confirm-hold | 点击键盘右下角按钮时是否保持键盘不收起,在 type='textarea' 时无效 | *boolean* | `false` |
| cursor-spacing | 输入框聚焦时底部与键盘的距离 | *number* | `50` | - | | hold-keyboard | focus 时,点击页面的时候不收起键盘 | *boolean* | `false` |
| adjust-position | 键盘弹起时,是否自动上推页面 | *boolean* | `true` | - | | cursor-spacing | 输入框聚焦时底部与键盘的距离 | *number* | `50` |
| show-confirm-bar | 是否显示键盘上方带有”完成“按钮那一栏,只对 textarea 有效 | *boolean* | `true` | - | | adjust-position | 键盘弹起时,是否自动上推页面 | *boolean* | `true` |
| selection-start | 光标起始位置,自动聚集时有效,需与 selection-end 搭配使用 | *number* | `-1` | - | | show-confirm-bar | 是否显示键盘上方带有”完成“按钮那一栏,只对 textarea 有效 | *boolean* | `true` |
| selection-end | 光标结束位置,自动聚集时有效,需与 selection-start 搭配使用 | *number* | `-1` | - | | selection-start | 光标起始位置,自动聚集时有效,需与 selection-end 搭配使用 | *number* | `-1` |
| selection-end | 光标结束位置,自动聚集时有效,需与 selection-start 搭配使用 | *number* | `-1` |
### Events ### Events

View File

@ -2,6 +2,8 @@
@import '../common/style/theme.less'; @import '../common/style/theme.less';
.van-field { .van-field {
.theme(--cell-icon-size, '@field-icon-size');
&__body { &__body {
display: flex; display: flex;
align-items: center; align-items: center;
@ -10,10 +12,6 @@
line-height: 1.2em; line-height: 1.2em;
.theme(min-height, '@cell-line-height'); .theme(min-height, '@cell-line-height');
} }
&--textarea&--ios {
margin-top: -4.5px;
}
} }
&__input { &__input {
@ -90,10 +88,12 @@
} }
&__clear-root { &__clear-root {
.theme(font-size, '@field-clear-icon-size');
.theme(color, '@field-clear-icon-color'); .theme(color, '@field-clear-icon-color');
} }
&__icon-container { &__icon-container {
.theme(font-size, '@field-icon-size');
.theme(color, '@field-icon-container-color'); .theme(color, '@field-icon-container-color');
&:empty { &:empty {
@ -122,4 +122,20 @@
text-align: right; 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');
}
}
} }

View File

@ -1,6 +1,5 @@
import { VantComponent } from '../common/component'; import { VantComponent } from '../common/component';
import { Weapp } from 'definitions/weapp'; import { Weapp } from 'definitions/weapp';
import { getSystemInfoSync } from '../common/utils';
VantComponent({ VantComponent({
field: true, field: true,
@ -19,7 +18,7 @@ VantComponent({
leftIcon: String, leftIcon: String,
rightIcon: String, rightIcon: String,
disabled: Boolean, disabled: Boolean,
autosize: Boolean, autosize: [Boolean, Object],
readonly: Boolean, readonly: Boolean,
required: Boolean, required: Boolean,
password: Boolean, password: Boolean,
@ -34,6 +33,7 @@ VantComponent({
holdKeyboard: Boolean, holdKeyboard: Boolean,
errorMessage: String, errorMessage: String,
arrowDirection: String, arrowDirection: String,
showWordLimit: Boolean,
placeholderStyle: String, placeholderStyle: String,
errorMessageAlign: String, errorMessageAlign: String,
selectionEnd: { selectionEnd: {
@ -76,7 +76,6 @@ VantComponent({
data: { data: {
focused: false, focused: false,
system: getSystemInfoSync().system.split(' ').shift().toLowerCase()
}, },
methods: { methods: {

View File

@ -1,4 +1,5 @@
<wxs src="../wxs/utils.wxs" module="utils" /> <wxs src="../wxs/utils.wxs" module="utils" />
<wxs src="./index.wxs" module="computed" />
<van-cell <van-cell
size="{{ size }}" size="{{ size }}"
@ -16,7 +17,7 @@
> >
<slot name="left-icon" slot="icon" /> <slot name="left-icon" slot="icon" />
<slot name="label" slot="title" /> <slot name="label" slot="title" />
<view class="{{ utils.bem('field__body', [type, system]) }}"> <view class="{{ utils.bem('field__body', [type]) }}">
<textarea <textarea
wx:if="{{ type === 'textarea' }}" wx:if="{{ type === 'textarea' }}"
class="input-class {{ utils.bem('field__input', [inputAlign, type, { disabled, error }]) }}" class="input-class {{ utils.bem('field__input', [inputAlign, type, { disabled, error }]) }}"
@ -28,7 +29,8 @@
placeholder="{{ placeholder }}" placeholder="{{ placeholder }}"
placeholder-style="{{ placeholderStyle }}" placeholder-style="{{ placeholderStyle }}"
placeholder-class="{{ utils.bem('field__placeholder', { error }) }}" placeholder-class="{{ utils.bem('field__placeholder', { error }) }}"
auto-height="{{ autosize }}" auto-height="{{ !!autosize }}"
style="{{ computed.inputStyle(autosize) }}"
cursor-spacing="{{ cursorSpacing }}" cursor-spacing="{{ cursorSpacing }}"
adjust-position="{{ adjustPosition }}" adjust-position="{{ adjustPosition }}"
show-confirm-bar="{{ showConfirmBar }}" show-confirm-bar="{{ showConfirmBar }}"
@ -67,7 +69,6 @@
/> />
<van-icon <van-icon
wx:if="{{ clearable && focused && value && !readonly }}" wx:if="{{ clearable && focused && value && !readonly }}"
size="16px"
name="clear" name="clear"
class="van-field__clear-root van-field__icon-root" class="van-field__clear-root van-field__icon-root"
catch:touchstart="onClear" catch:touchstart="onClear"
@ -75,7 +76,6 @@
<view class="van-field__icon-container" bind:tap="onClickIcon"> <view class="van-field__icon-container" bind:tap="onClickIcon">
<van-icon <van-icon
wx:if="{{ rightIcon || icon }}" wx:if="{{ rightIcon || icon }}"
size="16px"
name="{{ rightIcon || icon }}" name="{{ rightIcon || icon }}"
class="van-field__icon-root {{ iconClass }}" class="van-field__icon-root {{ iconClass }}"
custom-class="right-icon-class" custom-class="right-icon-class"
@ -87,6 +87,9 @@
<slot name="button" /> <slot name="button" />
</view> </view>
</view> </view>
<view wx:if="{{ showWordLimit && maxlength }}" class="van-field__word-limit">
<view class="{{ utils.bem('field__word-num', { full: value.length >= maxlength }) }}">{{ value.length }}</view>/{{ maxlength }}
</view>
<view wx:if="{{ errorMessage }}" class="van-field__error-message {{ utils.bem('field__error', [errorMessageAlign, { disabled, error }]) }}"> <view wx:if="{{ errorMessage }}" class="van-field__error-message {{ utils.bem('field__error', [errorMessageAlign, { disabled, error }]) }}">
{{ errorMessage }} {{ errorMessage }}
</view> </view>

21
packages/field/index.wxs Normal file
View File

@ -0,0 +1,21 @@
/* eslint-disable */
var utils = require('../wxs/utils.wxs');
function inputStyle(autosize) {
if (autosize.constructor === 'Object') {
var style = '';
if (autosize.minHeight) {
style += 'min-height:' + utils.addUnit(autosize.minHeight);
}
if (autosize.maxHeight) {
style += 'min-height:' + utils.addUnit(autosize.maxHeight);
}
return style;
}
return '';
}
module.exports = {
inputStyle: inputStyle
};