라이브러리/Vue 3

(Vue2) Ag-grid 선택 row포커스 유지

Ag-grid를 사용하는 프로그램에서 그리드의 row를 사용자가 선택한 후 영역 바깥쪽을 클릭해도 해당 포커스가 남아있도록 하는 기능을 구현해야 했습니다. 이 기능을 수행하기 위해서는 gridApi를 사용해야 하는데 해당 기능을 사용하기 위해서는 gridOptions.api를 할당해주어야 합니다. 저는 vue의 라이프사이클 중 하나인 mounted에서 this.gridApi = this.gridOptions.api; 와 같이 넣어주었습니다. 만약 여러개의 그리드를 사용한다면 변수를 여러 개 만들어서 넣어주면 되는데 this.gridApi = this.필요한그리드의 gridOptions로 넣은 값의 이름.api; 와 같은 형태입니다. 코드로 예를 보자면 ex) template 에서

라이브러리/Vue 2022.09.14

(Vue2) el-input 선택영역(드래그) 문자열 정보 추출

지난 번 메모기능에서 우클릭 시 날짜 정보를 입력하게 해달라는 요청에서 우클릭 시 드롭메뉴를 사용하여 날짜 넣기, 복사, 붙여넣기 기능을 수행할 수 있도록 해달라는 추가요청이 있었습니다. 해당 메모 부분에서는 기본 브라우저의 복사, 붙여넣기 기능을 나타나지 않게 하고있었는데 드롭메뉴를 뜨게해서 복사 붙여넣기 기능도 사용하게 해달라는 내용이었습니다. 1. 복사 붙여넣기 기능을 수행할 때 해당 input 영역을 전체 복사 할 수도있지만 실제 사용자가 복사 붙여넣기 기능을 사용하는 경우 드래그한 글자만 복사하기 때문에 드레그한 값을 가져오는 부분이 필요했습니다. 해당 기능을 찾아보니 document.execCommand('copy')을 사용하면 선택영역에 대한 복사를 수행한다. 라고 하여 해당 함수를 사용해보..

라이브러리/Vue 2022.09.13

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

프로그램 개발 중 아래와 같은 요청이 들어왔습니다. - 메모를 작성하는 기능에서 마우스 우클릭 시 현재 커서 부분에 금일 날짜 정보를 입력해주는 기능개발. 위 기능을 개발하기 위해서는 커서가 어느 위치에 있는지에 대한 정보가 필요했는데 Vue에서 제공하는 ref를 사용하고자하는 El-Input에 부여하여 우클릭 이벤트가 발생 시 Input 요소에 접근하도록 하였는데. 예시코드는 아래와 같습니다 ex) * templete 부분 *method 부분 rightClick(){ const today = this.$moment().format('YYYYMMDD'); inputElement = this.ref.rightEventInput; cursorPos = inputElement.$refs.textarea.sel..

라이브러리/Vue 2022.09.13