michitaro/vue-menu：适用于 Vue2 的菜单/上下文菜单组件

项目介绍

michitaro/vue-menu 是一个托管在 GitHub 上的开源项目，主要使用 TypeScript 编写，采用 MIT License 许可证，目前获得 257 个 Star、24 次 Fork。

仓库全名: michitaro/vue-menu

README 摘要

vue-menu 😣 This library is not compatible with Vue3! 😣 Introduction Recent web technologies focus on mobile environments. UIs premised on mouse operation such as window, context-menu, nested-menu and so on are no longer mainstream. However hierarchical structure -- context-menu and nested-menu -- is still effective. This package is an implementation of {nested,context}-menu for PC environments as a Vue Component…

完整内容见 GitHub 原始 README 或本页。

常见问题

vue-menu 用什么语言开发？

主要使用 TypeScript 编写，采用 MIT License 许可证，目前有 257 个 Star。

vue-menu 可以免费商用吗？

如何获取 vue-menu 的源码？

可以直接克隆仓库：git clone https://github.com/michitaro/vue-menu.git，默认分支为 master；安装与运行步骤见仓库 README。

vue-menu 最近还在维护吗？

仓库最近一次更新为 2022年10月2日，当前有 12 个未关闭 Issue；Star 数为 257，可作为社区活跃度的参考。

关于

GitHub 原始描述（英文）

Menu/Contextmenu Component for vue2

component contextmenu javascript menu typescript vue

MIT License
257 Stars
24 Forks
5 Watching

描述取自 GitHub 官方 API，保持仓库作者书写的原文。

简要分析

热度分

310

价值分

161

活跃状态

活跃

GitHub

语言占比

HTML

JavaScript

TypeScript

Vue

贡献者

michitaro

dependabot[bot]

😣 This library is not compatible with Vue3! 😣

Introduction

Recent web technologies focus on mobile environments. UIs premised on mouse operation such as window, context-menu, nested-menu and so on are no longer mainstream. However hierarchical structure – context-menu and nested-menu – is still effective. This package is an implementation of {nested,context}-menu for PC environments as a Vue Component.

Features

Menu component for vue2
Deeply nested menu supported
Props “checked” & “disabled”
Keybinds
Y-scrollable if necessary
Contextmenu
Builtin 3 themes (white, metal & black)
Customizable color
Menuitem can contain any HTML not only text
Tested on Safari10, Chrome60, Firefox55, IE11, Edge38 for PCs
~~Does not work on mobile devices 😞~~

Usage

Install

npm install --save @hscmap/vue-menu

Setup

ES6 / TypeScript

import Vue from 'vue'
import * as VueMenu from '@hscmap/vue-menu'

Vue.use(VueMenu)

CommonJS

var Vue = require('vue')
Vue.use(require('@hscmap/vue-menu'))

Example

<template>
    <hsc-menu-style-white>
        <hsc-menu-bar style="border-radius: 0 0 4pt 0;">
            <hsc-menu-bar-item label="File">
                <hsc-menu-item label="New" @click="window.alert('New')" />
                <hsc-menu-item label="Open" @click="window.alert('Open')" />
                <hsc-menu-separator/>
                <hsc-menu-item label="Save" @click="window.alert('Save')" :disabled="true" />
                <hsc-menu-item label="Export to">
                    <hsc-menu-item label="PDF" />
                    <hsc-menu-item label="HTML" />
                </hsc-menu-item>
            </hsc-menu-bar-item>
            <hsc-menu-bar-item label="Edit">
                <hsc-menu-item label="Undo" keybind="meta+z" @click="window.alert('Undo')" />
                <hsc-menu-separator/>
                <hsc-menu-item label="Cut" keybind="meta+x" @click="window.alert('Cut')" />
                <hsc-menu-item label="Copy" keybind="meta+c" @click="window.alert('Copy')" />
                <hsc-menu-item label="Paste" keybind="meta+v" @click="window.alert('Paste')" :disabled="true" />
            </hsc-menu-bar-item>
        </hsc-menu-bar>
    </hsc-menu-style-white>
</template>

Other examples are available here.

See also vue-window. This is a window UI component for vue2 with the same color themes.

Caveats

~~This component doesn’t work on electron-vue.~~
- See here to use with electron-vue.

Contributing

Any comments, suggestions or PRs are welcome 😀

React Port

React port is available here.

暂无评论

vue-menu