1.7.1 • Published 7 months ago
ja-contextmenu v1.7.1
ja-contextmenu
Demo: npm run dev (this project)
Brief introduction
- Native js right-click menu encapsulation. It can also be used for the onclick event to open the menu.
- The default style is completed by inserting the style tag through js, paying attention to the class namespace.。
- Only the most basic styles are provided.
- TypeScript ✔
- default z-index = 5000;
- Gitee
- 中文🇨🇳
Usage
npm i ja-contextmenu
import ContextMenu from 'ja-contextmenu'; const contextMenu = new ContextMenu(); let menu = contextMenu.create({ item:[ { label:'go', onclick(e, payload){...} } ] }) window.addEventListener('contextmenu',e => {menu.show(e, payload)})
## Attention
Please delete the "^"before the version number of ja-contextmenu in package.json after installation to prevent the unexpected automatic update of npm. <br>
(eg: "ja-contextmenu":"`^`1.3.0" => "ja-contextmenu":"1.3.0")
<br>
Limited energy, there is no guarantee that the use mode will not be changed when the small version is updated.
## Feature Log
- [x] MenuItemOption.onclick return true. click item not close menu. (v1.6.0)
- [x] MenuItemOption.icon support HTMLElement. (v1.6.0)
- [x] MenuItemOption.show: boolean。Control MenuItem show. (v1.5.0)
- [x] click close,capture:true.
- [x] Items with submenus cannot be clicked.
- [x] Support configuration class.
- [x] Support configuration class icon.
- [x] Hide when scrolling
- [x] Use position:fixed
- [x] title/tip formatter
- [x] Support incoming DOM,custom MenuItem
## Example
```javascript
import ContextMenu, { h } from 'ja-contextmenu'; // types.d.ts supported
// import ContextMenu from 'ja-contextmenu/src/index.ts'
const contextMenu = new ContextMenu({
width: 200, // default: 200
fixMenuWhenScroll: false, // (position:fixed) default:false
hideMenuWhenScroll: true // default:true
});
const menuOption = {
items: [
{
label: 'menu1', // name
icon: './assets/images/ico.png', // icon url | HTMLElement
class: 'customClass', // item class, default: ''
tip: 'tip1', // Prompt text to the right of option, default: ''
show: true, // default: true
disabled: false, // default: false
onclick(e, payload) {
// payload is the parameter passed in by calling the menu.show method.
console.log('menu1 click', payload);
// return true; // not close menu
},
},
{ type: '---' }, // <hr> split line
{
// support function
label: payload => 'menu2',
icon: payload => 'icon href2',
class: payload => 'class2',
tip: payload => 'tip2',
show: payload => true,
disabled: payload => true
children: {
width: 120, // default = parent menu width
items: [
{
label: 'sub menu1',
onclick: (e, payload) => {
console.log('sub menu1 click', payload)
}
},{
class: 'li-class-name',
customItem: document.createElement('div')
},{
// I encapsulated the function h of createElement.
customItem: h('div',[
h('span', {
// {[element.key]:value}
textContent: 'hello', // element.textContent = 'hello'
style:{
fontWeight:'bolder'.// element.style.fontWeight = 'holder'
cssText: 'font-size:14px;' // element.style.cssText = 'font-size:14px;'
},
className:'class-name',
}),
h('span.class-name#id',' world')
])
}
]
}
},
],
}
let menu = contextMenu.create(menuOption);
document.body.oncontextmenu = (e) => {
let payload = 'payload data: callback when click items';
menu.show(e, payload);
};
// or
someButton.onclick = (e) => {
menu.show(e);
}
// menu.hide();
// menu.destroy();
// menu = null;
ContextMenu constructor
new ContextMenu(option:
ContextMenuOption
);ContextMenuOption
key: type default desc width: number 200 Menu width fixMenuWhenScroll: boolean false Is the menu fixed when scrolling(hideMenuWhenScroll=false) hideMenuWhenScroll: boolean true Whether to close the menu when scrolling. ContextMenu instance method
create\<PayloadType>(option:
MenuOption
):MenuWrapper
Create a menu and return a MenuWrapper object.
MenuOption
param: type default desc width?: number 200 Menu width. If the submenu is not configured, the width of the parent menu will be inherited. class?: string|(payload)=>string Menu ul class items: MenuItemOption
List configuration item
MenuItemOption
param: type | default | desc |
---|---|---|
icon?: string|HTMLElement|(payload)=>string|HTMLElement | icon url | |
class?: string|(payload)=>string | Menu item 'li' class | |
label?: string|(payload)=>string | Item text | |
tip?: string|(payload)=>string | Prompt text to the right of menu item | |
show?: boolean|(payload)=>boolean | true | Whether to show |
disabled?: boolean|(payload)=>boolean | false | Whether to disabled |
type?: MenuItemType | value '---' | 'hr' => <hr> split line | |
customItem?: HTMLElement | Custom Menu Item | |
onclick?: function(event, payload):boolean | Click the event callback, and the parameter payload is the parameter passed in when calling the showMenu. return true does not close the menu after clicking. | |
children?: MenuOption | Submenu configuration |
MenuWrapper
const menu:MenuWrapper = contextMenu.create<Payload>(...)
1.show(pos: { x: number, y: number }, payload?: any)
Show menu
- pos:
PointerEvent
,MouseEvent
, T extends { x: number, y: number } - payload: Return in the onclick callback of the click menu.
2.hide()
3.destroy()
Typescript Demo
import ContextMenu from 'ja-contextmenu';
const contextMenu = new ContextMenu();
// Generic - PayloadType
const menu = contextMenu.create<number>({
width: 100,
items: [
{
label: 'label',
onclick(e, payload:number) { // type
console.log(payload);
},
},
],
});
menu.show({x: 100,y:100}, 1) // payload type :number
//menu.show({x: 100,y:100}, '2') // payload type error not number
About Project
- demo: npm run dev
Demo code in
/test
folder - build prod: npm run bd
- src/utils/h.ts => document.createElement()
1.7.1
7 months ago
1.7.0
9 months ago
1.6.4
9 months ago
1.6.3
10 months ago
1.6.2
11 months ago
1.6.1
11 months ago
1.6.0
11 months ago
1.5.1
12 months ago
1.4.6
1 year ago
1.5.0
12 months ago
1.4.7
1 year ago
1.4.5
1 year ago
1.4.4
1 year ago
1.4.3
1 year ago
1.4.2
1 year ago
1.4.1
1 year ago
1.4.0
1 year ago
1.3.0
2 years ago
1.2.2
2 years ago
1.2.1
2 years ago
1.1.0
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago