diff --git a/docs/en-US/component/input.md b/docs/en-US/component/input.md index 3f5c4121f1..03b370642b 100644 --- a/docs/en-US/component/input.md +++ b/docs/en-US/component/input.md @@ -1,4 +1,4 @@ ---- +--- title: Input lang: en-US --- @@ -51,7 +51,7 @@ input/formatter ## Password box -:::demo Make a toggle-able password Input with the `show-password` attribute. +:::demo Make a toggle-able password Input with the `show-password` attribute. Since ^(2.13.6), the `password-icon` slot is supported to override the default icon. input/password @@ -172,12 +172,13 @@ input/length-limiting ### Slots -| Name | Description | -| ------- | ------------------------------------------------------------------------- | -| prefix | content as Input prefix, only works when `type` is not 'textarea' | -| suffix | content as Input suffix, only works when `type` is not 'textarea' | -| prepend | content to prepend before Input, only works when `type` is not 'textarea' | -| append | content to append after Input, only works when `type` is not 'textarea' | +| Name | Description | +| ----------------------- | --------------------------------------------------------------------------------------------------------------------- | +| prefix | content as Input prefix, only works when `type` is not 'textarea' | +| suffix | content as Input suffix, only works when `type` is not 'textarea' | +| prepend | content to prepend before Input, only works when `type` is not 'textarea' | +| append | content to append after Input, only works when `type` is not 'textarea' | +| password-icon ^(2.13.6) | content as Input password icon, only works when `show-password` is true. The scope variable is `{ visible: boolean }` | ### Exposes diff --git a/docs/examples/input/password.vue b/docs/examples/input/password.vue index ed59804653..d8e75231af 100644 --- a/docs/examples/input/password.vue +++ b/docs/examples/input/password.vue @@ -1,15 +1,40 @@ + + diff --git a/packages/components/input/__tests__/input.test.tsx b/packages/components/input/__tests__/input.test.tsx index fe1605ef29..ebed0d6739 100644 --- a/packages/components/input/__tests__/input.test.tsx +++ b/packages/components/input/__tests__/input.test.tsx @@ -614,6 +614,36 @@ describe('Input.vue', () => { expect(input.element.selectionEnd).toBe(4) }) + test('password-icon slot', async () => { + const wrapper = mount(() => ( + ( + + {visible ? 'Hide' : 'Show'} + + ), + }} + /> + )) + + const icon = wrapper.find('.el-input__password') + expect(icon.exists()).toBe(true) + + // Initial state: password hidden + expect(wrapper.find('.custom-password-icon').text()).toBe('Show') + + // Click to toggle + await icon.trigger('click') + expect(wrapper.find('.custom-password-icon').text()).toBe('Hide') + + // Click again + await icon.trigger('click') + expect(wrapper.find('.custom-password-icon').text()).toBe('Show') + }) + describe('form item accessibility integration', () => { test('automatic id attachment', async () => { const wrapper = mount(() => ( diff --git a/packages/components/input/src/input.vue b/packages/components/input/src/input.vue index 80d33ca370..15ad78cca2 100644 --- a/packages/components/input/src/input.vue +++ b/packages/components/input/src/input.vue @@ -83,7 +83,9 @@ @mousedown.prevent="NOOP" @mouseup.prevent="NOOP" > - + + +