오늘 우리는 전통적인 "Hello World"예제를 사용하여 처음부터 VueJS로 컨텍스트 메뉴를 만들 것입니다.

새로운 Vue 프로젝트 생성

새 프로젝트를 만들고 응용 프로그램을 실행하여 시작하겠습니다.

가장 먼저 해야 할 일은 컴퓨터에 Vue CLI을 설치하는 것입니다.

새 프로젝트를 만들려면 다음을 실행합니다.
vue create <enter the app name>
Vue cli에 대한 자세한 내용은 공식 문서에서 볼 수 있습니다here.

다음 초기 파일 구조로 새 프로젝트를 생성합니다.

index.html

src/App.vue

src/main.js

src/assets/logo.png

src/components/HelloWorld.vue

프로젝트 시작

이제 Vue CLI로 생성된 프로젝트를 실행해 보겠습니다.

cd <project-name>
npm install
npm run serve

Vue 인스턴스

이제 App.vue를 열겠습니다. 다음 코드가 있습니다.

<div id="app">
  <img width="25%" src="./assets/logo.png">
  <HelloWorld/>
</div>

지금은 HelloWorld 구성 요소를 제거하고 이름이 ContextMenu.vue인 새 구성 요소를 생성할 수 있습니다.

ContextMenu.vue를 열고 기본 템플릿을 추가합니다.

<div class="context-menu" ref="context" tabindex="0">
        <slot></slot>
    </div>

코드에 대해 조금
슬롯을 사용하면 상황에 맞는 메뉴 내에서 구성 요소를 렌더링할 수 있으며 tabIndex 소품은 요소에 초점을 맞춥니다.

스타일 추가

<style>
.context-menu {
    position: fixed;
    background: white;
    z-index: 999;
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    cursor: pointer;
}
</style>

이제 몇 가지 논리와 전체 구성 요소 코드를 추가합니다.

<template>
<div class="context-menu" v-show="show" :style="style" ref="context" tabindex="0" @blur="close">
        <slot></slot>
    </div>
</template>
<script>
import Vue from 'vue';

export default {
    name: 'CmpContextMenu',
    props: {
        display: Boolean, // prop detect if we should show context menu
    },
    data() {
        return {
            left: 0, // left position
            top: 0, // top position
            show: false, // affect display of context menu
        };
    },
    computed: {
        // get position of context menu
        style() {
            return {
                top: this.top + 'px',
                left: this.left + 'px',
            };
        },
    },
    methods: { 
        // closes context menu 
        close() {
            this.show = false;
            this.left = 0;
            this.top = 0;
        },
        open(evt) {
            // updates position of context menu 
            this.left = evt.pageX || evt.clientX;
            this.top = evt.pageY || evt.clientY;
            // make element focused 
            // @ts-ignore
            Vue.nextTick(() => this.$el.focus());
            this.show = true;
        },
    },
};
</script>
<style>
.context-menu {
    position: fixed;
    background: white;
    z-index: 999;
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    cursor: pointer;
}
</style>

코드는 자명하게 설명되어 있습니다open 메서드는 상황에 맞는 메뉴를 열고, close 메서드는 상황에 맞는 메뉴를 닫고, 상황에 맞는 메뉴의 위치를 ​​반환하는 속성을 계산합니다styles.

용법

이제 새 구성 요소를 App.vue로 가져오고 자신의 상황에 맞는 메뉴 표시를 시작하십시오.

<div id="app">
  <img width="25%" src="./assets/logo.png">
 <context-menu :display="showContextMenu" ref="menu">
      <ul>
         <li> List item 1 </li>
         <li> List item 2 </li>
      </ul>
</context-menu>

<button @click='openContextMenu'>activate context menu</button>
</div>

<script>
import ContextMenu from './ContextMenu';


export default {
  components: {
    ContextMenu,
  },
  data() {
     return { showContextMenu: false }
  },
  methods: {
    openContextMenu(e) {
         this.$refs.menu.open(e);
    }
  }
}
</script>

약간의 편집으로 다음과 같은 것을 만들 수 있습니다.

Note

이것은 가능한 한 적은 코드로 상황에 맞는 메뉴를 만드는 방법에 대한 기본적이고 간단한 예일 뿐입니다.

거의 항상 그렇듯이 사용 사례에 가장 적합한 접근 방식을 선택해야 합니다.