vuecssuiant-designantdreactantantd-vueenterprisefrontendui-designvue-antdvue-antd-uivue3vuecomponent
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.
52 lines
1.2 KiB
52 lines
1.2 KiB
import { defineComponent, shallowRef, withDirectives } from 'vue'; |
|
import antInput from './antInputDirective'; |
|
import PropTypes from './vue-types'; |
|
const BaseInput = defineComponent({ |
|
compatConfig: { MODE: 3 }, |
|
props: { |
|
value: PropTypes.string.def(''), |
|
}, |
|
emits: ['change', 'input'], |
|
setup(_p, { emit }) { |
|
const inputRef = shallowRef(null); |
|
const handleChange = (e: Event) => { |
|
const { composing } = e.target as any; |
|
if ((e as any).isComposing || composing) { |
|
emit('input', e); |
|
} else { |
|
emit('input', e); |
|
emit('change', e); |
|
} |
|
}; |
|
return { |
|
inputRef, |
|
focus: () => { |
|
if (inputRef.value) { |
|
inputRef.value.focus(); |
|
} |
|
}, |
|
blur: () => { |
|
if (inputRef.value) { |
|
inputRef.value.blur(); |
|
} |
|
}, |
|
handleChange, |
|
}; |
|
}, |
|
render() { |
|
return withDirectives( |
|
( |
|
<input |
|
{...this.$props} |
|
{...this.$attrs} |
|
onInput={this.handleChange} |
|
onChange={this.handleChange} |
|
ref="inputRef" |
|
/> |
|
) as any, |
|
[[antInput]], |
|
); |
|
}, |
|
}); |
|
|
|
export default BaseInput;
|
|
|