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

56 lines
1.3 KiB
Vue
Raw Normal View History

2018-04-07 00:20:45 +08: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 21:21:31 +08:00
handleClear: PropTypes.func,
disabled: PropTypes.bool,
2018-04-07 00:20:45 +08:00
}
export default {
name: 'Search',
props: initDefaultProps(TransferSearchProps, {
placeholder: '',
}),
methods: {
handleChange (e) {
this.$emit('change', e)
},
2018-05-18 21:21:31 +08:00
handleClear2 (e) {
2018-04-07 00:20:45 +08:00
e.preventDefault()
const { handleClear, disabled } = this.$props
if (!disabled && handleClear) {
handleClear(e)
2018-05-18 21:21:31 +08:00
}
2018-04-07 00:20:45 +08:00
},
},
render () {
const { placeholder, value, prefixCls, disabled } = getOptionProps(this)
2018-04-07 00:20:45 +08:00
const icon = (value && value.length > 0) ? (
2018-05-18 21:21:31 +08:00
<a href='#' class={`${prefixCls}-action`} onClick={this.handleClear2}>
<Icon type='close-circle' theme='filled'/>
2018-04-07 00:20:45 +08:00
</a>
) : (
<span class={`${prefixCls}-action`}><Icon type='search' /></span>
)
return (
<div>
<Input
placeholder={placeholder}
class={prefixCls}
value={value}
ref='input'
onChange={this.handleChange}
disabled={disabled}
2018-04-07 00:20:45 +08:00
/>
{icon}
</div>
)
},
}