0.1.1 • Published 4 years ago
contextmenu.ts v0.1.1
Html5 ContextMenu
介绍
- 简单易用, 支持html5, vue, react
- 动态菜单大小
- 自适应菜单位置(保持菜单全部可见在浏览器可见区域内)
- 自动隐藏(点击菜单外部区域/调整浏览器窗口时)
- 无限多级子菜单
- 支持选项图标
- 支持大部分自定义css样式
安装
npm i contextmenu.ts
# or
yarn add contextmenu.ts截图
- auto locate
- clickable & scrollable
- auto hide
- item disabled
Html5 使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ContextMenu</title>
<!-- import contextmenu js & css -->
<script type="text/javascript" src="../contextmenu.js"></script>
<link type="text/css" rel="stylesheet" href="./contextmenu.css">
<style>
html,
body{
margin: 0;
padding: 0;
}
body {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
.big{
width: 2048px;
height: 2048px;
background: #aaaaaa;
}
</style>
</head>
<body>
<div class="big">Web is Running !</div>
<script type="text/javascript" >
// build menu list
const builder = ContextMenu.builder();
builder.item("refresh", () => {
location.reload();
});
const menulist=builder.build();
// register aotuhide events
ContextMenu.install();
// get target element
const div=document.getElementsByClassName("big")[0];
// bind contextmenu event
div.oncontextmenu=()=>{
ContextMenu.show(menulist);
};
</script>
</body>
</html>使用示例
// import js & css global @file: "src/main.js"
import Vue from "vue";
import ContextMenu from "contextmenu.ts";
import "contextmenu.ts/contextmenu/dist/contextmenu.css";
Vue.use(ContextMenu);<!-- use in vue -->
<template>
<div @contextmenu="$menu.show(menulist)"></div>
</template>
<script>
export default {
computed:{
menulist(){
const builder = ContextMenu.builder();
builder.item("refresh", () => {
location.reload();
});
return builder.build();
}
},
}
</script>React 使用示例
// import js & css global @file: "src/index.js"
import ContextMenu from "contextmenu.ts/contextmenu";
import "contextmenu.ts/contextmenu/dist/contextmenu.css";
ContextMenu.install();// use contextmenu in react
class Login extends React.Component {
// ...
handleContextMenu(e){
console.log(e)
const builder = ContextMenu.builder();
builder.item("refresh", (m) => {
alert(m.name)
});
ContextMenu.show(builder.build());
}
// ...
render() {
return (
<div id='login-page' onContextMenu={this.handleContextMenu}>
</div>
)
}
}MenuBuilder: 菜单构造器
// get builder
const builder = ContextMenu.builder();
// add menu item
// only name
builder.item("alert");
// name with click function
builder.item("alert",(m)=>{
//
alert(m.name);
});
// name with with click function and hotkey desc
builder.item("alert",(m)=>{
//
alert(m.name);
},"ctrl+c");
// name with with click function and hotkey desc and icon
builder.item("alert",(m)=>{
//
alert(m.name);
},"ctrl+c", "./icon/copy.png");
// add submenu
builder.item("alert", null, subMenuBuilder => {
subMenuBuilder.item("alert1");
subMenuBuilder.item("alert2", null,subMenuBuilder=>{
//...
});
});
// gen menulist
const menulist = builder.build();
```
```
// full demo
const menulist = (function () {
const toast = function (m) {
alert(m.index + ":" + m.name);
};
const builder = ContextMenu.builder();
builder.item("alert", null, b => {
b.item("alert1", toast);
b.item("alert2", toast);
});
builder.item("submenu", toast, b => {
b.item("中文中文中文中文中文中文中文", toast);
b.item("EnglishEnglishEnglishEnglish", toast, b => {
b.item("中文中文中文中文中文中文中文", toast);
b.item("EnglishEnglishEnglishEnglish", toast, b => {
b.item("中文中文中文中文中文中文中文", toast);
b.item("EnglishEnglishEnglishEnglish", toast);
});
});
});
builder.divider();
// grayscale for enable=false
builder.item("copy", copy, "ctrl+c", "./icon/copy.png").enable(false);
builder.item("paste", paste, "ctrl+v", "./icon/paste.png");
builder.divider();
builder.item(
"refresh",
() => {
location.reload();
},
null,
"./icon/refresh.png"
);
for(let i=0;i<10;i++){
builder.item("about", toast, null, "./icon/about.png");
}
builder.item("no-click");
return builder.build();
})();I18N: 国际化
ContextMenu.i18n = (key) => {
// replace this method in your use
return "i18n:" + key;
}
支持自定义样式
/*参考 "contextmenu.js/contextmenu/dist/contextmenu.css"*/
/*自定义样式覆盖内置*/构建
# serve
yarn serve
# build
yarn build