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

<script>
import RedStar from '../redStar.vue'
export default {
  components: {
    RedStar
  },
  model: {
    prop: 'input',
    event: 'changeinput'
  },
  props: {
    readable: {
      type: Boolean,
      default: false
    },
    redStar: false,
    title: '',
    width: '',
    placeholder: '',
    boxWidth: '',
    input: '',
    size: '',
    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
}
  .readinput{

  }
</style>
<style>
  .readinput.is-disabled .el-input__inner {
      background-color: #fff !important;
      border-color: #E4E7ED;
      color: #303133;
      cursor: not-allowed;
    }

</style>