<template>
  <div class="inputBox" :style="{width:boxWidth}">
    <div style="white-space: nowrap;" :class="{'ismargin':title}">{{title}}{{title?'：':''}}</div>
    <!--可以自定义 输入框  -->
    <slot>
      <el-input :placeholder="placeholder" :style="{width:width}" v-model="vls" clearable @input="changeinput" :disabled="disabled" @blur="blurInput">
      </el-input>
    </slot>
  </div>
</template>

<script>
export default {
  props: {
    title: '',
    width: '',
    placeholder: '',
    boxWidth: '',
    input: '',
    disabled:false
  },
  model: {
    prop: 'input',
    event: 'changeinput'
  },
  data () {
    return {
      vls: ''
    }
  },
  watch: {  // 利用侦听器 实现自定义组件的双向绑定
    input: {
      handler () {
        this.vls = this.input
      },
      // 强制立即执行回调
      immediate: true

    }
  },
  methods: {
    changeinput () {
      this.$emit('changeinput', this.vls)
    },
    blurInput(){
      this.$emit('submit')
    }
  }

}
</script>

<style scoped>
.inputBox {
  display: flex;
  align-items: center;
  margin: 5PX 10PX 5px 0;
  justify-content: space-between;
}

.ismargin {
  min-width: 68.45px;
  margin-right: 10px
}
</style>