<template>
  <el-input
    :disabled="disabled"
    :modelValue="modelValue"
    @update:model-value="handleChange"
    v-bind="$attrs"
    :type="type"
  >
    <!--自定义组件的插槽-->
    <!-- <template #prepend>Http://</template> -->
    <template #append>{{ appendLabel }}</template>
  </el-input>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'FcInput',
  props: {
    //获取表单数据
    modelValue: String,
    //支持表单禁用功能
    disabled: Boolean,
    appendLabel: String,
    type: {
      type: String,
      default: () => 'number'
    }
  },
  emits: ['update:modelValue', 'change'],
  data() {
    return {}
  },
  methods: {
    //更新表单数据
    handleChange(val) {
      this.$emit('update:modelValue', val)
      //触发 change 事件
      this.$emit('change', val)
    }
  }
})
</script>
