diff --git a/src/field/README.md b/src/field/README.md index 5233217f4..f0c320446 100644 --- a/src/field/README.md +++ b/src/field/README.md @@ -21,7 +21,7 @@ The value of field is bound with v-model. ``` -### Custom type +### Custom Type Use `type` prop to custom different type fields. @@ -60,7 +60,7 @@ Use `type` prop to custom different type fields. ``` -### Error info +### Error Info Use `error` or `error-message` to show error info @@ -81,7 +81,25 @@ Use `error` or `error-message` to show error info ``` -### Auto resize +### Insert Button + +Use button slot to insert button + +```html + + + Send SMS + + +``` + +### Auto Resize Textarea Field can be auto resize when has `autosize` prop @@ -98,21 +116,20 @@ Textarea Field can be auto resize when has `autosize` prop ``` -### Insert button - -Use button slot to insert button +### Show Word Limit ```html - Send SMS - + v-model="message" + rows="2" + autosize + label="留言" + type="textarea" + maxlength="50" + placeholder="请输入留言" + show-word-limit + /> ``` @@ -135,6 +152,7 @@ Use button slot to insert button | clearable | Whether to be clearable | *boolean* | `false` | - | | clickable | Whether to show click feedback when clicked | *boolean* | `false` | - | | is-link | Whether to show link icon | *boolean* | `false` | - | +| show-word-limit | Whether to show word limit, need to set the `maxlength` prop | *boolean* | `false` | 2.2.8 | | error | Whether to show error info | *boolean* | `false` | - | | arrow-direction | Can be set to `left` `up` `down` | *string* | - | 2.0.4 | | error-message | Error message | *string* | `''` | - | diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md index 599845fad..7ed82c11b 100644 --- a/src/field/README.zh-CN.md +++ b/src/field/README.zh-CN.md @@ -85,23 +85,6 @@ Vue.use(Field); ``` -### 高度自适应 - -对于 textarea，可以通过`autosize`属性设置高度自适应 - -```html - - - -``` - ### 插入按钮 通过 button 插槽可以在输入框尾部插入按钮 @@ -120,6 +103,42 @@ Vue.use(Field); ``` +### 高度自适应 + +对于 textarea，可以通过`autosize`属性设置高度自适应 + +```html + + + +``` + +### 显示字数统计 + +设置`maxlength`和`show-word-limit`属性后会在底部显示字数统计 + +```html + + + +``` + ## API ### Props @@ -139,6 +158,7 @@ Vue.use(Field); | clearable | 是否启用清除控件 | *boolean* | `false` | - | | clickable | 是否开启点击反馈 | *boolean* | `false` | - | | is-link | 是否展示右侧箭头并开启点击反馈 | *boolean* | `false` | - | +| show-word-limit | 是否显示字数统计，需要设置`maxlength`属性 | *boolean* | `false` | 2.2.8 | | error | 是否将输入内容标红 | *boolean* | `false` | - | | arrow-direction | 箭头方向，可选值为 `left` `up` `down` | *string* | - | 2.0.4 | | error-message | 底部错误提示文案，为空时不展示 | *string* | `''` | - diff --git a/src/field/demo/index.vue b/src/field/demo/index.vue index e3ed087c3..0caa661e8 100644 --- a/src/field/demo/index.vue +++ b/src/field/demo/index.vue @@ -59,19 +59,6 @@ - - - - - - + + + + + + + + + + + + @@ -102,12 +117,13 @@ export default { title2: '自定义类型', title3: '禁用输入框', title4: '错误提示', - title5: '高度自适应', title6: '插入按钮', message: '留言', phone: '手机号', sms: '短信验证码', sendSMS: '发送验证码', + showWordLimit: '显示字数统计', + textareaAutosize: '高度自适应', smsPlaceholder: '请输入短信验证码', phonePlaceholder: '请输入手机号', messagePlaceholder: '请输入留言', @@ -115,15 +131,16 @@ export default { phoneError: '手机号格式错误' }, 'en-US': { - title2: 'Custom type', + title2: 'Custom Type', title3: 'Disabled', - title4: 'Error info', - title5: 'Auto resize', - title6: 'Insert button', + title4: 'Error Info', + title6: 'Insert Button', message: 'Message', phone: 'Phone', sms: 'SMS', sendSMS: 'Send SMS', + showWordLimit: 'Show Word Limit', + textareaAutosize: 'Auto Resize', smsPlaceholder: 'SMS', phonePlaceholder: 'Phone', messagePlaceholder: 'Message', @@ -140,6 +157,7 @@ export default { username: '', username2: '', message: '', + message2: '', phone: '1365577' }; } diff --git a/src/field/index.js b/src/field/index.js index 0d87e0203..dcfc3ef90 100644 --- a/src/field/index.js +++ b/src/field/index.js @@ -24,6 +24,7 @@ export default createComponent({ inputAlign: String, errorMessage: String, errorMessageAlign: String, + showWordLimit: Boolean, type: { type: String, default: 'text' @@ -260,6 +261,16 @@ export default createComponent({ ); } + }, + + renderWordLimit() { + if (this.showWordLimit && this.$attrs.maxlength) { + return ( +
+ {this.value.length}/{this.$attrs.maxlength} +
+ ); + } } }, @@ -302,6 +313,7 @@ export default createComponent({ {this.renderRightIcon()} {slots('button') &&
{slots('button')}
} + {this.renderWordLimit()} {this.errorMessage && (
{this.errorMessage} diff --git a/src/field/index.less b/src/field/index.less index 514062f39..1b4bbc641 100644 --- a/src/field/index.less +++ b/src/field/index.less @@ -117,6 +117,12 @@ } } + &__word-limit { + color: @field-word-limit-color; + font-size: @field-word-limit-font-size; + line-height: @field-word-limit-line-height; + } + &--error { .van-field__control { &, diff --git a/src/field/test/__snapshots__/demo.spec.js.snap b/src/field/test/__snapshots__/demo.spec.js.snap index 2e1324ee0..98e61a9b3 100644 --- a/src/field/test/__snapshots__/demo.spec.js.snap +++ b/src/field/test/__snapshots__/demo.spec.js.snap @@ -59,16 +59,6 @@ exports[`renders demo correctly 1`] = `
-
-
-
-
留言
-
-
-
-
-
-
@@ -83,5 +73,26 @@ exports[`renders demo correctly 1`] = `
+
+
+
+
留言
+
+
+
+
+
+
+
+
+
+
留言
+
+
+
0/50
+
+
+
+
`; diff --git a/src/style/var.less b/src/style/var.less index 4f988220b..2c73fc235 100644 --- a/src/style/var.less +++ b/src/style/var.less @@ -292,6 +292,9 @@ @field-error-message-color: @red; @field-error-message-text-color: 12px; @field-text-area-min-height: 60px; +@field-word-limit-color: @gray-darker; +@field-word-limit-font-size: @font-size-sm; +@field-word-limit-line-height: 16px; // GridItem @grid-item-content-padding: @padding-md @padding-xs;