<template>
  <el-input
    v-bind="$attrs"
    autocomplete="off"
    @input="updateVal($event)"
    v-on="listeners"
    resize="none"
    :value="value"
    :disabled="disabled"
    :size="size"
    :style="{ width: '100%' }"
    :clearable="true"
  >
    <template slot="prepend">
      <slot name="prepend"></slot>
    </template>
    <template slot="append">
      <slot name="append"></slot>
    </template>
    <template slot="suffix">
      <slot name="suffix"></slot>
    </template>
    <template slot="prefix">
      <slot name="prefix"></slot>
    </template>
  </el-input>
</template>

<script>
import { componentConfig } from '@/comps/mixin/component-config'

export default {
  name: 'CmsFormInput',
  mixins: [componentConfig],
  inheritAttrs: false,
  props: {
    // //此处一定要用value
    value: {
      type: [String, Number, Array, Boolean],
      default: () => {
        return ''
      },
    },
    disabled: {
      type: Boolean,
      default: () => {
        return false
      },
    },
  },
  data () {
    let { ...listeners } = this.$listeners
    return {
      listeners: listeners,
    }
  },
  methods: {
    updateVal (val) {
      this.$emit('input', val) // 通过事件实现组件属性到父组件的传递
    },
  },
}
</script>
<style lang="less">
.el-item .el-form-item__content {
  flex: 1 !important;
}
</style>
