diff --git a/components/input/__tests__/input-926.spec.ts b/components/input/__tests__/input-926.spec.ts new file mode 100644 index 000000000..5c566f3c4 --- /dev/null +++ b/components/input/__tests__/input-926.spec.ts @@ -0,0 +1,49 @@ +import { mount } from '@vue/test-utils'; +import { readFileSync } from 'fs'; +import { resolve } from 'path'; + +import getPrefixCls from '../../_util/getPrefixCls'; +import Input from '../input.vue'; + +const prefixCls = getPrefixCls('input'); +const inputInnerPrefixCls = getPrefixCls('input-inner'); + +function getInputInnerLess(): string { + return readFileSync( + resolve(__dirname, '../style/inputInner.less'), + 'utf-8', + ); +} + +test('inputInner.less has vertical-align: middle for both prefix and suffix', () => { + const lessContent = getInputInnerLess(); + const prefixMatch = lessContent.match(/&\-prefix\s*\{[^}]*vertical-align\s*:\s*middle/); + const suffixMatch = lessContent.match(/&\-suffix\s*\{[^}]*vertical-align\s*:\s*middle/); + expect(prefixMatch).not.toBeNull(); + expect(suffixMatch).not.toBeNull(); +}); + +test('FInput with prefix and suffix slots mounts without error', () => { + expect(() => + mount(Input, { + props: { + modelValue: 'test', + }, + slots: { + prefix: 'PREFIX', + suffix: 'SUFFIX', + }, + }), + ).not.toThrow(); + const wrapper = mount(Input, { + props: { + modelValue: '', + }, + slots: { + prefix: 'PREFIX', + suffix: 'SUFFIX', + }, + }); + expect(wrapper.find(`.${inputInnerPrefixCls}-prefix`).exists()).toBe(true); + expect(wrapper.find(`.${inputInnerPrefixCls}-suffix`).exists()).toBe(true); +}); \ No newline at end of file diff --git a/components/input/style/inputInner.less b/components/input/style/inputInner.less index 2d3b3e3ae..32a113d8a 100644 --- a/components/input/style/inputInner.less +++ b/components/input/style/inputInner.less @@ -86,11 +86,12 @@ } &-prefix { margin-right: 8px; + vertical-align: middle; } &-suffix { margin-left: 8px; - vertical-align: bottom; + vertical-align: middle; } &-icon {