<template>
  <el-input
    v-bind="$attrs"
    :value="value"
    :disabled="disabled"
    autocomplete="off"
    :style="{ width: '100%' }"
    @input="updateVal($event)"
    v-on="listeners"
    resize="none"
    :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>
export default {
  name: "CmsFormInput",
  inheritAttrs: false,
  props: {
    // //此处一定要用value
    value: {
      type: [String, Number, Boolean, Array],
      default: () => {
        return "";
      },
    },
    disabled: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
  },
  data() {
    let { ...listeners } = this.$listeners;
    return {
      listeners: listeners,
    };
  },
  computed: {
    size() {
      return this.$store.getters["setting/getButtonSize"];
    },
  },
  methods: {
    updateVal(val) {
      this.$emit("input", val); // 通过事件实现组件属性到父组件的传递
    },
  },
};
</script>
<style lang="less">
.el-item .el-form-item__content {
  flex: 1 !important;
}
</style>
