背景:
平时使用时,没太注意这个组件的问题,直到,有一个需求要求做级联,也就是,先选类型,再根据类型模糊搜索合作集团,当切换了类型后,合作集团带入了上一次级联出的结果。
如果用户不知道这个要重新搜索,很容易选错,导致数据关联错误。
方案:
1. 给组件添加blur离焦事件,2. 给组件添加ref
可以参照截图,我使用的是vue3,vue2道理都是一样的。
2. 定义ref:
const blocShortNameModelRef = ref(null);
3. 清空上次搜索记录
const handleBlur = () => {
blocShortNameModelRef.value.suggestions = [];
blocShortNameModelRef.value.highlightedIndex = -1;
};