import { defineComponent, inject } from 'vue'; import classNames from '../_util/classNames'; import { isMobile } from 'is-mobile'; import Input from './Input'; import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined'; import SearchOutlined from '@ant-design/icons-vue/SearchOutlined'; import inputProps from './inputProps'; import Button from '../button'; import { cloneElement } from '../_util/vnode'; import PropTypes from '../_util/vue-types'; import { getOptionProps, getComponent } from '../_util/props-util'; import { defaultConfigProvider } from '../config-provider'; import isPlainObject from 'lodash-es/isPlainObject'; export default defineComponent({ name: 'AInputSearch', inheritAttrs: false, props: { ...inputProps, // 不能设置默认值 https://github.com/vueComponent/ant-design-vue/issues/1916 enterButton: PropTypes.VNodeChild, onSearch: PropTypes.func, }, setup() { return { configProvider: inject('configProvider', defaultConfigProvider), input: null, }; }, methods: { saveInput(node: HTMLInputElement) { this.input = node; }, handleChange(e: Event) { if (e && e.target && e.type === 'click') { this.$emit('search', (e.target as HTMLInputElement).value, e); } this.$emit('update:value', (e.target as HTMLInputElement).value); this.$emit('change', e); }, handleSearch(e: Event) { if (this.loading || this.disabled) { return; } this.$emit('search', this.input.stateValue, e); if (!isMobile({ tablet: true })) { this.input.focus(); } }, focus() { this.input.focus(); }, blur() { this.input.blur(); }, renderLoading(prefixCls: string) { const { size } = this.$props; let enterButton = getComponent(this, 'enterButton'); // 兼容 , 因enterButton类型为 any,此类写法 enterButton 为空字符串 enterButton = enterButton || enterButton === ''; if (enterButton) { return ( ); } return ; }, renderSuffix(prefixCls: string) { const { loading } = this; const suffix = getComponent(this, 'suffix'); let enterButton = getComponent(this, 'enterButton'); // 兼容 , 因enterButton类型为 any,此类写法 enterButton 为空字符串 enterButton = enterButton || enterButton === ''; if (loading && !enterButton) { return [suffix, this.renderLoading(prefixCls)]; } if (enterButton) return suffix; const icon = ( ); if (suffix) { // let cloneSuffix = suffix; // if (isValidElement(cloneSuffix) && !cloneSuffix.key) { // cloneSuffix = cloneElement(cloneSuffix, { // key: 'originSuffix', // }); // } return [suffix, icon]; } return icon; }, renderAddonAfter(prefixCls: string) { const { size, disabled, loading } = this; const btnClassName = `${prefixCls}-button`; let enterButton = getComponent(this, 'enterButton'); enterButton = enterButton || enterButton === ''; const addonAfter = getComponent(this, 'addonAfter'); if (loading && enterButton) { return [this.renderLoading(prefixCls), addonAfter]; } if (!enterButton) return addonAfter; const enterButtonAsElement = Array.isArray(enterButton) ? enterButton[0] : enterButton; let button: any; const isAntdButton = enterButtonAsElement.type && isPlainObject(enterButtonAsElement.type) && enterButtonAsElement.type.__ANT_BUTTON; if (enterButtonAsElement.tagName === 'button' || isAntdButton) { button = cloneElement(enterButtonAsElement, { key: 'enterButton', class: isAntdButton ? btnClassName : '', ...(isAntdButton ? { size } : {}), onClick: this.handleSearch, }); } else { button = ( ); } if (addonAfter) { return [button, addonAfter]; } return button; }, }, render() { const { prefixCls: customizePrefixCls, inputPrefixCls: customizeInputPrefixCls, size, class: className, ...restProps } = { ...getOptionProps(this), ...this.$attrs } as any; delete restProps.onSearch; delete restProps.loading; delete restProps.enterButton; delete restProps.addonBefore; delete restProps['onUpdate:value']; const getPrefixCls = this.configProvider.getPrefixCls; const prefixCls = getPrefixCls('input-search', customizePrefixCls); const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls); let enterButton = getComponent(this, 'enterButton'); const addonBefore = getComponent(this, 'addonBefore'); enterButton = enterButton || enterButton === ''; let inputClassName: string; if (enterButton) { inputClassName = classNames(prefixCls, className, { [`${prefixCls}-enter-button`]: !!enterButton, [`${prefixCls}-${size}`]: !!size, }); } else { inputClassName = prefixCls; } const inputProps = { ...restProps, prefixCls: inputPrefixCls, size, suffix: this.renderSuffix(prefixCls), prefix: getComponent(this, 'prefix'), addonAfter: this.renderAddonAfter(prefixCls), addonBefore, class: inputClassName, onPressEnter: this.handleSearch, onChange: this.handleChange, }; return ; }, });