使用 Vue.js 3 和 TypeScript 构建一个轻量级 Vue 3 Context Menu 插件

简介

在现代 Web 开发中，上下文菜单对于提供直观的交互至关重要。它们允许用户快速访问特定元素或区域的上下文相关操作。在本教程中，我们将使用 Vue.js 3 和 TypeScript 从头开始构建一个轻量级的 Vue 3 Context Menu 插件。

背景

上下文菜单是一个在用户右键单击或长按特定元素时显示的可自定义菜单。它们通常包含与该元素相关的各种操作，例如编辑、删除、复制等。创建一个高效且灵活的上下文菜单插件对于提高应用程序的可用性至关重要。

步骤

1. 初始化 Vue.js 3 和 TypeScript 项目

• 创建一个新的 Vue.js 3 和 TypeScript 项目。
• 安装 Vue CLI 并创建新项目。

2. 创建 ContextMenu 组件

• 在 src/components 目录中创建 ContextMenu.vue 组件。
• 添加以下代码：

<template>
  <div v-click-outside="closeMenu">
    <div class="context-menu" v-if="visible">
      <ul>
        <li v-for="item in menuItems" :key="item.key">
          <span @click="handleItemClick(item)">{{ item.label }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    menuItems: {
      type: Array,
      required: true,
    },
  },
  emits: ['close'],
  setup(props, { emit }) {
    const closeMenu = () => {
      emit('close')
    }

    const handleItemClick = (item) => {
      emit('itemClick', item)
      closeMenu()
    }

    return {
      closeMenu,
      handleItemClick,
    }
  },
})
</script>

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

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

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

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

3. 创建 ContextMenu 插件

• 在 src/plugins 目录中创建一个 contextMenu.ts 文件。
• 添加以下代码：

import Vue from 'vue'
import ContextMenu from '@/components/ContextMenu.vue'

const plugin = {
  install(app: Vue.App) {
    app.component('ContextMenu', ContextMenu)

    const contextMenu = (
      element: HTMLElement,
      menuItems: Array<{ key: string; label: string }>
    ) => {
      const component = Vue.createApp({
        components: { ContextMenu },
        data() {
          return {
            visible: false,
            menuItems,
          }
        },
        methods: {
          closeMenu() {
            this.visible = false
          },
          handleItemClick(item) {
            this.$emit('itemClick', item)
            this.closeMenu()
          },
        },
      })

      const vm = component.mount(document.createElement('div'))

      element.addEventListener('contextmenu', (e) => {
        e.preventDefault()
        vm.visible = true
        vm.$el.style.left = `${e.clientX}px`
        vm.$el.style.top = `${e.clientY}px`
        document.body.appendChild(vm.$el)
      })

      element.addEventListener('click', () => {
        vm.visible = false
      })
    }

    Vue.directive('contextMenu', {
      mounted(el, binding) {
        contextMenu(el, binding.value)
      },
    })
  },
}

export default plugin

4. 安装插件

• 在 main.ts 文件中安装 ContextMenu 插件：

import Vue from 'vue'
import contextMenu from '@/plugins/contextMenu'

Vue.use(contextMenu)

5. 使用 ContextMenu 插件

• 在你的组件模板中使用 v-contextMenu 指令：

<div v-contextMenu="menuItems"></div>

其中 menuItems 是一个包含菜单项对象的数组。每个对象必须具有 key 和 label 属性。

优点

使用 Vue.js 3 和 TypeScript 构建的这个上下文菜单插件具有以下优点：

• 轻量级： 该插件只有数百行代码，不会增加应用程序的体积。
• 灵活： 该插件允许您完全自定义菜单项，并支持动态生成菜单。
• 可扩展： 该插件易于扩展，您可以轻松地添加新功能或集成第三方库。
• TypeScript： 该插件是使用 TypeScript 构建的，这提供了更好的类型安全性和代码重构。

结论

使用 Vue.js 3 和 TypeScript 构建一个轻量级的上下文菜单插件是一项有价值的练习。通过遵循本教程中的步骤，您可以创建一个定制的、高效的插件，以增强您的应用程序的用户体验。