div仿input的使用

Posted 2022-01-31 理小理...

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

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是后端要求字段。