You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
110 lines
2.9 KiB
110 lines
2.9 KiB
|
|
import classNames from 'classnames'
|
|
import Input from './Input'
|
|
import Icon from '../icon'
|
|
import inputProps from './inputProps'
|
|
import Button from '../button'
|
|
import { cloneElement } from '../_util/vnode'
|
|
import { getOptionProps, getComponentFromProp } from '../_util/props-util'
|
|
import PropTypes from '../_util/vue-types'
|
|
|
|
export default {
|
|
name: 'AInputSearch',
|
|
props: {
|
|
...inputProps,
|
|
prefixCls: {
|
|
default: 'ant-input-search',
|
|
type: String,
|
|
},
|
|
inputPrefixCls: {
|
|
default: 'ant-input',
|
|
type: String,
|
|
},
|
|
enterButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.object]),
|
|
},
|
|
model: {
|
|
prop: 'value',
|
|
event: 'change.value',
|
|
},
|
|
methods: {
|
|
onSearch (e) {
|
|
this.$emit('search', this.$refs.input.stateValue)
|
|
this.$refs.input.focus()
|
|
},
|
|
focus () {
|
|
this.$refs.input.focus()
|
|
},
|
|
|
|
blur () {
|
|
this.$refs.input.blur()
|
|
},
|
|
getButtonOrIcon () {
|
|
const { prefixCls, size } = this
|
|
const enterButton = getComponentFromProp(this, 'enterButton')
|
|
if (!enterButton) {
|
|
return <Icon class={`${prefixCls}-icon`} type='search' key='searchIcon' />
|
|
}
|
|
const enterButtonAsElement = Array.isArray(enterButton) ? enterButton[0] : enterButton
|
|
if (enterButtonAsElement.componentOptions && enterButtonAsElement.componentOptions.Ctor.extendOptions.__ANT_BUTTON) {
|
|
return cloneElement(enterButtonAsElement, {
|
|
class: `${prefixCls}-button`,
|
|
props: { size },
|
|
on: {
|
|
click: this.onSearch,
|
|
},
|
|
})
|
|
} else if (enterButtonAsElement.tag === 'button') {
|
|
return cloneElement(enterButtonAsElement, {
|
|
on: {
|
|
click: this.onSearch,
|
|
},
|
|
})
|
|
}
|
|
return (
|
|
<Button
|
|
class={`${prefixCls}-button`}
|
|
type='primary'
|
|
size={size}
|
|
onClick={this.onSearch}
|
|
key='enterButton'
|
|
>
|
|
{enterButton === true ? <Icon type='search' /> : enterButton}
|
|
</Button>
|
|
)
|
|
},
|
|
},
|
|
render () {
|
|
const { prefixCls, inputPrefixCls, size,
|
|
suffix, ...others
|
|
} = getOptionProps(this)
|
|
const enterButton = getComponentFromProp(this, 'enterButton')
|
|
const buttonOrIcon = this.getButtonOrIcon()
|
|
const searchSuffix = suffix ? [suffix, buttonOrIcon] : buttonOrIcon
|
|
const inputClassName = classNames(prefixCls, {
|
|
[`${prefixCls}-enter-button`]: !!enterButton,
|
|
[`${prefixCls}-${size}`]: !!size,
|
|
})
|
|
const inputProps = {
|
|
props: {
|
|
...others,
|
|
prefixCls: inputPrefixCls,
|
|
size,
|
|
suffix: searchSuffix,
|
|
},
|
|
attrs: this.$attrs,
|
|
on: {
|
|
...this.$listeners,
|
|
pressEnter: this.onSearch,
|
|
},
|
|
}
|
|
return (
|
|
<Input
|
|
{...inputProps}
|
|
class={inputClassName}
|
|
ref='input'
|
|
/>
|
|
)
|
|
},
|
|
}
|
|
|