Vue3+ElementPlus实例_select选择器(不连续搜索)

1.开发需求

在各大UI框架的select选择器中,在搜索时都是输入连续的搜索内容,比如“app-store”选项,你要输入“app-xxx”,才能匹配这个选择,要是想输入“a-s”这种不连续的匹配方式,就实现不了,用户体验较差,所以就开发了一个不连续搜索的select选择器,并带有输入内容的高亮提示。

2.实现演示

下面是我完成后的演示,请看
Vue3+ElementPlus实例_select选择器(不连续搜索)_第1张图片

3.主要难点

        1.如何不连续匹配选项

        这里我们借用了一下第三方的api库——sdm2

Vue3+ElementPlus实例_select选择器(不连续搜索)_第2张图片

        2.匹配的代码逻辑  Vue3+ElementPlus实例_select选择器(不连续搜索)_第3张图片

 我这里做成了通用组件的模式:

点个赞呗~

4.代码

        子组件代码




父组件代码:





点个赞呗~

你可能感兴趣的:(#,vue,+,element-ui实例,前端,vue3,typescript,elementPlus)