@penggy/vue-context-menu 1.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 xunlei
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,110 @@
+# vue-context-menu
+
+> Vue 2.0 右键菜单组件，菜单内容可以随意自定义
+
+![Preview](https://github.com/binggg/vue-context-menu/blob/master/demo/assets/demo.jpeg?raw=true)
+
+## 安装
+```
+npm install @penggy/vue-context-menu
+```
+
+## 在线Demo
+
+## 使用
+
+### 1. 注册组件
+
+#### 方式1 利用插件方式全局注册
+
+```javascript
+import VueContextMenu from '@penggy/vue-context-menu'
+import Vue from 'vue'
+
+Vue.use(VueContextMenu)
+```
+#### 方式2 局部注册
+
+```javascript
+import { component as VueContextMenu } from '@penggy/vue-context-menu'
+
+export default {
+  // ...
+  components: {
+    'vue-context-menu': VueContextMenu
+  }
+}
+```
+
+#### 方式3 独立版本引入，自动全局注册
+> 前提是 vue 也是独立版本通过script标签引入
+
+```html
+<script src="./node_modules/dist/vue-context-menu.js"></script>
+```
+
+### 2. 模版语法
+```html
+ <context-menu class="right-menu"
+    :target="contextMenuTarget"
+    :show="contextMenuVisible"
+    @update:show="(show) => contextMenuVisible = show">
+    <a href="javascript:;" @click="copyMsg">复制</a>
+    <a href="javascript:;" @click="quoteMsg">引用</a>
+    <a href="javascript:;" @click="deleteMsg">删除</a>
+</context-menu>
+```
+
+## Props
+
+| 参数                    | 说明  | 类型 | 可选值 | 默认值 |
+|-------------------------|-------|------|--------|--------|
+| target | 触发右键事件的元素  | Element | -      | -      |
+| show | 是否显示右键菜单  | Boolean | -      | false      |
+
+
+## Events
+
+| 事件名                    | 说明  | 事件参数
+|-------------------------|-------|------|
+| update:show | 右键菜单显示/隐藏时触发  | 是否显示 |
+
+
+## 注意
+
+如果target是某个兄弟元素，可以使用 `$refs`来访问，但是注意请在父组件mounted 之后获取。
+
+参考 https://cn.vuejs.org/v2/guide/components.html#子组件索引
+
+
+## ChangeLog
+- [1.0.1] 2017-07-10
+  - 修复 target 为空时可能出错的bug
+
+- [1.0.0] 2017-06-23
+  - 实现右键菜单基本功能
+
+## Development Setup
+
+``` bash
+# install deps
+npm install
+
+# serve demo at localhost:8080
+npm run dev
+
+# build library and demo
+npm run build
+
+# build library
+npm run build:library
+
+# build demo
+npm run build:demo
+```
+
+## License
+
+[MIT](http://opensource.org/licenses/MIT)
+
+Copyright (c) 2017 赵兵

package/dist/vue-context-menu.js

@@ -0,0 +1,395 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory();
+	else if(typeof define === 'function' && define.amd)
+		define([], factory);
+	else if(typeof exports === 'object')
+		exports["VueContextMenu"] = factory();
+	else
+		root["VueContextMenu"] = factory();
+})(this, function() {
+return /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// identity function for calling harmony imports with the correct context
+/******/ 	__webpack_require__.i = function(value) { return value; };
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, {
+/******/ 				configurable: false,
+/******/ 				enumerable: true,
+/******/ 				get: getter
+/******/ 			});
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 4);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var disposed = false
+var Component = __webpack_require__(2)(
+  /* script */
+  __webpack_require__(1),
+  /* template */
+  __webpack_require__(3),
+  /* styles */
+  null,
+  /* scopeId */
+  null,
+  /* moduleIdentifier (server only) */
+  null
+)
+Component.options.__file = "C:\\Users\\Administrator\\Documents\\vue-context-menu\\src\\VueContextMenu.vue"
+if (Component.esModule && Object.keys(Component.esModule).some(function (key) {return key !== "default" && key.substr(0, 2) !== "__"})) {console.error("named exports are not supported in *.vue files.")}
+if (Component.options.functional) {console.error("[vue-loader] VueContextMenu.vue: functional components are not supported with templates, they should use render functions.")}
+
+/* hot reload */
+if (false) {(function () {
+  var hotAPI = require("vue-hot-reload-api")
+  hotAPI.install(require("vue"), false)
+  if (!hotAPI.compatible) return
+  module.hot.accept()
+  if (!module.hot.data) {
+    hotAPI.createRecord("data-v-6f0575c0", Component.options)
+  } else {
+    hotAPI.reload("data-v-6f0575c0", Component.options)
+  }
+  module.hot.dispose(function (data) {
+    disposed = true
+  })
+})()}
+
+module.exports = Component.exports
+
+
+/***/ }),
+/* 1 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+/* harmony default export */ __webpack_exports__["default"] = ({
+  name: 'context-menu',
+  data: function data() {
+    return {
+      triggerShowFn: function triggerShowFn() {},
+      triggerHideFn: function triggerHideFn() {},
+      x: null,
+      y: null,
+      style: {},
+      binded: false
+    };
+  },
+
+  props: {
+    target: null,
+    show: Boolean
+  },
+  mounted: function mounted() {
+    this.bindEvents();
+  },
+
+  watch: {
+    show: function show(_show) {
+      if (_show) {
+        this.bindHideEvents();
+      } else {
+        this.unbindHideEvents();
+      }
+    },
+    target: function target(_target) {
+      this.bindEvents();
+    }
+  },
+  methods: {
+    // 初始化事件
+    bindEvents: function bindEvents() {
+      var _this = this;
+
+      this.$nextTick(function () {
+        if (!_this.target || _this.binded) return;
+        _this.triggerShowFn = _this.contextMenuHandler.bind(_this);
+        _this.target.addEventListener('contextmenu', _this.triggerShowFn);
+        _this.binded = true;
+      });
+    },
+
+
+    // 取消绑定事件
+    unbindEvents: function unbindEvents() {
+      if (!this.target) return;
+      this.target.removeEventListener('contextmenu', this.triggerShowFn);
+    },
+
+
+    // 绑定隐藏菜单事件
+    bindHideEvents: function bindHideEvents() {
+      this.triggerHideFn = this.clickDocumentHandler.bind(this);
+      document.addEventListener('mousedown', this.triggerHideFn);
+      document.addEventListener('mousewheel', this.triggerHideFn);
+    },
+
+
+    // 取消绑定隐藏菜单事件
+    unbindHideEvents: function unbindHideEvents() {
+      document.removeEventListener('mousedown', this.triggerHideFn);
+      document.removeEventListener('mousewheel', this.triggerHideFn);
+    },
+
+
+    // 鼠标按压事件处理器
+    clickDocumentHandler: function clickDocumentHandler(e) {
+      this.$emit('update:show', false);
+    },
+
+
+    // 右键事件事件处理
+    contextMenuHandler: function contextMenuHandler(e) {
+      this.x = e.clientX;
+      this.y = e.clientY;
+      this.$emit('update:show', true);
+      e.preventDefault();
+      this.$nextTick(this.layout);
+    },
+
+
+    // 布局
+    layout: function layout() {
+      if (this.y + this.$el.offsetHeight > document.documentElement.clientHeight) {
+        this.style = {
+          left: this.x + 'px',
+          bottom: 0
+        };
+        return;
+      }
+      this.style = {
+        left: this.x + 'px',
+        top: this.y + 'px'
+      };
+    }
+  }
+});
+
+/***/ }),
+/* 2 */
+/***/ (function(module, exports) {
+
+/* globals __VUE_SSR_CONTEXT__ */
+
+// this module is a runtime utility for cleaner component module output and will
+// be included in the final webpack user bundle
+
+module.exports = function normalizeComponent (
+  rawScriptExports,
+  compiledTemplate,
+  injectStyles,
+  scopeId,
+  moduleIdentifier /* server only */
+) {
+  var esModule
+  var scriptExports = rawScriptExports = rawScriptExports || {}
+
+  // ES6 modules interop
+  var type = typeof rawScriptExports.default
+  if (type === 'object' || type === 'function') {
+    esModule = rawScriptExports
+    scriptExports = rawScriptExports.default
+  }
+
+  // Vue.extend constructor export interop
+  var options = typeof scriptExports === 'function'
+    ? scriptExports.options
+    : scriptExports
+
+  // render functions
+  if (compiledTemplate) {
+    options.render = compiledTemplate.render
+    options.staticRenderFns = compiledTemplate.staticRenderFns
+  }
+
+  // scopedId
+  if (scopeId) {
+    options._scopeId = scopeId
+  }
+
+  var hook
+  if (moduleIdentifier) { // server build
+    hook = function (context) {
+      // 2.3 injection
+      context =
+        context || // cached call
+        (this.$vnode && this.$vnode.ssrContext) || // stateful
+        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
+      // 2.2 with runInNewContext: true
+      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+        context = __VUE_SSR_CONTEXT__
+      }
+      // inject component styles
+      if (injectStyles) {
+        injectStyles.call(this, context)
+      }
+      // register component module identifier for async chunk inferrence
+      if (context && context._registeredComponents) {
+        context._registeredComponents.add(moduleIdentifier)
+      }
+    }
+    // used by ssr in case component is cached and beforeCreate
+    // never gets called
+    options._ssrRegister = hook
+  } else if (injectStyles) {
+    hook = injectStyles
+  }
+
+  if (hook) {
+    var functional = options.functional
+    var existing = functional
+      ? options.render
+      : options.beforeCreate
+    if (!functional) {
+      // inject component registration as beforeCreate hook
+      options.beforeCreate = existing
+        ? [].concat(existing, hook)
+        : [hook]
+    } else {
+      // register for functioal component in vue file
+      options.render = function renderWithStyleInjection (h, context) {
+        hook.call(context)
+        return existing(h, context)
+      }
+    }
+  }
+
+  return {
+    esModule: esModule,
+    exports: scriptExports,
+    options: options
+  }
+}
+
+
+/***/ }),
+/* 3 */
+/***/ (function(module, exports, __webpack_require__) {
+
+module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+  return _c('div', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: (_vm.show),
+      expression: "show"
+    }],
+    staticStyle: {
+      "display": "block"
+    },
+    style: (_vm.style),
+    on: {
+      "mousedown": function($event) {
+        $event.stopPropagation();
+      },
+      "contextmenu": function($event) {
+        $event.preventDefault();
+      }
+    }
+  }, [_vm._t("default")], 2)
+},staticRenderFns: []}
+module.exports.render._withStripped = true
+if (false) {
+  module.hot.accept()
+  if (module.hot.data) {
+     require("vue-hot-reload-api").rerender("data-v-6f0575c0", module.exports)
+  }
+}
+
+/***/ }),
+/* 4 */
+/***/ (function(module, exports, __webpack_require__) {
+
+const VueContextMenu = __webpack_require__(0)
+const vueContextMenu = {}
+
+/**
+ * Plugin API
+ */
+vueContextMenu.install = function (Vue, options) {
+  Vue.component(VueContextMenu.name, VueContextMenu)
+}
+
+vueContextMenu.component = VueContextMenu
+
+/**
+ * Auto install
+ */
+if (typeof window !== 'undefined' && window.Vue) {
+  window.Vue.use(vueContextMenu)
+}
+
+module.exports = vueContextMenu
+
+/***/ })
+/******/ ]);
+});

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@penggy/vue-context-menu",
+  "description": "Vue 2.0 右键菜单组件，菜单内容可以随意自定义",
+  "version": "1.0.3",
+  "private": false,
+  "main": "dist/vue-context-menu.js",
+  "files": [
+    "dist/*.js",
+    "src"
+  ],
+  "unpkg": "dist/vue-context-menu.js",
+  "keywords": [
+    "vue.js",
+    "vue-plugin",
+    "vue-component"
+  ],
+  "author": "penggy",
+  "license": "MIT",
+  "scripts": {
+    "dev": "node build/dev-server.js",
+    "build": "npm run build:library && npm run build:demo",
+    "build:demo": "node build/build.js",
+    "build:library": "webpack --config build/webpack.lib.conf.js",
+    "publish": "npm publish --access=public"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "babel-cli": "^6.14.0",
+    "babel-plugin-external-helpers": "^6.22.0",
+    "babel-polyfill": "^6.13.0",
+    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-es2015-rollup": "^1.2.0",
+    "rollup": "^0.35.10",
+    "rollup-plugin-babel": "^2.6.1",
+    "rollup-plugin-uglify": "^1.0.1",
+    "vue": "^2.3.3",
+    "vue-router": "^2.3.1",
+    "autoprefixer": "^6.7.2",
+    "babel-core": "^6.22.1",
+    "babel-loader": "^6.2.10",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-preset-env": "^1.3.2",
+    "babel-preset-stage-2": "^6.22.0",
+    "babel-register": "^6.22.0",
+    "chalk": "^1.1.3",
+    "connect-history-api-fallback": "^1.3.0",
+    "copy-webpack-plugin": "4.0.1",
+    "css-loader": "^0.28.0",
+    "eventsource-polyfill": "^0.9.6",
+    "express": "^4.14.1",
+    "extract-text-webpack-plugin": "^2.0.0",
+    "file-loader": "^0.11.1",
+    "friendly-errors-webpack-plugin": "^1.1.3",
+    "html-webpack-plugin": "^2.28.0",
+    "http-proxy-middleware": "^0.17.3",
+    "webpack-bundle-analyzer": "^2.2.1",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "opn": "^4.0.2",
+    "optimize-css-assets-webpack-plugin": "^1.3.0",
+    "ora": "^1.2.0",
+    "rimraf": "^2.6.0",
+    "url-loader": "^0.5.8",
+    "vue-loader": "^12.1.0",
+    "vue-style-loader": "^3.0.1",
+    "vue-template-compiler": "^2.3.3",
+    "webpack": "^2.6.1",
+    "webpack-dev-middleware": "^1.10.0",
+    "webpack-hot-middleware": "^2.18.0",
+    "webpack-merge": "^4.1.0"
+  },
+  "engines": {
+    "node": ">= 4.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

package/src/VueContextMenu.vue

@@ -0,0 +1,102 @@
+<template>
+  <div :style="style" style="display: block;" v-show="show"
+    @mousedown.stop
+    @contextmenu.prevent
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'context-menu',
+  data () {
+    return {
+      triggerShowFn: () => {},
+      triggerHideFn: () => {},
+      x: null,
+      y: null,
+      style: {},
+      binded: false
+    }
+  },
+  props: {
+    target: null,
+    show: Boolean
+  },
+  mounted () {
+    this.bindEvents()
+  },
+  watch: {
+    show (show) {
+      if (show) {
+        this.bindHideEvents()
+      } else {
+        this.unbindHideEvents()
+      }
+    },
+    target (target) {
+      this.bindEvents()
+    }
+  },
+  methods: {
+    // 初始化事件
+    bindEvents () {
+      this.$nextTick(() => {
+        if (!this.target || this.binded) return
+        this.triggerShowFn = this.contextMenuHandler.bind(this)
+        this.target.addEventListener('contextmenu', this.triggerShowFn)
+        this.binded = true
+      })
+    },
+
+    // 取消绑定事件
+    unbindEvents () {
+      if (!this.target) return
+      this.target.removeEventListener('contextmenu', this.triggerShowFn)
+    },
+
+    // 绑定隐藏菜单事件
+    bindHideEvents () {
+      this.triggerHideFn = this.clickDocumentHandler.bind(this)
+      document.addEventListener('mousedown', this.triggerHideFn)
+      document.addEventListener('mousewheel', this.triggerHideFn)
+    },
+
+    // 取消绑定隐藏菜单事件
+    unbindHideEvents () {
+      document.removeEventListener('mousedown', this.triggerHideFn)
+      document.removeEventListener('mousewheel', this.triggerHideFn)
+    },
+
+    // 鼠标按压事件处理器
+    clickDocumentHandler (e) {
+      this.$emit('update:show', false)
+    },
+
+    // 右键事件事件处理
+    contextMenuHandler (e) {
+      this.x = e.clientX
+      this.y = e.clientY
+      this.$emit('update:show', true)
+      e.preventDefault()
+      this.$nextTick(this.layout);
+    },
+
+    // 布局
+    layout () {
+      if (this.y + this.$el.offsetHeight > document.documentElement.clientHeight) {
+        this.style = {
+          left: this.x + 'px',
+          bottom: 0,
+        }
+        return
+      }
+      this.style = {
+        left: this.x + 'px',
+        top: this.y + 'px'
+      }
+    }
+  }
+}
+</script>

package/src/vue-context-menu.js

@@ -0,0 +1,20 @@
+const VueContextMenu = require('./VueContextMenu.vue')
+const vueContextMenu = {}
+
+/**
+ * Plugin API
+ */
+vueContextMenu.install = function (Vue, options) {
+  Vue.component(VueContextMenu.name, VueContextMenu)
+}
+
+vueContextMenu.component = VueContextMenu
+
+/**
+ * Auto install
+ */
+if (typeof window !== 'undefined' && window.Vue) {
+  window.Vue.use(vueContextMenu)
+}
+
+module.exports = vueContextMenu