ebiz-h5/src/components/common/SearchField.vue

<template>
  <div class="search_box" ref="search_box">
    <van-field :label="label">
      <template #input>
        <input
          style="width: 100%; border: none;"
          type="text"
          :placeholder="placeholder"
          :value="searchContent"
          @click="onInputFocus"
          @blur="onInputBlur"
          @input="onInput"
        />
        <transition name="slide-in">
          <div ref="picker" class="content_info" v-show="showCustomer">
            <div class="border_item" v-for="(item, index) in computedCustomerList" :value="item.label" :key="index" @click="chooseCustomer(item)">
              {{ item.label }}
            </div>
            <div class="border_item" v-show="computedCustomerList == 0">
              无结果
            </div>
          </div>
        </transition>
      </template>
    </van-field>
  </div>
</template>
<script>
import { Field } from 'vant'
import { getTreasureMenus } from '@/api/ebiz/goodStart'
export default {
  name: 'SearchField',
  props: {
    label: {
      type: String,
      default: '标题'
    },
    placeholder: {
      type: String,
      default: '请输入内容'
    },
    value: {
      type: String
    }
  },
  components: {
    [Field.name]: Field
  },
  data() {
    return {
      showCustomer: false,
      customerList: []
    }
  },
  computed: {
    computedCustomerList() {
      let searchStr = this.value.trim()
      return this.customerList.filter(item => {
        return item.label.includes(searchStr)
      })
    },
    searchContent() {
      return this.value
    }
  },
  async created() {
    const param = { operateType: 'insure_company' }
    const result = await getTreasureMenus(param)
    if (result.result === '0') {
      this.customerList = result.content
    } else {
      this.$toast(result.resultMessage)
    }
  },
  methods: {
    onInput(event) {
      this.$emit('input', event.target.value)
    },
    onInputBlur() {
      this.showCustomer = false
      this.$emit('input', this.value)
    },
    onInputFocus() {
      this.showCustomer = true
      setTimeout(() => {
        this.$refs.picker.scrollIntoView()
      }, 300)
      this.$nextTick(() => {
        this.$refs.picker.scrollTo({
          top: 0,
          behavior: 'smooth'
        })
      })
    },
    chooseCustomer(item) {
      this.$emit('input', item.label)
      this.showCustomer = false
    }
  }
}
</script>
<style lang="scss" scoped>
.border_item {
  box-sizing: content-box;
  padding: 5px;
  height: 20px;
  line-height: 20px;
  color: #666;
  text-align: center;
  font-size: 12px;
  overflow: hidden;
}

.content_info::-webkit-scrollbar {
  display: none;
}

.search_box {
  position: relative;
}
.content_info {
  position: absolute;
  width: 100%;
  background: white;
  border-radius: 0 0 6px 6px;
  top: 34px;
  max-height: 150px;
  overflow: scroll;
  box-shadow: 0 1px 1px 1px #eee;
  z-index: 10;
}

/deep/ .van-cell {
  overflow: visible;
}

/deep/ .van-cell__value {
  overflow: visible;
}

.slide-in-enter,
.slide-in-leave-to {
  opacity: 0;
  position: absolute;
  top: 44px;
}

.slide-in-leave,
.slide-in-enter-to {
  opacity: 1;
  position: absolute;
  top: 34px;
}

.slide-in-enter-active,
.slide-in-leave-active {
  transition: all ease 0.3s;
}
</style>