crm-mobile/components/wk-search-box/wk-search-box.vue

<template>
  <view class="wk-search-box">
    <view class="search-box__body">
      <text class="wk wk-search search-box__body-icon" />
      <input
        ref="searchCore"
        v-model="searchKeyword"
        maxlength="50"
        placeholder-class="wk-placeholder"
        placeholder="请输入关键字"
        type="text"
        class="search-box__body-core">
      <text class="wk wk-close-fill search-box__body-clear" @click="searchKeyword = ''" />
    </view>
  </view>
</template>

<script>
  export default {
    name: 'WkSearchBox',
    data() {
      return {
        searchKeyword: '',
        timer: null
      }
    },
    watch: {
      searchKeyword(val) {
        if (this.timer) {
          clearTimeout(this.timer)
          this.timer = null
        }
        this.timer = setTimeout(() => {
          clearTimeout(this.timer)
          this.timer = null
          this.$emit('search', val)
        }, 800)
      }
    }
  }
</script>

<style scoped lang="scss">
.wk-search-box {
  padding: 20rpx 3%;
  .search-box__body {
    width: 100%;
    height: 66rpx;
    color: #999;
    background-color: white;
    border-radius: 15rpx;
    padding: 0 20rpx;
    @include center;
    .search-box__body-icon {
      font-size: 30rpx;
      color: #aaa;
      margin-right: 15rpx;
    }
    .search-box__body-core {
      flex: 1;
      height: 100%;
      font-size: 28rpx;
      color: $dark;
    }
    .search-box__body-clear {
      font-size: 28rpx;
      color: #cfcfcf;
    }
  }
}
</style>