web/apps/bigmember_pc/src/components/input/BaseInput.vue

<template>
  <div class="search-input">
    <el-input
      :placeholder="placeholder"
      :value="value"
      @input="onInput($event)"
      @blur="$emit('onBlur')"
      @focus="$emit('onFocus')"
      @clear="$emit('onClear', value)"
      clearable
    >
    </el-input>
  </div>
</template>

<script>
import { Input } from 'element-ui'

export default {
  name: 'Search-Input',
  props: {
    placeholder: String,
    value: String
  },
  components: {
    [Input.name]: Input
  },
  model: {
    prop: 'value',
    event: 'onInput'
  },
  data() {
    return {}
  },
  methods: {
    onInput(e) {
      this.$emit('onInput', e)
    }
  }
}
</script>

<style scoped lang="scss">
.search-input {
  position: relative;
  width: 640px;
  @include diy-icon('search-white', 24);

  ::v-deep .el-input__inner {
    border-radius: 4px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    padding: 0 16px;
    color: #1d1d1d;

    font-size: 14px;
    line-height: 24px;
    height: 36px;
  }

  ::v-deep .el-input-group__append {
    height: 42px;
    box-sizing: border-box;
    text-align: center;
    border: none;
    border-radius: 0px 22px 22px 0px;
    background: #2cb7ca;

    .el-button {
      padding: 8px 19px;
      margin-top: -4px;
    }
  }
}
</style>