ant-design-vue/components/transfer/search.jsx

53 lines
1.2 KiB
Vue
Raw Normal View History

2018-04-06 16:20:45 +00:00
import PropTypes from '../_util/vue-types'
import { initDefaultProps, getOptionProps } from '../_util/props-util'
import Icon from '../icon'
import Input from '../input'
export const TransferSearchProps = {
prefixCls: PropTypes.string,
placeholder: PropTypes.string,
value: PropTypes.any,
2018-05-18 13:21:31 +00:00
handleClear: PropTypes.func,
2018-04-06 16:20:45 +00:00
}
export default {
name: 'Search',
props: initDefaultProps(TransferSearchProps, {
placeholder: '',
}),
methods: {
handleChange (e) {
this.$emit('change', e)
},
2018-05-18 13:21:31 +00:00
handleClear2 (e) {
2018-04-06 16:20:45 +00:00
e.preventDefault()
2018-05-18 13:21:31 +00:00
if (this.handleClear) {
this.handleClear(e)
}
2018-04-06 16:20:45 +00:00
},
},
render () {
const { placeholder, value, prefixCls } = getOptionProps(this)
const icon = (value && value.length > 0) ? (
2018-05-18 13:21:31 +00:00
<a href='#' class={`${prefixCls}-action`} onClick={this.handleClear2}>
2018-04-06 16:20:45 +00:00
<Icon type='cross-circle' />
</a>
) : (
<span class={`${prefixCls}-action`}><Icon type='search' /></span>
)
return (
<div>
<Input
placeholder={placeholder}
class={prefixCls}
value={value}
ref='input'
onChange={this.handleChange}
/>
{icon}
</div>
)
},
}