<template>
  <div class="search_bar">
    <input
      class="input_search"
      type="text"
      :value="value"
      placeholder="搜索模板"
      @input="emitInput"
      @blur="emitSearch"
      @keyup.enter="$event.target.blur()"
    />
    <i class="iconfont iconfangdajing1 icon_search"></i>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class SearchBar extends Vue {
  @Prop() value!: string;

  public emitSearch() {
    this.$emit("search", this.value.trim());
  }

  public emitInput(e: any) {
    this.$emit("input", e.target.value.trim());
  }
}
</script>

<style scoped>
.search_bar {
  position: relative;
  display: inline-block;
  vertical-align: top;
  /* padding-right: 40px; */
}

.input_search {
  box-sizing: border-box;
  padding-left: 22px;
  width: 240px;
  height: 36px;
  padding-right: 54px;
  background: #fff;
  border-radius: 21px;
  border: none;
  font-size: 14px;
  outline: none;
}

.input_search::placeholder {
  color: #bababa;
}

.icon_search {
  position: absolute;
  right: 20px;
  font-size: 19px;
  top: 8px;
  color: #e0e0e0;
}
</style>
