Skip to content
基于vue的右键菜单组件
JavaScript Vue HTML
Branch: master
Clone or download
Latest commit 4dea3de Aug 22, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build chore: add gh-pages command and rebuild demo Aug 21, 2019
dist chore: add gh-pages command and rebuild demo Aug 21, 2019
examples 项目结构调整 Aug 19, 2019
lib 项目结构调整 Aug 19, 2019
public init Aug 11, 2019
src lint:remove console Aug 19, 2019
tests/unit test: add test case Aug 21, 2019
.browserslistrc init Aug 11, 2019
.eslintrc.js init Aug 11, 2019
.gitignore chore Aug 19, 2019
.npmignore chore: add tests dir to ignore Aug 21, 2019
LICENSE chore: update license Aug 22, 2019
README.md chore: add unit test Aug 21, 2019
babel.config.js init Aug 11, 2019
package.json chore: add unit test Aug 21, 2019
postcss.config.js init Aug 11, 2019
vue.config.js chore: add unit test Aug 21, 2019
yarn.lock chore: add unit test Aug 21, 2019

README.md

vue-contextmenu

右键菜单组件 demo

安装

npm install @gahing/vcontextmenu # yarn add @gahing/vcontextmenu

在线demo

demo

使用

如果是用 vue-cli3 构建的,可以利用 vue-cli-plugin-contextmenu

vue add contextmenu

手动注册:

import ContextMenu from '@gahing/vcontextmenu'
import '@gahing/vcontextmenu/lib/vcontextmenu.css'
Vue.use(ContextMenu)
// or
import { ContextMenu } from '@gahing/vcontextmenu'
import '@gahing/vcontextmenu/lib/vcontextmenu.css'
Vue.component(ContextMenu.name, ContextMenu); // 可以在这里定义自己的组件名

demo

<template>
  <context-menu
    :show="contextMenuVisible"
    :offset="contextMenuOffset"
    @update:show="show => (contextMenuVisible = show)"
  >
    <div>复制</div>
    <div>粘贴</div>
    <div>剪切</div>
  </context-menu>

  <div @contextmenu="showContextMenu">右键点击此区域</div>
</template>
<script>
export default {
  data() {
    return {
      contextMenuVisible: false,
      contextMenuOffset: {
        left: 0,
        top: 0
      },
    };
  },
  methods: {
    showContextMenu(e) {
      e.preventDefault();
      this.contextMenuVisible = true;
      this.contextMenuOffset = {
        left: e.pageX,
        top: e.pageY
      };
    }
  }
};
</script>

开发

npm start

构建

# 构建demo
npm run build:demo
# 源码打包,生成lib目录
npm run build:lib
# 发布gh-pages
npm run ghpages
You can’t perform that action at this time.