{"id":17176177,"url":"https://github.com/wanglin2/simple-novice-guide","last_synced_at":"2025-04-13T17:07:13.388Z","repository":{"id":97270823,"uuid":"607527831","full_name":"wanglin2/simple-novice-guide","owner":"wanglin2","description":"一个简单的新手引导库","archived":false,"fork":false,"pushed_at":"2024-02-22T06:23:13.000Z","size":116,"stargazers_count":16,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-13T17:06:50.090Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://wanglin2.github.io/simple-novice-guide/","language":"TypeScript","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/wanglin2.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":"2023-02-28T06:31:45.000Z","updated_at":"2025-04-09T10:24:21.000Z","dependencies_parsed_at":"2025-01-15T01:17:58.608Z","dependency_job_id":null,"html_url":"https://github.com/wanglin2/simple-novice-guide","commit_stats":{"total_commits":8,"total_committers":1,"mean_commits":8.0,"dds":0.0,"last_synced_commit":"135f889ed65775e41173781d72b856a46c5478f5"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wanglin2%2Fsimple-novice-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wanglin2%2Fsimple-novice-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wanglin2%2Fsimple-novice-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wanglin2%2Fsimple-novice-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wanglin2","download_url":"https://codeload.github.com/wanglin2/simple-novice-guide/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248750073,"owners_count":21155685,"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-10-14T23:59:24.536Z","updated_at":"2025-04-13T17:07:13.351Z","avatar_url":"https://github.com/wanglin2.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Simple novice guide\n\n一个简单的新手引导库。\n\n# 安装\n\n```bash\nnpm i simple-novice-guide\n```\n\n# 使用\n\n```js\nimport SimpleNoviceGuide from 'simple-novice-guide'\n\nnew SimpleNoviceGuide({\n    steps: [\n        {\n            element: '#id',\n            title: '我是标题',\n            text: '我是信息',\n            img: '我是图片'\n        }\n    ]\n}).start()\n```\n\n如果要使用`umd`格式的文件，可以安装完后在`node_modules/simple-novice-guide/dist/`目录里选择使用`dist.js`或`dist.min.js`文件。\n\n# 本地开发\n\n1.开启`ts`编译\n\n```bash\nnpm run tsc\n```\n\n2.开启打包编译\n\n```bash\nnpm run build\n```\n\n3.开启页面服务\n\n```bash\nnpx http-server -e js -c-1\n```\n\n访问`[ip][port]/index.html`。\n\n然后就可以愉快的修改代码了，不过没有热更新功能哦，所以记得修改后要刷新页面。\n\n# 文档\n\n## 创建实例\n\n```js\nconst noviceGuide = new SimpleNoviceGuide(options)\n```\n\n### 参数options\n\n对象类型，可以传递以下选项：\n\n| 属性             | 类型     | 默认值             | 描述                                                         |\n| ---------------- | -------- | ------------------ | ------------------------------------------------------------ |\n| steps            | array    |                    | 步骤数据，必填，信息数据见下表                               |\n| padding          | number   | 10                 | 高亮元素和信息框元素的内边距，单位`px`                       |\n| margin           | number   | 10                 | 高亮元素和信息框元素之间的间距，单位`px`                     |\n| boxShadowColor   | string   | rgba(0, 0, 0, 0.5) | 高亮元素的box-shadow颜色                                     |\n| transition       | string   | all 0.3s ease-out  | 高亮元素过渡效果                                             |\n| borderRadius     | string   | 5px                | 高亮元素和信息框元素的圆角                                   |\n| highlightElClass | string   |                    | 要添加到高亮元素上的css类名                                  |\n| backgroundColor  | string   | \\#fff              | 信息框元素的背景颜色                                         |\n| infoElClass      | string   |                    | 要添加到信息框元素上的css类名                                |\n| prevText         | string   | 上一步             | 上一步按钮的文字                                             |\n| nextText         | string   | 下一步             | 下一步按钮的文字                                             |\n| completeText     | string   | 完成               | 完成按钮的文字                                               |\n| showIndicator    | boolean  | true               | 是否显示信息框内的指示器                                     |\n| zIndex           | number   | 9999               | 高亮元素和信息框的z-index                                    |\n| useCustomInfo    | boolean  | false              | 是否使用自定义的信息框，如果开启，需要传递getCustomInfoEl选项 |\n| getCustomInfoEl  | function | null               | 返回自定义信息框元素                                         |\n\n### options.steps属性\n\n`options.steps`属性值需为一个对象数组，对象的结构如下：\n\n| 属性    | 类型                  | 默认值 | 描述                                                         |\n| ------- | --------------------- | ------ | ------------------------------------------------------------ |\n| element | HTMLElement \\| string |        | 该步骤需要高亮的`html`元素，可以是一个选择器，也可以是`dom`节点对象，如果当前步骤不需要高亮元素，也可以不传 |\n| title   | string \\| number      |        | 当前步骤的标题                                               |\n| text    | string \\| number      |        | 当前步骤的信息                                               |\n| img     | string                |        | 当前步骤的图片                                               |\n\n\n\n## 实例属性\n\n### noviceGuide.options\n\n选项对象。\n\n\n\n### noviceGuide.steps\n\n步骤列表数据。\n\n\n\n### noviceGuide.currentStepIndex\n\n当前所在步骤的索引。\n\n\n\n## 实例方法\n\n### noviceGuide.start()\n\n开始。\n\n\n\n### noviceGuide.next()\n\n下一步。\n\n\n\n### noviceGuide.prev()\n\n上一步。\n\n\n\n### noviceGuide.jump(stepIndex: number)\n\n跳转到指定步骤。\n\n\n\n### noviceGuide.done()\n\n结束。\n\n\n\n### noviceGuide.isFirstStep()\n\n是否是第一步。\n\n\n\n### noviceGuide.isLastStep()\n\n是否是最后一步。\n\n\n\n### noviceGuide.on(eventName, (...args) =\u003e {})\n\n监听事件。\n\n事件发送继承的是[eventemitter3](https://github.com/primus/eventemitter3)，详细文档可以参考它的文档。\n\n实例会发出的事件如下：\n\n| 事件名             | 回调参数                  | 描述         |\n| ------------------ | ------------------------- | ------------ |\n| before-step-change | stepIndex（当前步骤索引） | 即将切换步骤 |\n| after-step-change  | stepIndex（当前步骤索引） | 步骤切换完毕 |\n| done               |                           | 新手引导结束 |\n\n\n\n### noviceGuide.emit(eventName, ...args)\n\n发送事件。\n\n\n\n### noviceGuide.off(eventName, fn?)\n\n解除监听事件。\n\n\n\n## 自定义信息框\n\n如果内置的信息框无法满足你的需求，也可以自定义信息框，首先实例化时需要传递以下两个参数：\n\n```js\nconst noviceGuide = new SimpleNoviceGuide({\n    useCustomInfo: true,\n    getCustomInfoEl: async (step) =\u003e {\n        return document.querySelector('.customInfoBox')\n    }\n})\n```\n\n`getCustomInfoEl`方法需要返回你自定义的信息框的节点，考虑到可能有异步的操作，所以统一返回一个`Promise`。\n\n注意你自定义的信息框元素需要设置绝对定位，`z-index`也是必不可少的：\n\n```css\n.customInfoBox {\n    position: absolute;\n    z-index: 99999;\n}\n```\n\n然后需要在你的信息框中创建相应的上一步、下一步、完成的按钮，然后手动调用下列方法：\n\n```js\nnoviceGuide.prev()\n\nnoviceGuide.next()\n\nnoviceGuide.done()\n```\n\n通常还需要监听`done`事件来删除或隐藏你的自定义信息框：\n\n```js\nnoviceGuide.on('done', () =\u003e {\n    customInfoBoxEl.style.display = 'none'\n})\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwanglin2%2Fsimple-novice-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwanglin2%2Fsimple-novice-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwanglin2%2Fsimple-novice-guide/lists"}