diff --git a/src/field/index.js b/src/field/index.js
index e45666d08..32b58c80c 100644
--- a/src/field/index.js
+++ b/src/field/index.js
@@ -303,9 +303,13 @@ export default createComponent({
genWordLimit() {
if (this.showWordLimit && this.maxlength) {
+ const count = this.value.length;
+ const full = count >= this.maxlength;
+
return (
- {this.value.length}/{this.maxlength}
+ {count}/
+ {this.maxlength}
);
}
diff --git a/src/field/index.less b/src/field/index.less
index 4377a9b33..f7ba70439 100644
--- a/src/field/index.less
+++ b/src/field/index.less
@@ -131,6 +131,12 @@
text-align: right;
}
+ &__word-num {
+ &--full {
+ color: @field-word-num-full-color;
+ }
+ }
+
&--error {
.van-field__control {
&,
diff --git a/src/field/test/__snapshots__/index.spec.js.snap b/src/field/test/__snapshots__/index.spec.js.snap
index d7af6becf..0938a1696 100644
--- a/src/field/test/__snapshots__/index.spec.js.snap
+++ b/src/field/test/__snapshots__/index.spec.js.snap
@@ -53,6 +53,15 @@ exports[`label-width prop without unit 1`] = `
`;
+exports[`reach max word-limit 1`] = `
+
+`;
+
exports[`render input slot 1`] = `
diff --git a/src/field/test/index.spec.js b/src/field/test/index.spec.js
index 8100c5103..6554f4150 100644
--- a/src/field/test/index.spec.js
+++ b/src/field/test/index.spec.js
@@ -280,3 +280,14 @@ test('formatter prop', () => {
input.trigger('input');
expect(wrapper.emitted('input')[1][0]).toEqual('efg');
});
+
+test('reach max word-limit', () => {
+ const wrapper = mount(Field, {
+ propsData: {
+ value: 'foo',
+ maxlength: 3,
+ showWordLimit: true,
+ },
+ });
+ expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/style/var.less b/src/style/var.less
index 54f6f57ea..36b2e00b5 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -345,6 +345,7 @@
@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;
// GridItem
@grid-item-content-padding: @padding-md @padding-xs;