<template>
  <el-input
    v-model="inputValue"
    :placeholder="placeholder"
    :disabled="disabled"
    :suffix-icon="suffixIcon"
    :prefix-icon="prefixIcon"
    :type="type"
    :rows="rows"
    :maxlength="maxlength"
    :show-word-limit="showWordLimit"
    :clearable="clearable"
    :prop="prop"
    @input="operaInput"
    @change="change"
    @blur="blur"
    @focus="focus"
  >
    <!-- <template slot="prepend">Http://</template> -->
    <slot></slot>
  </el-input>
</template>

<script>
export default {
  name: "PsInput",
  props: {
    value: {
      type: String,
      default: "",
    },
    placeholder: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    suffixIcon: {
      type: String,
      default: "",
    },
    prefixIcon: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "text",
    },
    rows: {
      type: Number,
      default: 1,
    },
    maxlength: {
      type: String,
      default: "",
    },
    showWordLimit: {
      type: Boolean,
      default: false,
    },
    clearable: {
      type: Boolean,
      default: false,
    },
  },
  //处理v-model语法糖的emit事件
  model: {
    prop: "value",
    event: "handler",
  },
  watch: {
    value: {
      handler(val) {
        this.inputValue = val;
      },
      immediate: true,
    },
  },
  data() {
    return {
      inputValue: "",
      prop: null,
    };
  },
  created() {},
  mounted() {
  },
  methods: {
    operaInput(val) {
      this.$emit("handler", val);
      this.$emit("input", val);
    },
    change(e) {
      this.$emit("change", e);
    },
    blur(e) {
      this.$emit("blur", e);
    },
    focus(e) {
      this.$emit("focus", e);
    },
  },
};
</script>

<style>
</style>
