Vue.js中创建可调用的、可供用户选择的全局菜单

2023-11-19 09:06:43

前言

最近遇到一个需求，需要实现一个用户可选择的菜单，这个菜单是在拖拽放置后弹出，让用户进行选择，决定放置的位置，可以通过点击视口其他位置关闭菜单。

实现步骤

创建Vue组件

首先，我们需要创建一个Vue组件来实现这个菜单。这个组件可以命名为ContextMenu.vue。

<template>
  <div class="context-menu" :style="{ top: top, left: left }">
    <ul>
      <li v-for="item in items" @click="handleItemClick(item)">{{ item.text }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    top: {
      type: String,
      required: true
    },
    left: {
      type: String,
      required: true
    },
    items: {
      type: Array,
      required: true
    }
  },
  methods: {
    handleItemClick(item) {
      this.$emit('item-click', item)
    }
  }
}
</script>

<style>
.context-menu {
  position: absolute;
  background-color: #fff;
  border: 1px solid #000;
  padding: 5px;
  z-index: 999;
}

.context-menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.context-menu li {
  cursor: pointer;
  padding: 5px;
}

.context-menu li:hover {
  background-color: #ccc;
}
</style>

使用Vue组件

接下来，我们需要在需要使用这个菜单的组件中使用这个Vue组件。我们可以通过以下代码来实现：

<template>
  <div>
    <context-menu
      :top="top"
      :left="left"
      :items="items"
      @item-click="handleItemClick"
    />
  </div>
</template>

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

export default {
  components: {
    ContextMenu
  },
  data() {
    return {
      top: '0px',
      left: '0px',
      items: [
        { text: '选项一' },
        { text: '选项二' },
        { text: '选项三' }
      ]
    }
  },
  methods: {
    handleItemClick(item) {
      console.log(item.text)
    }
  }
}
</script>