二次封装input文本输入框及使用（因为input框设置为文本的时候无法与清楚一起使用）

输入框组件

<template>
  <div class="textInput">
    <el-input
      :maxlength="maxlength"
      show-word-limit
      :rows="rows"
      :placeholder="placeholder"
      v-model="localValue"
      @change="inputChange"
      type="textarea"
      @focus="focusMethod" />
    <i v-show="clearable && localValue" class="clearButton el-input__icon el-icon-circle-close el-input__clear" @click.prevent="localValue=''" />
  </div>
</template>

<script>
export default {
  props: {
    values: {
      type: String,
      default: function () {
        return "";
      }
    },
    // 最大输入字数
    maxlength: {
      type: Number,
      default: null
    },
    // 提示文字
    placeholder: {
      type: String,
      default: ""
    },
    // 清楚按钮
    clearable: {
      type: Boolean,
      default: false
    },
    // 文本高度行
    rows: {
      type: Number,
      default: 1
    },
    // 输入框值改变
    inputChange: {
      type: Function,
      default: null
    },
    // 聚焦事件
    focusMethod: {
      type: Function,
      default: null
    }

    // 失焦事件
    // blurMethod: {
    //   type: Function,
    //   default: null
    // }
  },

  computed: {
    localValue: {
      get() {
        return this.values;
      },
      set(value) {
        this.$emit("input", value);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.textInput {
  position: relative;

  .clearButton {
    position: absolute;
    border-radius: 5px;
    right: 3px;
    z-index: 2;
    border: none;
    top: -3px;
    height: 40px;
    cursor: pointer;
    color: #ccc;
    transform: translateX(2px);
  }

  .clearButton:hover {
    color: #878d99;
  }
}
</style>

组件调用

1.注册

 components: {
    InputText: () => import("@/views/components/taskDetails/input-text.vue") //文本输入组件
  }

2.使用

      <!-- 文本输入组件 -->
      <InputText
        :maxlength="maxnum"
        :rows="row"
        :placeholder="placeholder"
        v-model="values"
        :values="values"
        :clearable="true"
        :input-change="inputChangeMethod"
        :focusMethod="focusMethod" />

  data() {
    return {
      maxnum: 2500,
      row: 1,
      values: "",
      placeholder: "请输入内容",
    };
  },

  methods: {
    // 聚焦时的操作
    focusMethod() {
      //判断显示操作按钮
      if (this.CancelBtn == false) {
        this.showBtn = true;
      }
      if (this.showBtn == true) {
        this.CancelBtn == true;
      }

      this.CancelBtn = true; //显示取消按钮
      this.row = 4;

      //计算滚动条高度
      this.$nextTick(() => {
        const el = this.$refs.discussBody;
        // console.log(el.scrollHeight, el.clientHeight);
        el.scrollTop = el.scrollHeight - el.clientHeight;
      });
    },

    // 拿到输入框的值
    inputChangeMethod() {
      this.news = this.values;
    },
    }