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.1 KiB
52 lines
1.1 KiB
4 years ago
|
import { defineComponent, ref, withDirectives } from 'vue';
|
||
|
|
import antInput from './antInputDirective';
|
||
|
|
import PropTypes from './vue-types';
|
||
|
|
const BaseInput = defineComponent({
|
||
|
|
props: {
|
||
|
|
value: PropTypes.string.def(''),
|
||
|
|
},
|
||
|
|
emits: ['change', 'input'],
|
||
|
|
setup(_p, { emit }) {
|
||
|
|
const inputRef = ref(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;
|