div仿input的使用

需求描述，输入框支持文本输入，以及支持标签在对应节点的插入。

1、首先封装组件，通过父子组件传参的方式进行数据的处理

• 用富文本插件体积略大
• 通过div标签的contenteditable属性来处理成仿input框
• 同时要处理在输入时，光标位置的问题。

  <div
    ref="divInput"
    class="edit-div"
    style="-webkit-user-select: auto"
    :contenteditable="canEdit"
    @blur="onBlur"
    @input="changeText($event)"
    @keyup.space="changeSpace($event)"
    @keyup.enter="changeEnter($event)"
    @paste="onPaste"
    @focus="onFocus"
    placeholder="请输入消息内容"
    slot="title"
    v-html="innerText"
  ></div>
 

 props: {
    value: {
      type: String,
      default: "",
    },
    canEdit: {
      type: Boolean,
      default: false,
    },
  },

data() {
    return {
      innerText: this.value,
      isLocked: false,
    };
  },
  watch: {
    value() {
      if (!this.isLocked && !this.innerHTML) {
        this.innerText = this.value;
      }
    },
  },
  methods: {
    getRefBlur() {
      this.$refs.divInput.blur();
    },
    getRefFocus() {
      this.$refs.divInput.focus();
    },
    onBlur() {
      this.$emit("onblurChange", this.$el.innerHTML);
      this.isLocked = false;
    },
    // 主要用于处理光标得定位问题
    keepLastIndex(obj) {
      if (window.getSelection) {
        obj.focus();
        var range = window.getSelection();
        range.selectAllChildren(obj);
        range.collapseToEnd();
      } else if (document.selection) {
        var range = document.selection.createRange(); //创建选择对象
        // var range = document.body.createTextRange();
        range.moveToElementText(obj); //range定位到obj
        range.collapse(false); //光标移至最后
        range.select();
      }
    },
    changeSpace(e) {
      let that = this;
      setTimeout(() => {
        that.keepLastIndex(e.target);
      }, 30);
      this.$emit("keyupSpace", this.$el.innerHTML);
    },
    changeEnter(e) {
      let that = this;
      setTimeout(() => {
        that.keepLastIndex(e.target);
      }, 30);
      this.$emit("keyupEnter", this.$el.innerHTML);
    },
    changeText($event) {
      let that = this;
      setTimeout(() => {
        that.keepLastIndex($event.target);
      }, 30);
      that.$emit("input", that.$el.innerHTML);
    },
    // 输入框粘贴事件
    onPaste(event) {
      this.$emit("onPaste", event);
    },

2、在父组件中引入，并且传参

 <contenteditable-Input
                    ref="imitate"
                    id="imitate"
                    class="imitate-input imitate-placeholder js-imitate-input"
                    :canEdit="!item.readonlyFlag"
                    @onblurChange="onblurChange($event, item)"
                    @onFocus="getFocus"
                    @onPaste="onPaste"
                    v-html="item.temView"
                    @input="contentedInput($event, item)"
                    @keyupSpace="contentedKeySpace($event, item)"
                    @keyupEnter="contentedKeyEnter($event, item)"
                    @changeKeyup="changeKeyup($event, item)"
                  >
                  </contenteditable-Input>

• 需要注意的一点是，通过div仿的input框它的返回值是innerHTML，是输入框中所有文本字符串，同时在输入的时候可能会引起键盘的闪烁，
• 我的解决方案就是，通过自定义变量进行赋值，在最后保存时将自定义的变量对后端要求的字段进行复制，同时页面中的item.temView是后端要求字段。