vue 自定义下拉搜索框

vue 自定义下拉搜索框

直接上图看效果

上代码

<template>
  <div>
    <div style="margin-top: 15px; width: 80%">
      <el-input
        placeholder="请输入内容"
        v-model="searchValue"
        class="input-with-select"
        clearable
        ref="input"
        @focus="onInputFocus"
        @blur="onInputBlur"
        @input="onInputFocus"
      >
        <el-select v-model="select" slot="prepend" placeholder="热舞广泛的给">
          <el-option label="餐厅名" value="1"></el-option>
          <el-option label="订单号" value="2"></el-option>
          <el-option label="用户电话" value="3"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search">搜索</el-button>
      </el-input>
      <div class="selset_wrap" v-if="selsetWrapShow">
        <div class="selset_wrap_title">历史记录</div>
        <div
          class="selset_wrap_list"
          v-for="(item, index) in inputData"
          :key="index"
        >
          <div class="selset_wrap_list_list">
            <div
              class="selset_wrap_list_list_name"
              @mousedown.prevent="searchValueFn(item)"
            >
              {{ item.name }}
            </div>
            <div
              class="selset_wrap_list_list_remove"
              @mousedown.prevent="removeFn(index)"
            >
              <i class="el-icon-delete"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchValue: "",
      select: "餐厅名",
      restaurants: [],
      state: "",
      timeout: null,
      selsetWrapShow: false,
      inputData: [
        { name: "在知识的山峰上登得越高，眼前的景色越壮阔", id: "1" },
        { name: "万事皆由人的意志创造。", id: "2" },
        { name: "万般皆是命,半点不由人", id: "3" },
        { name: "身外障碍事小，心中障碍事大。", id: "4" },
        {
          name: "实力的来源不是胜利。唯有奋斗才能增强实力。当你历经苦难而不气馁，那就是实力。唯有奋斗才能增强实力。当你历经苦难而不气馁，那就是实力唯有奋斗才能增强实力。当你历经苦难而不气馁，那就是实力",
          id: "5",
        },
        {
          name: "实力的来源不是胜利。唯有奋斗才能增强实力。当你历经苦难而不气馁，那就是实力。",
          id: "6",
        },
      ],
    };
  },
  methods: {
    onInputFocus() {
      this.selsetWrapShow = true;
      console.log("获取焦点");
    },
    onInputBlur() {
      this.selsetWrapShow = false;
      console.log("失去焦点");
    },
    searchValueFn(val) {
      this.selsetWrapShow = false;
      this.searchValue = val.name;
      this.$refs["input"].blur();
      console.log(this.searchValue);
    },
    removeFn(index) {
      this.selsetWrapShow = true;
      console.log("删除");
      this.inputData.splice(index, 1);
    },
  },
  mounted() {},
};
</script>

<style>
.selset_wrap {
  /* border: 1px solid; */
  margin-top: 5px;
  background: #ffffff;
  box-shadow: 3px 3px 3px 3px #999999;
}
.selset_wrap_title {
  color: #999999;
  height: 32px;
  width: 96%;
  line-height: 32px;
  margin: 0 auto;
  font-size: 12px;
}
.el-input-group__prepend {
  width: 60px;
}

.selset_wrap_list {
  /* height: 32px; */
  width: 100%;
  font-size: 12px;
  cursor: pointer;
}
.selset_wrap_list:hover {
  color: #fe774e;
  background: #f5f5f5;
}
.selset_wrap_list_list {
  width: 96%;
  line-height: 32px;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.selset_wrap_list_list_name {
  width: 97%;
}
.selset_wrap_list_list_remove {
  width: 2%;
}
</style>```