New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@ektx/v-contextmenu
Advanced tools
@ektx/v-contextmenu - npm Package Compare versions
Comparing version 0.2.8 to 0.3.0
| { | ||
| "name": "@ektx/v-contextmenu", | ||
| "version": "0.2.8", | ||
| "version": "0.3.0", | ||
| "description": "Vue 右键菜单功能", | ||
| "author": "kings <530675800@qq.com>", | ||
| "private": false, | ||
| "main": "./index.vue", | ||
| "scripts": { | ||
| "build": "rollup --config ./rollup.config.js", | ||
| "style": "gulp --gulpfile ./styles.js" | ||
| }, | ||
| "main": "./dist/vcontextmenu.js", | ||
| "repository": { | ||
@@ -12,6 +16,12 @@ "type": "git", | ||
| }, | ||
| "engines": { | ||
| "node": ">= 4.0.0", | ||
| "npm": ">= 3.0.0" | ||
| "devDependencies": { | ||
| "gulp": "^3.9.1", | ||
| "gulp-autoprefixer": "^6.0.0", | ||
| "gulp-rename": "^1.4.0", | ||
| "gulp-sass": "^4.0.2", | ||
| "rollup": "^0.66.6", | ||
| "rollup-plugin-uglify": "^6.0.0", | ||
| "rollup-plugin-vue": "^4.3.2", | ||
| "vue-template-compiler": "^2.5.17" | ||
| } | ||
| } | ||
| } |
143
readme.md
@@ -5,86 +5,67 @@ # VContextmenu | ||
|  | ||
|  | ||
| ## 使用方式 | ||
| ## 安装 | ||
| 1. 安装 | ||
| ```shell | ||
| ```bash | ||
| yarn add @ektx/v-contextmenu | ||
| npm i @ektx/v-contextmenu | ||
| ``` | ||
| 2. 在 vues 的 state 中添加共享状态与方法 | ||
| ## NPM 使用 | ||
| > 请先确保你有使用 vuex | ||
| ### 引用组件 | ||
| ```js | ||
| import Vue from 'vue'; | ||
| import VContextmenu from '@ektx/v-contextmenu'; | ||
| import '@ektx/v-contextmenu/dist/vcontextmenu.css'; | ||
| ```javascript | ||
| import VContextmenu from '@ektx/v-contextmenu/store' | ||
| const store = new Vuex.Store({ | ||
| modules: { VContextmenu } | ||
| }) | ||
| Vue.use(VContextmenu); | ||
| ``` | ||
| 3. 在页面中调用组件 | ||
| ### Vue 页面使用 | ||
| ```html | ||
| <template> | ||
| <main> | ||
| <!-- 绑定事件 --> | ||
| <div @contextmenu.prevent="rightClick"></div> | ||
| <!-- 引用 HTML 结构 --> | ||
| <VContextmenus /> | ||
| </main> | ||
| <!-- 绑定事件 --> | ||
| <div @contextmenu.prevent="rightClick"></div> | ||
| </template> | ||
| <script> | ||
| // 引入 | ||
| import VContextmenus from '@ektx/v-contextmenus' | ||
| export default { | ||
| components: { | ||
| VContextmenus | ||
| }, | ||
| name: 'demo', | ||
| data () { | ||
| return { | ||
| // 菜单内容 | ||
| menu: { | ||
| data: [ | ||
| { | ||
| title: 'v-contenxtmenus', | ||
| classes: 'hello', | ||
| evt (data) { | ||
| alert('Welcome Use v-contenxtmenus!') | ||
| } | ||
| }, | ||
| { | ||
| title: '联系方式', | ||
| children: [ | ||
| { | ||
| title: 'ektx1989@gmail.com' | ||
| }, | ||
| { | ||
| title: '@宅龙猫' | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| type: 'separator' | ||
| }, | ||
| { | ||
| title: 'Github.com', | ||
| evt () { | ||
| menu: [{ | ||
| title: 'v-contenxtmenus', | ||
| classes: 'hello', | ||
| evt (data) { | ||
| alert('Welcome Use v-contenxtmenus!') | ||
| } | ||
| }, | ||
| { | ||
| title: '联系方式', | ||
| children: { | ||
| title: 'ektx1989@gmail.com' | ||
| }, | ||
| { | ||
| title: '@宅龙猫' | ||
| }] | ||
| }, | ||
| { | ||
| type: 'separator' | ||
| }, | ||
| { | ||
| title: 'Github.com', | ||
| evt () { | ||
| } | ||
| }, | ||
| { | ||
| type: 'separator' | ||
| }, | ||
| { | ||
| disabled: true, | ||
| title: 'v 0.1.0' | ||
| } | ||
| ] | ||
| } | ||
| } | ||
| }, | ||
| { | ||
| type: 'separator' | ||
| }, | ||
| { | ||
| disabled: true, | ||
| title: 'v 0.1.0' | ||
| }] | ||
| } | ||
@@ -95,5 +76,3 @@ }, | ||
| rightClick (evt) { | ||
| this.$store.commit('setContextmenu', { | ||
| data: this.menu, evt | ||
| }) | ||
| this.$VContextmenu.show(this.menu, evt) | ||
| } | ||
@@ -106,14 +85,18 @@ } | ||
| ## 事件方法 | ||
| ```js | ||
| /** | ||
| * 显示功能 | ||
| * @param [Array] 菜单内容 | ||
| * @param [event] JS事件 | ||
| */ | ||
| this.$VContextmenu.show(data, evt) | ||
| ``` | ||
| * 展示菜单功能 | ||
| > store.commit('setContextmenu', {data, evt}) | ||
| @data 菜单内容 | ||
| @evt 鼠标事件 | ||
| * 关闭菜单 | ||
| > store.commit('setContextmenu', { show: false }) | ||
| ### data 说明 | ||
| | 标签 | 类型 | 说明 | 默认值 | | ||
| | --- | --- | --- | --- | | ||
| | title | `String` | 菜单列表标题 | - | | ||
| | evt | `Function` | 菜单点击事件 | - | | ||
| | disabled | `Boolean` | 是否可以使用 | - | | ||
| | classes | `Class` | 自定义样式名 | - | | ||
| | type | `separator` | 分隔线 | - | |
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by3427.75%
408372
- Number of package files
- increased by400%
25
- Lines of code
- increased by3093.75%
511
Worsened metrics
- Dev dependency count
- increased byInfinity%
8
- Number of lines in readme file
- decreased by-15.38%
99
No dependency changes