Раньше я сталкивался с требованием, и мне нужно было выполнить некоторую обработку после того, как содержимое компонента DatePicker было очищено, но после прочтения документации я обнаружил, что DatePicker не предоставляет четкого события, такого как компоненты ввода или выбора, и не может напрямую отслеживать очистку действие. Я не сдался, поэтому пошел посмотреть исходный код компонента DatePicker (element-ui версии 2.15.6) и обнаружил, что при нажатии кнопки очистки будет выполняться следующий метод:
handleClickIcon(event) {
if (this.readonly || this.pickerDisabled) return;
if (this.showClose) {
this.valueOnOpen = this.value;
event.stopPropagation();
this.emitInput(null);
this.emitChange(null);
this.showClose = false;
if (this.picker && typeof this.picker.handleClear === 'function') {
this.picker.handleClear();
}
} else {
this.pickerVisible = !this.pickerVisible;
}
},
handleClickIconВ методе запускаются только события ввода и изменения, события очистки нет. Ну четкий мониторинг реализовать не получается, а спрос убивается (как же так). . .
Затем я подумал о $refsдоступе к внутренним методам компонента через, например
// 父组件中
this.$refs.datePicker.focus();
Затем мне просто нужно handleClickIconпереназначить значение, чтобы оно реализовало нужную мне функцию.
Чтобы не влиять на handleClickIconисходное поведение, я добавил только строку кода для запуска события очистки на исходной основе.
<script>
/**
* 重写点击清空的事件处理函数
*/
const handleClickIcon = function (event) {
if (this.readonly || this.pickerDisabled) return;
if (this.showClose) {
this.valueOnOpen = this.value;
event.stopPropagation();
// 添加的下面这行代码，以在清空时通知父组件
this.$emit('clear');
this.emitInput(null);
this.emitChange(null);
this.showClose = false;
if (this.picker && typeof this.picker.handleClear === 'function') {
this.picker.handleClear();
}
} else {
this.pickerVisible = !this.pickerVisible;
}
};
export default {
mounted () {
let datePicker = this.$refs.datePicker;
datePicker.handleClickIcon = handleClickIcon.bind(datePicker);
},
}
</script>
Следует отметить, что новый handleClickIconнельзя methodsзаявлять в опции, иначе замененный handleClickIconне будет работать так, как ожидается.
Более важно отметить, что вышеперечисленные методы не рекомендуются при реальной разработке . Изменение поведения компонента сделало бы документацию Element бессмысленной, и было бы интересно, если бы при обновлении Element изменил реализацию этого метода.