https://github.com/michaeljohnn/com-context-menu
right click context menu
https://github.com/michaeljohnn/com-context-menu
Last synced: over 1 year ago
JSON representation
right click context menu
- Host: GitHub
- URL: https://github.com/michaeljohnn/com-context-menu
- Owner: michaeljohnn
- Created: 2019-06-10T11:28:25.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-06-20T02:36:14.000Z (about 7 years ago)
- Last Synced: 2025-01-11T04:53:12.167Z (over 1 year ago)
- Language: JavaScript
- Size: 13.7 KB
- Stars: 0
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# com-context-menu 使用文档
---
### tnpm 安装
```
tnpm i @ali/com-context-menu
```
---
### 用法
```
import React, { Component } from "react";
import ReactDOM from "react-dom";
import ContentMenu from "../src/index"; //引入自定义菜单组件
export default class App extends Component {
constructor(props) {
super(props);
this.state = {};
}
componentWillMount() {
this.colums = [ //自定义右键菜单的内容
{
name: "复制",
key: "copy",
underLine: true, //是否有分割线
onClick: () => {
const { dom } = this.state;
console.log(dom,'在这里可以自定义点击事件，信息都在dom里面');
}
},
{
name: "粘贴",
key: "past",
onClick: () => {
console.log("粘贴");
}
}
];
}
getDictId = dom => { //这个就是通过getTargetInfor获取的目标节点的信息,自己把Dom存下来就行了,函数名字随便
console.log(dom, "这个就是通过getTargetInfor获取的目标节点的信息");
this.setState({
dom: dom
});
};
render() {
return (
);
}
}
ReactDOM.render(, document.getElementById("app"));
```
---
### API
| Option | Type | Description |
| --- | --- | --- |
| actionScopeClassName | string | 右键时出现自定义菜单的区域 class |
| columns | Object | 自定义右键菜单的内容 |
| getTargetDom | function | 通过getTargetInfor获取右键目标节点的全部信息 |
---
### columns
| Option | Type | Description |
| --- | --- | --- |
| name | string | 名称 |
| key | string | 唯一key |
| underLine | boolean | 分割线，可不写 |
| onClick | function | 点击事件 |