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

<script>
export default {
  model: {
    prop: 'input',
    event: 'changeinput'
  },
  props: {
    title: '',
    width: '',
    placeholder: '',
    boxWidth: '',
    input: '',
    disabled: false
  },
  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>