From 88ae222c617f55be631be71bf3167657ca6fdfca Mon Sep 17 00:00:00 2001 From: luckyCao Date: Fri, 19 Apr 2019 16:14:07 +0800 Subject: [PATCH] Input: add show-word-count attribute (#15075) --- examples/docs/en-US/input.md | 39 +++++++++++++++++- examples/docs/es/input.md | 41 +++++++++++++++++- examples/docs/fr-FR/input.md | 37 +++++++++++++++++ examples/docs/zh-CN/input.md | 36 ++++++++++++++++ packages/input/src/input.vue | 46 ++++++++++++++++++++- packages/theme-chalk/src/input.scss | 46 +++++++++++++++++++++ test/unit/specs/input.spec.js | 64 +++++++++++++++++++++++++++++ types/input.d.ts | 9 ++++ 8 files changed, 313 insertions(+), 5 deletions(-) diff --git a/examples/docs/en-US/input.md b/examples/docs/en-US/input.md index aa8d6e729..64f851ded 100644 --- a/examples/docs/en-US/input.md +++ b/examples/docs/en-US/input.md @@ -1,4 +1,4 @@ -## Input +## Input Input data using mouse or keyboard. @@ -521,6 +521,42 @@ Search data from server-side. ``` ::: +### Limit length + +:::demo `maxlength` and `minlength` are attributes of native input, they declare a limit on the number of characters a user can input. The "number of characters" is measured using JavaScript string length.Setting the `maxlength` prop for a text or textarea type of Input can limit the length of input value, allows you to show word count by setting `show-word-limit` to `true` at the same time. + +```html + + +
+ + + + +``` +::: + ### Input Attributes | Attribute | Description | Type | Accepted Values | Default | @@ -529,6 +565,7 @@ Search data from server-side. |value / v-model| binding value | string / number| — | — | |maxlength| same as `maxlength` in native input | number| — | — | |minlength| same as `minlength` in native input | number | — | — | +|show-word-limit | whether show word count,only works when `type` is 'text' or 'textarea' | boolean | — | false | |placeholder| placeholder of Input| string | — | — | | clearable | whether to show clear button | boolean | — | false | | show-password | whether to show toggleable password input| boolean | — | false | diff --git a/examples/docs/es/input.md b/examples/docs/es/input.md index 44a25f2f9..202fa36c0 100644 --- a/examples/docs/es/input.md +++ b/examples/docs/es/input.md @@ -285,7 +285,7 @@ export default { + v-model="input3"> + +
+ + + + +``` +::: + ### Input atributos | Atributo | Descripción | Tipo | Valores aceptados | Por defecto | @@ -543,6 +579,7 @@ Búsqueda de datos desde el servidor. | value / v-model | valor enlazado | boolean / string / number | — | — | | maxlength | igual que `maxlength` en el input nativo | number | — | — | | minlength | igual que `minlength` en el input nativo | number | — | — | +| show-word-limit | whether show word count,only works when `type` is 'text' or 'textarea' | boolean | — | false | | placeholder | placeholder del Input | string | — | — | | clearable | si debe mostrar el boton de limpieza | boolean | — | false | | show-password | si debe mostrar la posibilidad de conmutacion de password input | boolean | — | false | diff --git a/examples/docs/fr-FR/input.md b/examples/docs/fr-FR/input.md index ba4b8cc65..968d84e03 100644 --- a/examples/docs/fr-FR/input.md +++ b/examples/docs/fr-FR/input.md @@ -520,6 +520,42 @@ Vous pouvez aller chercher des infos de suggestions sur un serveur distant. ``` ::: +### Limit length + +:::demo `maxlength` and `minlength` are attributes of native input, they declare a limit on the number of characters a user can input. The "number of characters" is measured using JavaScript string length.Setting the `maxlength` prop for a text or textarea type of Input can limit the length of input value, allows you to show word count by setting `show-word-limit` to `true` at the same time. + +```html + + +
+ + + + +``` +::: + ### Attributs de l'Input | Attribut | Description | Type | Valeurs acceptées | Défaut | @@ -528,6 +564,7 @@ Vous pouvez aller chercher des infos de suggestions sur un serveur distant. | value / v-model | Variable liée. | string / number | — | — | | maxlength| Identique à `maxlength` dans l'input natif. | number| — | — | | minlength| Identique à `minlength` dans l'input natif. | number | — | — | +| show-word-limit | whether show word count,only works when `type` is 'text' or 'textarea' | boolean | — | false | | placeholder| Placeholder de l' Input. | string | — | — | | clearable | Si le bouton de reset apparaît. | boolean | — | false | | show-password | Si le champ doit un champ de mot de passe avec bouton de visualisation. | boolean | — | false | diff --git a/examples/docs/zh-CN/input.md b/examples/docs/zh-CN/input.md index 7e11c54f9..0d3d621dc 100644 --- a/examples/docs/zh-CN/input.md +++ b/examples/docs/zh-CN/input.md @@ -639,6 +639,41 @@ export default { ``` ::: +### 输入长度限制 + +:::demo `maxlength` 和 `minlength` 是原生属性,用来限制输入框的字符长度,其中字符长度是用 Javascript 的字符串长度统计的。对于类型为 `text` 或 `textarea` 的输入框,在使用 `maxlength` 属性限制最大输入长度的同时,可通过设置 `show-word-limit` 属性来展示字数统计。 +```html + + +
+ + + + +``` +::: + ### Input Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | @@ -647,6 +682,7 @@ export default { | value / v-model | 绑定值 | string / number | — | — | | maxlength | 原生属性,最大输入长度 | number | — | — | | minlength | 原生属性,最小输入长度 | number | — | — | +| show-word-limit | 是否显示输入字数统计,只在 `type = "text"` 或 `type = "textarea"` 时有效 | boolean | — | false | | placeholder | 输入框占位文本 | string | — | — | | clearable | 是否可清空 | boolean | — | false | | show-password | 是否显示切换密码图标| boolean | — | false | diff --git a/packages/input/src/input.vue b/packages/input/src/input.vue index 9ca3a9902..98ef1dc04 100644 --- a/packages/input/src/input.vue +++ b/packages/input/src/input.vue @@ -4,6 +4,7 @@ inputSize ? 'el-input--' + inputSize : '', { 'is-disabled': inputDisabled, + 'is-exceed': inputExceed, 'el-input-group': $slots.prepend || $slots.append, 'el-input-group--append': $slots.append, 'el-input-group--prepend': $slots.prepend, @@ -48,9 +49,9 @@ + v-if="getSuffixVisible()"> -