vue antDesign 文本框 把原回车换行 改成 alt+回车 换行 window（alt）和macos（option）同步

Posted 2022-12-02 晚星@

template

 <a-input placeholder="Basic usage"
                   :rows="4"
                   type="textarea"
                   ref="textDom"
                   v-model="message"
                   @blur="handleInputBlur"
                   @keydown.enter="handleEnter"
                   @keydown.alt.enter="handleAltEnter" />

script

data()
	return
		  blurIndex: undefined,
	      message: undefined,
	      flag: false,
	      isAltEnter: false
	
,
methods:
	 handleInputBlur (e) 
	      if (this.flag) 
	        this.blurIndex = e.srcElement.selectionStart;
	        // 把输入的换行符插入到你光标的位置
	        this.message = this.message.substring(0, this.blurIndex) + '\\n' + this.message.substring(this.blurIndex, this.message
	          .length)
	        // 重新获取光标
	        e.srcElement.focus()
	        this.isAltEnter = true // 设置阻塞状态，因为enter事件仍然会触发
	      
	      this.flag = false
	    ,
    handleAltEnter (e) 
      this.flag = true
      // 失去光标触发事件
      e.srcElement.blur()
    ,
    handleEnter (e) 
      e.preventDefault() // 阻止默认行为
      setTimeout(() => 
        if (this.isAltEnter)  //如果为阻塞状态就反转状态
          this.isAltEnter = false
        else
          // 回车你想做的事情
        
      , 100)
    ,