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

<template>
  <div class="search_box" ref="search_box">
    <van-field :label="label" :class="{ 'van-cell--required': required }">
      <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.asscompanies" :key="index" @click="chooseCustomer(item)">
              {{ item.asscompanies }}
            </div>
            <div class="border_item" v-show="computedCustomerList == 0">无结果</div>
          </div>
        </transition>
      </template>
    </van-field>
  </div>
</template>
<script>
import { Field } from 'vant'
import { getcompany } from '@/api/ebiz/goodStart'
export default {
  name: 'SearchField',
  props: {
    label: {
      type: String,
      default: '标题',
    },
    placeholder: {
      type: String,
      default: '请输入内容',
    },
    value: {
      type: String
    },
    required: {
      type: Boolean,
      default: true
    },
    isAsync: {
      type: Boolean,
      default: false
    }
  },
  components: {
    [Field.name]: Field,
  },
  data() {
    return {
      showCustomer: false,
      customerList: [],
    }
  },
  computed: {
    computedCustomerList() {
      let searchStr = this.value.trim()
      return this.customerList.filter((item) => {
        return item.asscompanies.includes(searchStr)
      })
    },
    searchContent() {
      return this.value
    },
  },
  async created() {
    const param = { operateType: 'insure_company' }
    const result = await getcompany(param)
    if (result.result === '0') {
      this.customerList = result.content
      this.$emit('workcompanys', result.content)
    } else {
      this.$toast(result.resultMessage)
    }
  },
  methods: {
    onInput(event) {
      this.$emit('input', event.target.value)
    },
    onInputBlur() {
      this.showCustomer = false
      // if (this.isAsync) {
      //   this.$emit('input', '')
      // } else {
      this.$emit('input', this.value)
      // }
    },
    onInputFocus() {
      if (this.isAsync) {
        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.asscompanies)
      this.showCustomer = false
    },
  },
}
</script>
<style lang="scss" scoped>
.border_item {
  box-sizing: content-box;
  padding: 5px;
  min-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>