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

最新推荐文章于 2024-08-08 08:33:47 发布

crper

最新推荐文章于 2024-08-08 08:33:47 发布

阅读量1.4k

点赞数

分类专栏： Vue折腾记 Vue折腾记文章标签：优化 select typeahead vue

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

版权

本文介绍了如何在Vue 2.x中创建一个具备搜索功能的select组件，通过分析效果图和实现逻辑，展示了组件的优化点，如数据过滤、键盘监听和默认选中处理。提供了一份具体的`selectSearch.vue`代码示例，帮助读者理解组件的实现细节。

摘要由CSDN通过智能技术生成

前言

这个功能在网站中也很常见，下拉选择带搜索，基于之前的typeahead组件的基础上完善

效果图

实现逻辑

和typeahead的实现大同小异,就是选择和传递数据的细节有所改善和重置默认值的思路有所变动
indexOf的比对稍微加强了,字母默认全部小写,还有输入的值去除空格

整体来说比typeahead组件更好理解和阅读

你能学到什么?

css样式
组件临时增加的状态的处理
数据过滤
一些常用按键的监听实现(ESC,up,down,Enter),失焦等…
过滤数据的默认选中

代码

selectSearch.vue

<template>
  <div class="select-search">
    <div class="select-header" @click="isExpand=!isExpand">
      <input type="text" autocomplete="off" readonly :placeholder="placeholder" :value="placeholderValue" @keydown.down.prevent="selectChildWidthArrowDown" @keydown.up.prevent="selectChildWidthArrowUp" @keydown.enter="selectChildWidthEnter">
      <i class="fzicon " :class="isExpand?'fz-ad-jiantou1':'fz-ad-jiantou'"></i>
    </div>
    <div class="select-body" v-if="isExpand">
      <input type="text" placeholder="关键字" v-model="searchVal" autocomplete="off" @blur="resetDefaultStatus" @keydown.esc="resetDefaultStatus" @keydown.down.prevent="selectChildWidthArrowDown" @keydown.up.prevent="selectChildWidthArrowUp" @keydown.enter="selectChildWidthEnter">
      <transition name="el-fade-in-linear" mode="out-in">
        <div class="typeahead-filter" v-show="typeaheadData">
          <transition-group tag="ul" name="el-fade-in-linear">
            <li v-for="(item,index) in typeaheadData " :key="index" :class="item.active ? 'active':''" @mouseenter="setActiveClass(index)" @mouseleave="setActiveClass(index)" @click=