antd a-input文本域显示输入封装

需求： 项目中有个a-input框，填写的内容过多,直接使用会展示不全，影响体验。
解决： 利用a-input与a-textarea切换展示。

须引入loadsh 使用方法isArray与isNil 可自己编写函数判断则不用引入

<template>
  <div class="textarea-box">
    <a-textarea
      ref="textarea"
      class="textarea"
      v-bind="$attrs"
      v-model="innerValue"
      v-show="textareaBool"
      @blur="textareaBool = false"
      :style="{ width: `${width}` }"
      :auto-size="{ minRows: 3, maxRows: 5 }"
      :placeholder="placeholder"
    />
    <a-input
      v-bind="$attrs"
      v-show="!textareaBool"
      v-model="innerValue"
      allowClear
      @change="onChange"
      @focus="handleInpClick"
      :style="{ width: `${width}` }"
      :placeholder="placeholder"
    />
  </div>
</template>

<script>
export default {
  name: "multInput",
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: [String, Array],
    width: {
      type: [Number, String],
      default: () => "100%",
    },
    placeholder: {
      type: String,
      default: "请输入，多值以英文,;或换行符分隔",
    },
    autoFormatted: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      textareaBool: false,
      inInnerChange: false,
      innerValue: this.value,
      formattedValue: _.isArray(this.value) ? this.value : [this.value],
    };
  },
  watch: {
    // 监听父组件动态修改value
    value(val) {
      if (this.inInnerChange) {
        this.inInnerChange = false;
      } else {
        this.setValue(val);
      }
    },
    innerValue(val) {
      this.inInnerChange = true;
      this.onChange();
    },
  },
  methods: {
    // 点击聚焦
    handleInpClick() {
      this.textareaBool = true;
      this.$nextTick(() => {
        this.$refs.textarea.focus();
      });
    },
    // 父组件动态修改value
    setValue(val) {
      if (val === this.innerValue) {
        this.onChange();
      } else {
        if (_.isArray(val)) {
          this.innerValue = val.join("\n");
        } else {
          this.innerValue = _.isNil(val) ? "" : `${val}`;
        }
      }
    },
    // 通知变化
    onChange() {
      const val = this.innerValue;
      this.formattedValue = val
        ? val.replace(/^[,;\s]*|[,;\s]*$/g, "").split(/[,;\s]+/)
        : [];
      let changeValue;
      if (this.autoFormatted) {
        changeValue = this.formattedValue;
      } else {
        changeValue = val;
      }
      this.$emit("change", changeValue);
    },
  },
};
</script>

<style lang="less" scoped>
.textarea-box {
  position: relative;
  min-width: 250px;
  min-height: 40px;

  .textarea {
    position: absolute;
    top: 4px;
    z-index: 10;
  }
}
</style>

使用例子

<template>
    <mult-input
      width='200px'
      v-model="ip"
      placeholder="请输入"
      @change='handleChange'
    />
</template>
 
<script>
export default {
  components: {
    mult-input: () => import("./multInput"),
  },
  data() {
    return {
      ip: undefined,
    };
  },
  methods: {
    handleChange(value){
      console.log(value);
    }
  },
};
</script>