{"id":24113873,"url":"https://github.com/michaeljohnn/com-context-menu","last_synced_at":"2025-02-28T10:27:24.296Z","repository":{"id":81696946,"uuid":"191155340","full_name":"michaeljohnn/com-context-menu","owner":"michaeljohnn","description":"right click context menu","archived":false,"fork":false,"pushed_at":"2019-06-20T02:36:14.000Z","size":14,"stargazers_count":0,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-11T04:53:12.167Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/michaeljohnn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-06-10T11:28:25.000Z","updated_at":"2019-06-20T02:36:16.000Z","dependencies_parsed_at":"2023-03-31T13:32:29.315Z","dependency_job_id":null,"html_url":"https://github.com/michaeljohnn/com-context-menu","commit_stats":null,"previous_names":["michaeljohnn/com-context-menu"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaeljohnn%2Fcom-context-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaeljohnn%2Fcom-context-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaeljohnn%2Fcom-context-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaeljohnn%2Fcom-context-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/michaeljohnn","download_url":"https://codeload.github.com/michaeljohnn/com-context-menu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241137888,"owners_count":19916220,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-11T04:50:55.874Z","updated_at":"2025-02-28T10:27:24.278Z","avatar_url":"https://github.com/michaeljohnn.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# com-context-menu 使用文档\n---\n### tnpm 安装\n\n```\ntnpm i @ali/com-context-menu\n```\n---\n### 用法\n\n```\nimport React, { Component } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ContentMenu from \"../src/index\"; //引入自定义菜单组件\n\nexport default class App extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {};\n  }\n\n  componentWillMount() {\n    this.colums = [    //自定义右键菜单的内容\n      {\n        name: \"复制\",\n        key: \"copy\",\n        underLine: true, //是否有分割线\n        onClick: () =\u003e {\n          const { dom } = this.state;\n          console.log(dom,'在这里可以自定义点击事件，信息都在dom里面');\n        }\n      },\n      {\n        name: \"粘贴\",\n        key: \"past\",\n        onClick: () =\u003e {\n          console.log(\"粘贴\");\n        }\n      }\n    ];\n  }\n\n  getDictId = dom =\u003e {  //这个就是通过getTargetInfor获取的目标节点的信息,自己把Dom存下来就行了,函数名字随便\n    console.log(dom, \"这个就是通过getTargetInfor获取的目标节点的信息\");\n    this.setState({\n      dom: dom\n    });\n  };\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cContentMenu\n          actionScopeClassName=\"app\" // 右键时出现自定义菜单的区域的类名 class\n          columns={this.colums} // 右键菜单的内容\n          getTargetDom={this.getTargetDom} // 通过getTargetDom获取右键目标节点的全部信息\n        /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById(\"app\"));\n\n```\n---\n### API\n\n| Option | Type | Description |\n| --- | --- | --- |\n| actionScopeClassName | string | 右键时出现自定义菜单的区域 class |\n| columns | Object | 自定义右键菜单的内容 |\n| getTargetDom | function | 通过getTargetInfor获取右键目标节点的全部信息 |\n\n---\n### columns\n\n| Option | Type | Description |\n| --- | --- | --- |\n| name | string | 名称 |\n| key | string | 唯一key |\n| underLine | boolean | 分割线，可不写 |\n| onClick | function | 点击事件 |","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaeljohnn%2Fcom-context-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmichaeljohnn%2Fcom-context-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaeljohnn%2Fcom-context-menu/lists"}