mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
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
GitHub
parent
f1ba20e5b4
commit
b8cbc8dd44
@ -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;
|
||||
|
||||
@ -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 有效，<br>可传入对象,如 { maxHeight: 100, minHeight: 50 }，<br>单位为`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
|
||||
|
||||
|
||||
@ -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');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
<wxs src="./index.wxs" module="computed" />
|
||||
|
||||
<van-cell
|
||||
size="{{ size }}"
|
||||
@ -16,7 +17,7 @@
|
||||
>
|
||||
<slot name="left-icon" slot="icon" />
|
||||
<slot name="label" slot="title" />
|
||||
<view class="{{ utils.bem('field__body', [type, system]) }}">
|
||||
<view class="{{ utils.bem('field__body', [type]) }}">
|
||||
<textarea
|
||||
wx:if="{{ type === 'textarea' }}"
|
||||
class="input-class {{ utils.bem('field__input', [inputAlign, type, { disabled, error }]) }}"
|
||||
@ -28,7 +29,8 @@
|
||||
placeholder="{{ placeholder }}"
|
||||
placeholder-style="{{ placeholderStyle }}"
|
||||
placeholder-class="{{ utils.bem('field__placeholder', { error }) }}"
|
||||
auto-height="{{ autosize }}"
|
||||
auto-height="{{ !!autosize }}"
|
||||
style="{{ computed.inputStyle(autosize) }}"
|
||||
cursor-spacing="{{ cursorSpacing }}"
|
||||
adjust-position="{{ adjustPosition }}"
|
||||
show-confirm-bar="{{ showConfirmBar }}"
|
||||
@ -67,7 +69,6 @@
|
||||
/>
|
||||
<van-icon
|
||||
wx:if="{{ clearable && focused && value && !readonly }}"
|
||||
size="16px"
|
||||
name="clear"
|
||||
class="van-field__clear-root van-field__icon-root"
|
||||
catch:touchstart="onClear"
|
||||
@ -75,7 +76,6 @@
|
||||
<view class="van-field__icon-container" bind:tap="onClickIcon">
|
||||
<van-icon
|
||||
wx:if="{{ rightIcon || icon }}"
|
||||
size="16px"
|
||||
name="{{ rightIcon || icon }}"
|
||||
class="van-field__icon-root {{ iconClass }}"
|
||||
custom-class="right-icon-class"
|
||||
@ -87,6 +87,9 @@
|
||||
<slot name="button" />
|
||||
</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 }]) }}">
|
||||
{{ errorMessage }}
|
||||
</view>
|
||||
|
||||
21
packages/field/index.wxs
Normal file
21
packages/field/index.wxs
Normal 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
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user