(Vue2) El-Input 마우스 우클릭 문자열 삽입 기능

프로그램 개발 중 아래와 같은 요청이 들어왔습니다.

 

- 메모를 작성하는 기능에서 마우스 우클릭 시 현재 커서 부분에 금일 날짜 정보를 입력해주는 기능개발.

 

위 기능을 개발하기 위해서는 커서가 어느 위치에 있는지에 대한 정보가 필요했는데 

Vue에서 제공하는 ref를 사용하고자하는 El-Input에 부여하여 우클릭 이벤트가 발생 시 

Input  요소에 접근하도록 하였는데.

 

예시코드는 아래와 같습니다

 

ex) 

 

* templete 부분 

 

<el-input type="textarea" ref="rightEventInput" @mousedown.right ="rightClick()" ></el-input>

 

*method 부분

 

rightClick(){

 

  const today = this.$moment().format('YYYYMMDD');

  inputElement = this.ref.rightEventInput; 

  cursorPos = inputElement.$refs.textarea.selectionStart;

 

  this.날짜를 넣을공간의 변수.substring(0, cousorPos) + today +   this.날짜를 넣을공간의 변수.substring(cousorPos);

 

}

 

 

위 Method 부분에서 커서 정보를 가져올 때 inputElement 변수를 따로 만들어서 분리시킨 이유는

El-input은 요소 안에 요소가 숨어있어 한번에 ref를 통해 접근하는 것이 불가능 하여 
input의 ref를 가져오고 그후에 해당 input 하위의 textarea에 접근하여 selectionStart

즉 커서의 위치를 가져오게 되었습니다.