{"id":15368175,"url":"https://github.com/hubvue/exposure-lib","last_synced_at":"2025-06-15T17:02:24.530Z","repository":{"id":36470278,"uuid":"226786147","full_name":"hubvue/exposure-lib","owner":"hubvue","description":"Based on the InterfaceObserver API, a callback is performed when a bound element appears in the viewport.","archived":false,"fork":false,"pushed_at":"2025-03-17T18:01:58.000Z","size":1212,"stargazers_count":17,"open_issues_count":16,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-15T12:53:39.885Z","etag":null,"topics":["interfaceobserver-api","polyfill","threshold","vue","vue-exposure"],"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/hubvue.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"hubvue"}},"created_at":"2019-12-09T04:42:10.000Z","updated_at":"2024-03-19T13:00:57.000Z","dependencies_parsed_at":"2024-07-09T18:29:41.366Z","dependency_job_id":null,"html_url":"https://github.com/hubvue/exposure-lib","commit_stats":{"total_commits":159,"total_committers":4,"mean_commits":39.75,"dds":0.5849056603773585,"last_synced_commit":"28a93c5cd591db504027ad23670aef54a5ec87fc"},"previous_names":["hubvue/vue-exposure"],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hubvue%2Fexposure-lib","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hubvue%2Fexposure-lib/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hubvue%2Fexposure-lib/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hubvue%2Fexposure-lib/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hubvue","download_url":"https://codeload.github.com/hubvue/exposure-lib/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249076543,"owners_count":21208811,"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":["interfaceobserver-api","polyfill","threshold","vue","vue-exposure"],"created_at":"2024-10-01T13:28:33.131Z","updated_at":"2025-04-15T12:53:52.027Z","avatar_url":"https://github.com/hubvue.png","language":"JavaScript","funding_links":["https://github.com/sponsors/hubvue"],"categories":[],"sub_categories":[],"readme":"# exposure-lib\n\n[中文文档](./README.zh-CN.md)\n\n[Support Vue 2.x Doc](./packages/vue2/README.md)\n\n[Support Vue 3.x Doc](./packages/vue/README.md)\n\n\nBased on the InterfaceObserver API, listens for elements to be visible or not, and executes a callback function when the element appears in the viewport.\n\n## Quick Start\n\n### Install\n\n\u003e pnpm add @exposure-lib/core\n\nSince the compatibility of the InterfaceObserver API is still not well supported on some low version browsers, you can introduce polyfill to `@exposure-lib/core` beforehand to use it normally.\n\n\u003e pnpm add @exposure-lib/polyfill\n\n**Introducing the package**\n\n```ts\nimport '@exposure-lib/polyfill'\nimport * as Exposure from '@exposure-lib/core'\n```\n\n\u003e Note: the polyfill package must be introduced before the core package\n\n### Usage\n\nUsing `exposure` to listen to whether an element appears in the visible area is very simple and requires only two steps.\n\n1. First you need to create an `Exposure` to listen to the element, which is created by the `createExposure` method.\n\n```ts\nimport { createExposure } from '@exposure-lib/core'\nconst exposure = createExposure()\n```\n\n2. Then call the `observe` method of `Exposure` to listen for the element\n\n```ts\nconst el = document.getElementById('el')\nexposure.observe(el, () =\u003e {\n  console.log('exposure')\n})\n```\nThe `exposure.observe` method accepts at least two arguments, the first one is an element of type Element, the second one is a Handler, which is executed when the monitored element appears in the visible area, and the third one is a listening threshold (optional).\n\n\n### threshold\n\nBy default, the execution of the exposure callback waits for the entire bound element to be fully wrapped before it is executed. If you have a need to expose an element when a certain percentage of it appears, the\nyou can set the threshold, using the following two methods.\n\n#### Exposure threshold\n\nEach call to the `createExposure` method to create an `Exposure` supports passing in a threshold for use by elements under the current `Exposure` scope.\n\n```ts\nconst exposure = createExposure(0.2)\n```\n\nAs shown in the code above, the callback function is executed when the exposure ratio of the element reaches 0.2.\n\n#### Element threshold\n\nIf you want the exposure ratio of an element to be different from that of other elements, you can set the threshold for the element separately\n\n```ts\nconst el = document.getElementById('el')\nconst exposure = createExposure(0.2)\n\nexposure.observe(el, () =\u003e {\n  console.log('exposure')\n}, 0.8)\n\n```\n\n\u003e Needs attention：Element threshold \u003e Exposure threshold\n\n\n### Handler\nHandler has two types: function or object\n\n**Function**\n\nThe function type is the more common way of writing, the function Handler will only be triggered once when the element is exposed and the `threshold` is met.\n\n**Object**\n\nA Handler of object type needs to have one of the `enter` and `leave` attributes, and the values of the `enter` and `leave` attributes are of function type.\n\n- enter: enter Handler is triggered once when an element enters exposure and `threshold` is met.\n- leave: the leave Handler is triggered once after the enter Handler is triggered and the element leaves the visible area completely.\n\n\n### resetExposure\n\nExposure callbacks are executed in a single instance, which means that once an exposure has been made and the callback executed, the callback function will not be executed again. If you need to expose again, you need to call `resetExposure` to reset it.\n\n```ts\nimport { resetExposure } from '@exposure-lib/core'\n// reset all elements\nresetExposure()\n// reset el element\nconst el = document.getElementById('el')\nresetExposure(el)\n```\n\n### unobserve\n\nWhen the page is destroyed and the listener element in the current page needs to be unobserved, call the `exposure.unobserve` method to unobserve the listener element.\n\n```ts\nconst el = document.getElementById('el')\nconst exposure = createExposure(0.2)\n\nexposure.observe(el, () =\u003e {\n  console.log('exposure')\n}, 0.8)\n\n// Page Destroy\ndestory(() =\u003e {\n  exposure.unobserve(el)\n})\n```\n### Cautions\n\nexposure-lib listens to elements in strict mode, when an element's `visibility` is `hidden` or `width` is `0` or `height` is `0` it will not be listened to.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhubvue%2Fexposure-lib","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhubvue%2Fexposure-lib","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhubvue%2Fexposure-lib/lists"}