Vue 2.x折腾记 - (3)写一个不大靠谱的typeahead组件

最新推荐文章于 2021-01-14 04:58:14 发布

VIP文章 crper

最新推荐文章于 2021-01-14 04:58:14 发布

阅读量1k

点赞数

分类专栏： Vue折腾记 Vue折腾记文章标签： vue2 typeahead 模糊搜索模糊搜索实现

本文链接：https://blog.csdn.net/crper/article/details/75530013

版权

前言

typeahead在网站中的应用很多…今天跟着我来写一个不大靠谱的typeahead;

你能学到什么?

自定义事件
遍历的思想
功能细节的考虑

一切都挺不靠谱的,可完善的地方很多.废话不多说,看效果图

效果图

有哪些功能点?

粗糙的模糊搜索 - 借助indexOf
ESC和blur事件清除输入框,没有找到匹配的情况下
Enter默认在找到只剩下一个情况下选中
方向盘的上下(已经阻止光标的移动)选中子项,回车选中
鼠标点击选择子项
搜索框清空情况下默认不触发自定义事件值的返回
鼠标移动+键盘方向键移动位置的同步
placeholder及遍历数据data支持外部传入,也就是绑定props;前者字符串,后者数组对象

代码

typeahead.vue

<template>
  <div class="typeahead">
    <div class="typeahead-header">
      <input type="text" v-model="searchVal" @input="filterList(searchVal)" ref="input" :placeholder="placeholder" @keydown.down.prevent="selectChildWidthArrowDown" @keydown.up.prevent="selectChildWidthArrowUp" @keydown.enter="selectChildWidthEnter" @blur="ifNotFoundClear" @keydown.esc="ifNotFoundClear" autocomplete="off">
    </div>
    <transition name="el-fade-in-linear" mode="out-in">
      <div class="typeahead-content" v-show="searchVal && searchVal.length">
        <transition-group tag="ul" name="el-fade-in-linear" v-show="searchList && searchList.length > 0  && isExpand ">
          <li v-for="(item,