{"id":26235967,"url":"https://github.com/helti/guide-layer","last_synced_at":"2025-08-21T01:10:23.136Z","repository":{"id":39037007,"uuid":"279081964","full_name":"HelTi/guide-layer","owner":"HelTi","description":"基于vue jsx 的新手引导层组件","archived":false,"fork":false,"pushed_at":"2023-03-05T09:06:22.000Z","size":3387,"stargazers_count":7,"open_issues_count":12,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-24T21:19:49.139Z","etag":null,"topics":["guide","layer","vue"],"latest_commit_sha":null,"homepage":"","language":"Vue","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/HelTi.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-12T14:31:27.000Z","updated_at":"2024-02-04T05:53:10.000Z","dependencies_parsed_at":"2025-03-13T03:29:39.710Z","dependency_job_id":null,"html_url":"https://github.com/HelTi/guide-layer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/HelTi/guide-layer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HelTi%2Fguide-layer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HelTi%2Fguide-layer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HelTi%2Fguide-layer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HelTi%2Fguide-layer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HelTi","download_url":"https://codeload.github.com/HelTi/guide-layer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HelTi%2Fguide-layer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266135014,"owners_count":23881774,"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":["guide","layer","vue"],"created_at":"2025-03-13T03:19:08.843Z","updated_at":"2025-07-20T13:33:12.707Z","avatar_url":"https://github.com/HelTi.png","language":"Vue","readme":"# e-guide-layer\n基于vue jsx的新手引导层组件，只需要配置一定的参数即可，项目需要支持vue jsx\n\n## 演示\n![演示](images/gif.gif)\n## 安装\n```js\nnpm install e-guide-layer --save\n```\n## 使用\n```js\nimport 'e-guide-layer/dist/e-guide-layer.css'\nimport eGuideLayer from 'e-guide-layer'\n\nVue.use(eGuideLayer)\n```\n## dev\n```js\n// node \u003e=8.9\nnpm run serve\n```\n## build\n```\nnpm run build\n```\n### 基础代码示例\n```js\n\u003ce-guide-layer\n      :current-index.sync=\"guideActiveIndex\"\n      :guide-list=\"guideList\"\n/\u003e\n\nexport default {\n    data() {\n    return {\n      guideActiveIndex: 0,\n      guideList: [\n        {\n          confirmBtnText: '下一步',\n          targetDom: '.step1',\n          clickHandle: () =\u003e {\n            this.guideActiveIndex = 1\n          }\n        },\n        {\n          confirmBtnText: '下一步',\n          targetDom: '.step2',\n          clickHandle: () =\u003e {\n            this.guideActiveIndex = 2\n          },\n          render: () =\u003e {\n            return (\n              \u003cdiv\n                style=\"background-color:#fff;\"\n                onClick={this.step1ClickHandle}\n              \u003e\n                自定义引导层区域\n              \u003c/div\u003e\n            )\n          }\n        },\n        {\n          confirmBtnText: '知道了',\n          targetDom: '.step3',\n          direction: 'down',\n          clickHandle: () =\u003e {\n            this.guideActiveIndex = 3\n          }\n        }\n      ],\n    }\n  },\n\n  methods: {\n\n  },\n};\n\n```\n\n## API 配置说明\n\n### e-guide-layer  Props\n|  参数   | 说明  |  类型  |  默认值  |\n|  ----  | ----  | ----  | ----  |\n| guide-list  | 引导层配置集合 | Array | [] |\n| current-index  | 当前激活的引导层 | Number | 0 |\n| z-index  | 引导层最小的z-index值 | Number | 999 |\n\n#### guide-list的GuideItem 配置项\n|  参数   | 说明  |  类型  |  默认值  |\n|  ----  | ----  | ----  | ----  |\n| targetDom  | 引导层指向的节点(class,id,dom) | String | null |\n| confirmBtnText  | 引导层确定按钮 | String | 下一步 |\n| padding  | 覆盖指向节点的paddng,使产生空隙 | Number | 6 |\n| guideImgSrc  | 指向节点与确认按钮之间的图片 | String | 默认箭头图片|\n| guideImgHeight  | 指引图片的高度 | String | 30px|\n| direction  | 引导指示实在目标的上面还是下面 (up  down) | String | up|\n| clickHandle  | 点击引导层确定按钮的事件 | function | null|\n| render  | 使用jsx自定义的内容 | function | null|\n\n## License\nMIT\n\n\n\n\n\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhelti%2Fguide-layer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhelti%2Fguide-layer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhelti%2Fguide-layer/lists"}