test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-04 04:08:34 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix(input): input maxlength calculate the correct length (#2654)

Browse Source 
* fix(input): input maxlength calculate the correct length

* docs(input): Update maxlength comment

* fix(input): format code and remove upperLimit calculated attributes

* fix(input): props.maxlength is converted to number type

* docs(input): modify maxlength type
This commit is contained in:
haoming 2021-07-25 22:48:47 +08:00 committed by GitHub
parent 3181258403
commit d55ca77137
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 83 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
packages/input/__tests__/input.spec.ts
View File

@ -45,7 +45,7 @@ describe('Input.vue', () => {
expect(nativeInput.placeholder).toBe('请输入内容')
expect(nativeInput.value).toBe('input')
expect(nativeInput.minLength).toBe(3)
expect(nativeInput.maxLength).toBe(5)
// expect(nativeInput.maxLength).toBe(5) // The maxlength attribute is no longer a native attribute
vm.input = 'text'
await sleep()
@ -68,6 +68,61 @@ describe('Input.vue', () => {
expect(inputElm.element.disabled).not.toBeNull()
})
describe('test emoji',()=>{
test('el-input should minimize value between emoji length and maxLength', async () => {
const wrapper = _mount({
template: `<el-input class="test-exceed" maxlength="4" show-word-limit v-model="inputVal" />`,
setup() {
const inputVal = ref('12🌚')
return { inputVal }
},
})
const vm = wrapper.vm
const inputElm = wrapper.find('input')
const nativeInput = inputElm.element
expect(nativeInput.value).toBe('12🌚')
const elCount = wrapper.find('.el-input__count-inner')
expect(elCount.exists()).toBe(true)
expect(elCount.text()).toBe('3/4')
vm.inputVal = '1👌3😄'
await sleep()
expect(nativeInput.value).toBe('1👌3😄')
expect(elCount.text()).toBe('4/4')
vm.inputVal = '哈哈1👌3😄'
await sleep()
expect(nativeInput.value).toBe('哈哈1👌3😄')
expect(elCount.text()).toBe('6/4')
expect(vm.$el.classList.contains('is-exceed')).toBe(true)
})
test('textarea should minimize value between emoji length and maxLength', async () => {
const wrapper = _mount({
template: `<el-input type="textarea" maxlength="4" show-word-limit v-model="inputVal" />`,
setup() {
const inputVal = ref('啊好😄')
return { inputVal }
},
})
const vm = wrapper.vm
const inputElm = wrapper.find('textarea')
const nativeInput = inputElm.element
expect(nativeInput.value).toBe('啊好😄')
const elCount = wrapper.find('.el-input__count')
expect(elCount.exists()).toBe(true)
expect(elCount.text()).toBe('3/4')
vm.inputVal = '哈哈1👌3😄'
await sleep()
expect(nativeInput.value).toBe('哈哈1👌3😄')
expect(elCount.text()).toBe('6/4')
expect(vm.$el.classList.contains('is-exceed')).toBe(true)
})
})
test('suffixIcon', () => {
const wrapper = _mount({
template: `<el-input suffix-icon="time" />`,

26
packages/input/src/index.vue
View File

@ -70,7 +70,7 @@
<i v-if="showPwdVisible" class="el-input__icon el-icon-view el-input__clear" @click="handlePasswordVisible"></i>
<span v-if="isWordLimitVisible" class="el-input__count">
<span class="el-input__count-inner">
{{ textLength }}/{{ upperLimit }}
{{ textLength }}/{{ maxlength }}
</span>
</span>
</span>
@ -103,7 +103,7 @@
@keydown="handleKeydown"
>
</textarea>
<span v-if="isWordLimitVisible && type === 'textarea'" class="el-input__count">{{ textLength }}/{{ upperLimit }}</span>
<span v-if="isWordLimitVisible && type === 'textarea'" class="el-input__count">{{ textLength }}/{{ maxlength }}</span>
</div>
</template>
@ -222,6 +222,9 @@ export default defineComponent({
type: Object,
default: () => ({}),
},
maxlength: {
type: [Number, String],
},
},
emits: [UPDATE_MODEL_EVENT, 'input', 'change', 'focus', 'blur', 'clear',
@ -254,7 +257,6 @@ export default defineComponent({
}))
const inputDisabled = computed(() => props.disabled || elForm.disabled)
const nativeInputValue = computed(() => (props.modelValue === null || props.modelValue === undefined) ? '' : String(props.modelValue))
const upperLimit = computed(() => ctx.attrs.maxlength)
const showClear = computed(() => {
return props.clearable &&
!inputDisabled.value &&
@ -270,18 +272,18 @@ export default defineComponent({
})
const isWordLimitVisible = computed(() => {
return props.showWordLimit &&
ctx.attrs.maxlength &&
props.maxlength &&
(props.type === 'text' || props.type === 'textarea') &&
!inputDisabled.value &&
!props.readonly &&
!props.showPassword
})
const textLength = computed(() => {
return typeof props.modelValue === 'number' ? String(props.modelValue).length : (props.modelValue || '').length
return Array.from(nativeInputValue.value).length
})
const inputExceed = computed(() => {
// show exceed style if length of initial value greater then maxlength
return isWordLimitVisible.value && (textLength.value > upperLimit.value)
return isWordLimitVisible.value && (textLength.value > Number(props.maxlength))
})
const resizeTextarea = () => {
@ -332,7 +334,7 @@ export default defineComponent({
}
const handleInput = event => {
const { value } = event.target
let { value } = event.target
// should not emit input during composition
// see: https://github.com/ElemeFE/element/issues/10516
@ -340,7 +342,14 @@ export default defineComponent({
// hack for https://github.com/ElemeFE/element/issues/8548
// should remove the following line when we don't support IE
if (value === nativeInputValue.value) return
if (value === nativeInputValue.value ) return
// if set maxlength
if (props.maxlength) {
const sliceIndex = inputExceed.value ? textLength.value : props.maxlength
// Convert value to an array for get a right lenght
value = Array.from(value).slice(0, Number(sliceIndex)).join('')
}
ctx.emit(UPDATE_MODEL_EVENT, value)
ctx.emit('input', value)
@ -481,7 +490,6 @@ export default defineComponent({
showClear,
showPwdVisible,
isWordLimitVisible,
upperLimit,
textLength,
hovering,
inputExceed,

4
website/docs/en-US/input.md
View File

@ -568,7 +568,7 @@ export default defineComponent({
### 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.
:::demo `maxlength` and `minlength` attributes of 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
<el-input
@ -609,7 +609,7 @@ export default defineComponent ({
| ----| ----| ----| ---- | ----- |
|type| type of input | string | text, textarea and other [native input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text |
|modelValue / v-model| binding value | string / number| — | — |
|maxlength| same as `maxlength` in native input | number| — | — |
|maxlength| the max length | string / 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 | — | — |

4
website/docs/es/input.md
View File

@ -582,7 +582,7 @@ export default defineComponent({
### Limitar el tamaño
:::demo `maxlength` y `minlength` son atributos de la entrada nativa, declaran un límite en el número de caracteres que un usuario puede introducir. La configuración de la pro `maxlength` para un tipo de entrada de texto o de área de texto puede limitar la longitud del valor de entrada y le permite mostrar el recuento de palabras al establecer `show-word-limit` a `true` al mismo tiempo.
:::demo `maxlength` y `minlength` atributos de la entrada, declaran un límite en el número de caracteres que un usuario puede introducir. La configuración de la pro `maxlength` para un tipo de entrada de texto o de área de texto puede limitar la longitud del valor de entrada y le permite mostrar el recuento de palabras al establecer `show-word-limit` a `true` al mismo tiempo.
```html
<el-input
@ -623,7 +623,7 @@ export default defineComponent ({
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| type | tipo de input | string | text, textarea y otros [tipos de entrada nativos](https://developer.mozilla.org/es/docs/Web/HTML/Elemento/input#Form_%3Cinput%3E_types) | text |
| model-value / v-model | valor enlazado | boolean / string / number | — | — |
| maxlength | igual que `maxlength` en el input nativo | number | — | — |
| maxlength | La longitud máxima | number | — | — |
| minlength | igual que `minlength` en el input nativo | number | — | — |
| show-word-limit | Si se muestra el contador de palabras, solamente funciona con los tipos `text` o `textarea` | boolean | — | false |
| placeholder | placeholder del Input | string | — | — |

4
website/docs/fr-FR/input.md
View File

@ -567,7 +567,7 @@ export default defineComponent({
### Taille limite
:::demo `maxlength` et `minlength` sont des attributs natifs, indiquant la taille limite de l'input. Le nombre de caractères est mesuré par la taille de la chaine Javascript. Si vous utilisez `maxlength`, vous pourrez montrer le nombre de caractères en mettant `show-word-limit` à `true`.
:::demo `maxlength` et `minlength` des attributs, indiquant la taille limite de l'input. Le nombre de caractères est mesuré par la taille de la chaine Javascript. Si vous utilisez `maxlength`, vous pourrez montrer le nombre de caractères en mettant `show-word-limit` à `true`.
```html
<el-input
@ -608,7 +608,7 @@ export default defineComponent ({
| ----| ----| ----| ---- | ----- |
| type| Type de l'input. | string | text, textarea et autres [types d'input natifs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text |
| model-value / v-model | Variable liée. | string / number | — | — |
| maxlength| Identique à `maxlength` dans l'input natif. | number| — | — |
| maxlength| La longueur maximale. | string / number | — | — |
| minlength| Identique à `minlength` dans l'input natif. | number | — | — |
| show-word-limit | Affiche le nombre de caractères restant， ne marche que lorsque `type` est 'text' ou 'textarea'. | boolean | — | false |
| placeholder| Placeholder de l' Input. | string | — | — |

4
website/docs/jp/input.md
View File

@ -568,7 +568,7 @@ export default defineComponent({
### 限界長さ
:::demo `maxlength` と `minlength` はネイティブ入力の属性であり、ユーザが入力できる文字数の制限を宣言するものである。テキストやテキストエリア型のインプットに対して `maxlength` プロップを設定すると、インプット値の長さを制限することができ、同時に `show-word-limit` を `true` に設定することで単語数を表示することができます。
:::demo `maxlength` と `minlength` 属性であり、ユーザが入力できる文字数の制限を宣言するものである。テキストやテキストエリア型のインプットに対して `maxlength` プロップを設定すると、インプット値の長さを制限することができ、同時に `show-word-limit` を `true` に設定することで単語数を表示することができます。
```html
<el-input
@ -609,7 +609,7 @@ export default defineComponent ({
| ----| ----| ----| ---- | ----- |
|type| インプットタイプ | string | text, textarea and other [native input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text |
|modelValue / v-model| バインディング値 | string / number| — | — |
|maxlength| ネイティブインプットの `maxlength` と同じ | number| — | — |
|maxlength| 最大長さ | string / number | — | — |
|minlength| ネイティブインプットの `minlength` と同じ | number | — | — |
|show-word-limit | `type` が 'text' または 'textarea' の場合に単語数を表示するかどうかを指定する | boolean | — | false |
|placeholder| インプットのプレースホルダー | string | — | — |

4
website/docs/zh-CN/input.md
View File

@ -910,7 +910,7 @@ export default defineComponent({
### 输入长度限制
:::demo `maxlength` 和 `minlength` 是原生属性，用来限制输入框的字符长度，其中字符长度是用 Javascript 的字符串长度统计的。对于类型为 `text` 或 `textarea` 的输入框，在使用 `maxlength` 属性限制最大输入长度的同时，可通过设置 `show-word-limit` 属性来展示字数统计。
:::demo `maxlength` 和 `minlength` 属性，用来限制输入框的字符长度，其中字符长度是用 Javascript 的字符串长度统计的。对于类型为 `text` 或 `textarea` 的输入框，在使用 `maxlength` 属性限制最大输入长度的同时，可通过设置 `show-word-limit` 属性来展示字数统计。
```html
<el-input
type="text"
@ -951,7 +951,7 @@ export default defineComponent ({
|------------- |---------------- |---------------- |---------------------- |-------- |
| type | 类型 | string | text，textarea 和其他 [原生 input 的 type 值](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text |
| model-value / v-model | 绑定值 | string / number | — | — |
| maxlength | 原生属性，最大输入长度 | number | — | — |
| maxlength | 最大输入长度 | string / number | — | — |
| minlength | 原生属性，最小输入长度 | number | — | — |
| show-word-limit | 是否显示输入字数统计，只在 `type = "text"` 或 `type = "textarea"` 时有效 | boolean | — | false |
| placeholder | 输入框占位文本 | string | — | — |