{"id":19345543,"url":"https://github.com/future-team/eg-overlay","last_synced_at":"2025-07-18T05:08:58.966Z","repository":{"id":57220269,"uuid":"85938296","full_name":"future-team/eg-overlay","owner":"future-team","description":"遮罩块组件，用于在一个区域的四个边或者四个角显示遮罩层","archived":false,"fork":false,"pushed_at":"2017-03-28T08:39:23.000Z","size":21,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-25T18:16:21.945Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/future-team.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-23T10:44:37.000Z","updated_at":"2017-03-28T08:38:02.000Z","dependencies_parsed_at":"2022-08-28T23:23:14.977Z","dependency_job_id":null,"html_url":"https://github.com/future-team/eg-overlay","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/future-team/eg-overlay","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/future-team%2Feg-overlay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/future-team%2Feg-overlay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/future-team%2Feg-overlay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/future-team%2Feg-overlay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/future-team","download_url":"https://codeload.github.com/future-team/eg-overlay/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/future-team%2Feg-overlay/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265703637,"owners_count":23814044,"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":"2024-11-10T04:06:56.453Z","updated_at":"2025-07-18T05:08:58.944Z","avatar_url":"https://github.com/future-team.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# eg-overlay\n\n遮罩块：鼠标移动到某个元素的时候显示一条遮罩。\n```jsx\n  \u003cOverlay\n        overlayContent={\n        \u003cdiv style={{color:'#fff',fontSize:'12px'}}\u003e\n            \u003cspan style={{marginRight:'20px'}}\u003e删除\u003c/span\u003e\n            \u003cspan\u003e编辑\u003c/span\u003e\n        \u003c/div\u003e\n        }\n        position='top-right'\u003e\n        \u003cdiv style={{width:'200px',height:'200px',background:'red'}}\u003e\n            这里是内容区域\n        \u003c/div\u003e\n  \u003c/Overlay\u003e\n```\n```jsx\n  \u003cOverlay\n        overlayList={\n            [{\n                content:'预览',\n                callback:function(){\n                    alert('view');\n                }\n              },{\n                content:'删除',\n                callback:function(){\n                    alert('delete');\n                }\n              },{\n                content:'编辑',\n                callback:function() {\n                    alert('edit')\n                }\n              }]\n        }\n        position='top'\u003e\n        \u003cdiv style={{width:'200px',height:'200px',background:'red'}}\u003e\n            这里是内容区域\n        \u003c/div\u003e\n  \u003c/Overlay\u003e\n```\n\n#### `\u003cOverlay\u003e` Props:\n- overlayContent  overlay的内容，也就是遮罩条中的内容 \n- overlayList  和overlayContent不应该同时存在，和overlayContent的区别在于用数组的形式配置内容，\n并且提默认样式。数组中的每个item结构为{item:'',callback:function(){}},item既可以为string，也可以为react元素\n- position  overlay的位置，可选top、bottom、left、right、top-left、top-right、bottom-left、bottom-right 默认bottom-right\n- show  何时显示遮罩条，可选always、hover（always会一直显示，hover只有在鼠标移动到的时候会显示）默认always\n- children（子元素） 遮罩条依附的元素.\n\n\n\n### Contributing\n\n- Fork the project\n- Run the project in development view demo: `$ npm run demo`\n- Make changes.\n- Add appropriate tests\n- `$ npm run test`\n- If tests don't pass, make them pass.\n- Update README with appropriate docs.\n- Rnn build\n- `$ npm run build`\n- Commit and PR.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffuture-team%2Feg-overlay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffuture-team%2Feg-overlay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffuture-team%2Feg-overlay/lists"}