0 环境
1 参考文档
2 代码提供
之前是在ToolBarRight.vue界面中，现在找到SearchMenu点进去，具体代码如下：
3 正文
先从SearchMenu.vue的第3行开始看，是一个图标，并且给它加了click事件，找到对应的handleOpen实现的位置(第48-55行)，它主要做了弹出框，然后光标定位到输入框的位置，nextTick+setTimeout等待当前执行栈中的同步任务执行完毕后再执行。
现在看第4行，v-model 是否显示 Dialog，destroy-on-close 当关闭 Dialog 时，销毁其中的元素，:modal为false时，对话框之外的部分仍然可以互动，:show-close="false"不显示关闭按钮，fullscreen全屏，@click="closeSearch"这里只是关闭搜索窗的操作。
现在从第5行代码开始看，配合自动补全输入框文档内容看，v-model绑定个值，这里是ref('')，value-key键名，placeholder没啥好说的，:fetch-suggestions="searchMenuList"：用于搜索的方法。当输入框中的内容改变时，该方法会被触发，@select="handleClickMenu"主要是点击菜单跳转，@click.stop是为了防止触发到el-dialog。
第35-37行，定义了路由实例，然后在通过authStore拿到菜单权限列表的数据，它是一维数组。在searchMenuList是我们输入的内容，然后cb是回调函数。首次光标点进去时，queryString是空字符串，menuList.value的值，被cb回调。当我输入值进去时，queryString为true时，你会感觉menuList.value.filter(filterNodeMethod(queryString))写的是不是不对，并且filterNodeMethod还是闭包，其实真正的写法是(item)=>filterNodeMethod(queryString)(item)，只是可以这么简写。filterNodeMethod实现的比较简单，就是path或者meta.title有一个匹配就可以返回为true了。
最终的值，会塞到下面的弹框。具体看下图。
再看handleClickMenu的实现，searchMenu为空，判断是否是链接，是的话，跳转过去，否则路由跳转，然后关闭搜索窗。
4 总结
假如不看文档的话，会有很多忽略的地方，导致代码读起来不协调，大意就是点击搜索框图标，弹出一个输入框+下拉框初始化的内容，当我输入path或者meta标题，自动帮我们过滤，然后就是选中某个行时，输入框内容清空，跳转链接或者路由，最后关闭搜索框。
