Vue 手写组件之实现一个可显示图片的自定义远程搜索框

本文主要是介绍Vue 手写组件之实现一个可显示图片的自定义远程搜索框，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

在实际的vue项目开发中，一般与element-ui搭配使用的比较多。

如下图，这个是element-ui官网为我们提供的远程搜索组件，它能够在我们输入时，根据输入内容实时从远程服务器获取内容并显示在下拉框中。

现在问题来了，我们有这样一个需求：下拉列表中不仅仅能展示文字内容，也要显示相应的文字说明图片

Element-ui列表中对应的内容显然 是搜索到的内容的value字段，是一个字符串，是无法满足我们放入图片的需求的。

这时就需要我们自己去封装一个自定义的能显示图片的远程搜索框了。

原理其实很简单：

1. 监听文本框的输入事件，并且为其添加防抖（性能上的优化，使得停止输入一段时间后再去调用搜索函数）
2. 将搜索到的内容放入一个无序列表中，在输入框下方显示
3. 为列表设置最大高度(否则将根据搜索到的内容个数无限向下延长)，超过这个高度则加滚动条
4. 点击其他区域或者选中某一项时列表框隐藏
5. 样式，每项加边框，下面加阴影，每项鼠标移动进入时颜色置灰，移除时恢复

最终实现效果如图：

代码如下：

// 封了一个从服务器远程获取搜索内容的输入框，比autocompleteuole多了在列表中显示图片的功能
<template>
  <div class="container">
    <el-input
      placeholder="输入单词或ID"
      v-model="obj[name]"
      @input="whileInput"
      @blur="isShow=false"
      clearable
      style="width: 200px"
    >
    </el-input>
    <div class="selectLIst" v-if="isShow==true">
      <div v-for="item in cardResult" :key="item.id" @click="handleSelect(item)" class="item">
        <span>{{item.value}}</span>
        ![](item.picUrl)
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'RemoteSearch',
  props: {
    obj: {
      type: Object
    },
    name: {
      type: String
    },

  },
  data() {
    return {
      timer: null,   // 这里放外面其实不安全，容易被篡改
      cardResult: [],
      isShow: false
    }
  },
  methods: {
    whileInput() {
      this.isShow = true
      // 防抖
      if(this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(()=>{
        this.fetchContent()
      },800)
    },
    async fetchContent() {
      this.cardResult = []
      let queryObj = {type:1}
      // 判断 queryString是数字还是单词
      if(!isNaN(Number(this.obj[this.name]))) {
        queryObj.id = this.obj[this.name]
      } else {
        queryObj.word = this.obj[this.name]
      }
      // 这里写你要请求的地址
      const result = await this.$ajax.post(
        `/admin/incentive/queryRewardDetail`,queryObj
      )
      if (result.data.data) {
        const cardList = result.data.data
        cardList.forEach(e => {
          this.cardResult.push({value: e.id+' '+e.word, picUrl: e.wordPic, id: e.id})
        });
      }
    },
    handleSelect(item) {
      this.obj[this.name] = item.id+''   // 选中后给对应项赋值
      this.isShow = false   // 选中某一项后隐藏下拉列表框
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  position: absolute;
  .selectLIst {
    position: relative;
    z-index: 10;
    background-color: #FFFFFF;
    box-shadow: 0 4px 3px #C5C5C5;
    max-height: 200px;
    overflow: auto;
    .item {
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .item:hover {
      background-color: #EFEFEF;
    }
  }
  ul {
    list-style: none   // 隐藏无序列表前面的小圆点
  }
}
</style>

直接在需要的页面引入并使用：

// item: { word: '' }
// 假如你要将input框与item的word属性绑定，则
<RemoteSearch :obj="item" name='word'/>

这篇关于Vue 手写组件之实现一个可显示图片的自定义远程搜索框的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！