[Vue.js] vue2에서 vue-simple-context-menu 사용

 

 

배경

설치 방법과 예제는 아래 깃헙을 참고하였다.

GitHub - johndatserakis/vue-simple-context-menu: 📌 Simple context-menu component built for Vue. Works well with both left and

에러 메세지

공식 사이트에 나온 대로 npm i vue-simple-context-menu를 사용했으나 다음과 같은 에러가 발생하였다.

다시 확인해 보니 vue2에서 사용하기 위해서는 3.4.2 버전을 설치해야 했다.

Vue 3 is supported from v4.0.0 and beyond (current master). To use vue-simple-context-menu with Vue 2, use v3.4.2.

 

npm install --legacy-peer-deps vue-simple-context-menu 명령어를 이용하면 peerDependencies를 무시하고 설치가 가능하지만, 브라우저 콘솔 로그에 에러가 발생하여 vue-simple-context-menu의 버전을 변경해 줬다.

해결 방법

명령어로 해당 버전을 설치하는 방법도 있겠지만 나는 npm install --legacy-peer-deps vue-simple-context-menu로 이미 설치했기 때문에, package.json에서 기존에 4.x.x라고 되어있는 버전을 3.4.2로 변경해 줬다.

적용

컴포넌트 등록

main.js → 전역적으로 사용하기 위해 main.js에 넣어줬다.

/*VueSimpleContextMenu 컴포넌트 등록*/
import VueSimpleContextMenu from 'vue-simple-context-menu';
import 'vue-simple-context-menu/dist/vue-simple-context-menu.css';
Vue.component('vue-simple-context-menu',VueSimpleContext

 

html

<!--context menu-->
<div class="item-wrapper">
  <div class="list-group">
      <div
        v-for="(item, index) in itemArray1"
        :key="index"
        @click.prevent.stop="handleClick1($event, item)"
        class="list-group-item list-group-item-action"
      >
        {{ item.name }}
      </div>
  </div>
</div>

<vue-simple-context-menu
    element-id="myFirstMenu"
    :options="optionsArray1"
    ref="vueSimpleContextMenu1"
    @option-clicked="optionClicked1"
  >
</vue-simple-context-menu>

script

  handleClick1(event, item) {
    this.$refs.vueSimpleContextMenu1.showMenu(event, item);
  },


  optionClicked1(event) {
    window.alert(JSON.stringify(event));
  },

 

TIL

@click. prevent.stop

→ click.prevent : 클릭 시 event.preventDefault() 후 메서드 실행

→ .stop : 이벤트 발생 시 event.stopPropagation()으로 부모 이벤트로의 이벤트 전달 막은 후 method 실행

정상 작동 확인