{"id":36418130,"url":"https://github.com/yaowei9363/vue-side-catalog","last_synced_at":"2026-01-11T17:01:21.961Z","repository":{"id":37630235,"uuid":"234254528","full_name":"yaowei9363/vue-side-catalog","owner":"yaowei9363","description":"A Catalog Component for Vue.js","archived":false,"fork":false,"pushed_at":"2020-07-04T15:24:03.000Z","size":3099,"stargazers_count":78,"open_issues_count":10,"forks_count":11,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-10-01T21:56:56.500Z","etag":null,"topics":["catalog","directory","vue"],"latest_commit_sha":null,"homepage":"","language":"Vue","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/yaowei9363.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}},"created_at":"2020-01-16T06:51:02.000Z","updated_at":"2025-06-27T09:07:46.000Z","dependencies_parsed_at":"2022-08-18T03:10:10.389Z","dependency_job_id":null,"html_url":"https://github.com/yaowei9363/vue-side-catalog","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/yaowei9363/vue-side-catalog","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yaowei9363%2Fvue-side-catalog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yaowei9363%2Fvue-side-catalog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yaowei9363%2Fvue-side-catalog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yaowei9363%2Fvue-side-catalog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yaowei9363","download_url":"https://codeload.github.com/yaowei9363/vue-side-catalog/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yaowei9363%2Fvue-side-catalog/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28314254,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-11T14:58:17.114Z","status":"ssl_error","status_checked_at":"2026-01-11T14:55:53.580Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["catalog","directory","vue"],"created_at":"2026-01-11T17:00:49.762Z","updated_at":"2026-01-11T17:01:21.940Z","avatar_url":"https://github.com/yaowei9363.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-side-catalog\n\n[中文文档](https://github.com/yaowei9363/vue-side-catalog/blob/v2.0/README.zh-CN.md)\n\n[v1.0](https://github.com/yaowei9363/vue-side-catalog/blob/v1.0/README.md)\n\nA vue-based side catalog component.\n![intro](http://ww1.sinaimg.cn/large/e8107c14ly1gg4udp1prhg20yp0lfe82.gif)\n\n[online example](https://codesandbox.io/s/vue-side-catalogv2-0xu99?file=/src/App.vue)\n\n## Install\n```\nnpm install vue-side-catalog -S\n```\n## Start\n```javascript\n\u003ctemplate\u003e\n \u003cdiv id=\"app\"\u003e\n   \u003cdiv id=\"demo\"\u003e\n      \u003ch1\u003eJavaScript\u003c/h1\u003e\n      \u003ch2\u003eHistory\u003c/h2\u003e\n      \u003ch3\u003eCreation at Netscape\u003c/h3\u003e\n      \u003cp\u003e\n        The Mosaic web browser was released in 1993. \n        As the first browser with a graphical user interface accessible to non-technical people, \n        it played a prominent role in the rapid growth of the nascent World Wide Web\n      \u003c/p\u003e\n      \u003ch3\u003eAdoption by Microsoft\u003c/h3\u003e\n      \u003ch3\u003eThe rise of JScript\u003c/h3\u003e\n      \u003ch2\u003eTrademark\u003c/h2\u003e\n      \u003ch2\u003eWebsite client-side usage\u003c/h2\u003e\n   \u003c/div\u003e\n  \u003cside-catalog \n    class=\"catalog\"\n    v-bind=\"catalogProps\"\n  \u003e\u003c/side-catalog\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\nimport SideCatalog from 'vue-side-catalog'\nimport 'vue-side-catalog/lib/vue-side-catalog.css'\nexport default {\n  components: {\n    SideCatalog,\n  },\n  data() {\n    return {\n      catalogProps:{\n         container: '#demo',\n      },\n    };\n  },\n}\n\u003cstyle\u003e\n  .catalog {\n    position: fixed;\n    top: 50px;\n    right: 50px;\n  }\n\u003c/style\u003e\n```\n\u003e Note： The **`container`** attribute is required and specifies the container of the article.\n\nThe effect is as follows：\n\n![start.png](http://ww1.sinaimg.cn/large/e8107c14ly1gg4v6a6jiij21yi17wgwl.jpg)\n\n\n## Custom catalog labels\nBy default, the component will use the `\u003ch\u003e` tag of a direct subset of the` container` element as the catalog content.,\nThe corresponding rule is:\n\n* `h2` =\u003e `First level catalog`\n\n* `h3` =\u003e `Secondary catalog`\n\n* `h4` =\u003e `Tertiary catalog`\n\n* `h5` =\u003e `Fourth level catalog`\n\nTo modify this rule, you can use the **`levelList`** attribute. The default value of this attribute is` [\"h2\", \"h3\", \"h4\", \"h5\"] `corresponding to the above rule\n\u003e Note: Custom title tags currently only support html tags that are a direct subset of the `container` element\n```javascript\n data(){\n    return {\n      catalogProps:{\n        levelList: [\"h1\", \"h2\", \"h3\", \"h4\", \"h5\"], // make h1 a first-level catalog\n        // levelList: [\"h3\", \"h1\", \"p\", \"span\"], // specifying different tags as directories\n      },\n    };\n  },\n```\nh1 as first-level catalog:\n\n![levelList.png](http://ww1.sinaimg.cn/large/e8107c14ly1gg4vmsa86sj21z218etk9.jpg)\n\n## Scrolling inside the container\nYou can use the **`innerScroll`** attribute to specify the scroll event to listen for `container`, if you do not specify this attribute, the default is to listen for `Window`\n```javascript\n data(){\n    return {\n      catalogProps:{\n        container: '#demo',\n        innerScroll: true,\n        height: 'calc(100% - 20px)'\n      },\n    };\n  },\n```\n\u003e Note：If the catalog is too long, you need to set a fixed height for the catalog to automatically scroll.You can use the `height` parameter, or add css directly from the outside\n\nThe effect is as follows:：\n\n![innerScroll.gif](http://ww1.sinaimg.cn/large/e8107c14ly1gg5j10weung20z30lx4qr.gif)\n\n[online example](https://codesandbox.io/s/vue-side-catalogv2innerscroll-t8j1o?file=/src/App.vue:31817-31860)\n\n## Customize catalog style\n\nYou can customize each row of catalog or icon through `slot`\n\n### Custom icon\n \n`Iconfont` is used here\n\n```js\n  \u003cside-catalog \n    class=\"catalog\"\n    v-bind=\"catalogProps\"\n  \u003e\n    \u003ctemplate #default=\"{level, isActive}\"\u003e\n      \u003ci :class=\"['iconfont', isActive ? 'icon-smile' : 'icon-normal']\"\u003e\u003c/i\u003e\n    \u003c/template\u003e\n  \u003c/side-catalog\u003e\n```\n\n![icon.png](http://ww1.sinaimg.cn/large/e8107c14ly1gg5kemjevsj221018yh5t.jpg)\n\n[online example](https://codesandbox.io/s/vue-side-catalogv2slot-imwtq?file=/src/App.vue)\n\n---\nUse the `iconLeft` parameter to align all icons to the left, and `lineLeft` to adjust the left line position\n\n```js\n  \u003cside-catalog \n    class=\"catalog\"\n    v-bind=\"catalogProps\"\n  \u003e\n    \u003ctemplate #default=\"{level, isActive}\"\u003e\n      \u003ci :class=\"['line-style', isActive ? 'line-style--active' : '']\"\u003e\u003c/i\u003e\n    \u003c/template\u003e\n  \u003c/side-catalog\u003e\n```\n```js\n data(){\n    return {\n      catalogProps:{\n        container: \"#demo\",\n        iconLeft: true,\n        lineLeft: 0\n      },\n    };\n  },\n```\n```css\n.line-style {\n  display: inline-block;\n  height: 20px;\n  width: 3px;\n  background: transparent;\n}\n.line-style--active {\n  background: currentColor;\n}\n```\n![leftIcon.gif](http://ww1.sinaimg.cn/large/e8107c14ly1gg5rk4r2l6g20y50lvb2a.gif)\n[online example](https://codesandbox.io/s/vue-side-catalogv2lefticon-mbge4?file=/src/App.vue)\n\n### Customize each line of catalog \n```js\n  \u003cside-catalog \n    class=\"catalog\"\n    v-bind=\"catalogProps\"\n  \u003e\n    \u003ctemplate #row=\"{level, isActive, title}\"\u003e\n      // ...\n    \u003c/template\u003e\n  \u003c/side-catalog\u003e\n```\n\n## Props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| container | `String` | - | (**necessary**)Specify the article's container |\n| innerScroll | `Boolean` | `false` | Whether to scroll inside the container |\n| activeColor | `String` | `#006bff` | Color when in current catalog |\n| levelGap | `Number` | 20 | Offsets of different levels of directories |\n| iconLeft | `Boolean` | `false` | Whether the icon of each level of catalog is left aligned and does not follow the offset |\n| lineLeft | `Number` | 22 | The left value of the left line of the catalog |\n| lineShow | `Boolean` | `true` | Whether to show the left line of the catalog |\n| title | `String` | - | Title at the top of the table of contents |\n| height | `String` | - | The height of the catalog can be set to the value of height in css.When the catalog is too long and exceeds the height, it will automatically scroll to the current catalog.Of course, you can also set the height directly in the parent component |\n| watch | `Boolean` | false | Whether to enable dom monitoring, if there is a dom change in `container`, it will recalculate the offsetTop of each level of catalog.For example, using `v-html` dynamic rendering, or folding the panel to expand and collapse, etc. need to be recalculated |\n| levelList | `Array` | `[\"h2\", \"h3\", \"h4\", \"h5\"]` | Assign tags to each level of catalog |\n\n## Methods\n\n| Name | Parameters | Description |\n| --- | --- | --- |\n| initActive | - | Make the first line of the catalog active |\n| setTopList | - | Calculate the offsetTop of each level of the catalog. When the deviation between the article and the catalog does not correspond, you can call this method to recalculate |\n\n## Slot\n| Name | Description |\n| --- | --- |\n| default | Customize the icon of each line of catalog, the parameter is `{level, isActive}` |\n| row | Customize each line of catalog, the parameter is `{level, isActive, title}` |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyaowei9363%2Fvue-side-catalog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyaowei9363%2Fvue-side-catalog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyaowei9363%2Fvue-side-catalog/lists"}