selecto
selecto copied to clipboard
daybrush
:keyContainer="document" 를 추가하면 에러가 나서 키이벤트를 사용할 수 없습니다
Environments
- Framework name: vue3
- Framework version: ^3.2.38
- Component name: vue3-selecto
- Component version: ^1.8.7
Description
SPA방식으로 typescript를 사용해서 개발하고 있습니다. vue3-selecto에 Key 이벤트를 사용하고 싶은데, 예제에 있는 :keyContainer="document"를 추가하면 "[vue-tsc] Property 'document' does not exist on type 'ProductItems'." 에러 메세지가 나오고 이벤트 바인딩도 안되는데 어떻게 해결해야할까요?
원하는 동작은 다음과 같습니다. vue3-selecto를 통해 드래그 또는 클릭해서 선택한 영역들을 esc키를 누르면 모두 선택 해지하고 싶습니다.
감사합니다.
Sample Source
<vue-selecto
ref="dragSelecto"
dragContainer=".drag-table"
:keyContainer="document"
:selectableTargets='[".draggable-area .uid-td"]'
:hitRate='10'
:selectByClick='true'
:selectFromInside='true'
:toggleContinueSelect='["shift"]'
@select="selectUids"
@keyup="test"
/>
<table class='drag-container draggable-area'>
...//
<tbody>
<tr @click="testClick">
<td class='test-id'></td>
</tr>
</tbody>
</table>
@Chloe-Bang
안녕하세요.
template에서는 document, window 변수를 따로 등록해줘야 합니다. 또한 document, window 같은 경우 node 환경에서 존재하지 않기 때문에 다음과 같이 사용해보시길 바랍니다.
return {
document: typeof document !== "undefiend" && document
window: typeof window !== "undefiend" && window,
};
답변 감사합니다!! 위 문제는 해결했으나 @keyup="" 이벤트를 사용해보니 키를 눌렀을때 아무것도 감지하지 못했습니다. :toggleContinueSelect 의 설정된 키를 눌렀을 때만 keyup 이벤트에 들어오길래 keycode값으로 구분해서 처리하려고 하니 keycode 값이 없어서 제가 원하는 기능을 구현할 수 없어 한가지 더 여쭤봅니다.
선택된 영역을 모두 선택 해제하고 싶을 때 컨테이너 영역 클릭 말고 이와 똑같이 동작하는 리셋할 수 있는 메소드가 있나요?
감사합니다 :)
@Chloe-Bang
selecto에는 keycon 모듈이 내장되어 있습니다.
keycon 모듈 또는 vue3용 keycon 을 사용해보시길 바랍니다.
- keycon: https://www.npmjs.com/package/keycon
- vue3 keycon: https://www.npmjs.com/package/vue-keycon
또한 전체 해제하고 싶다면
.setSelectedTargets 를 사용하시길 바랍니다.
결과값이 onSelect 파라미터와 유사하지만 이벤트를 발생시키지 않기 때문에 수동으로 처리해줘야 합니다.
const { added, removed } = selecto.setSelectedTargets(targets);