{"id":13563833,"url":"https://github.com/ndelvalle/v-blur","last_synced_at":"2025-04-06T02:11:34.781Z","repository":{"id":22539866,"uuid":"96629246","full_name":"ndelvalle/v-blur","owner":"ndelvalle","description":"⬜️ Vue directive to blur an element dynamically","archived":false,"fork":false,"pushed_at":"2023-03-07T10:58:27.000Z","size":4684,"stargazers_count":184,"open_issues_count":16,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-12T09:23:48.104Z","etag":null,"topics":["vue","vue-directive","vuejs"],"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/ndelvalle.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}},"created_at":"2017-07-08T16:02:03.000Z","updated_at":"2024-09-12T00:17:16.000Z","dependencies_parsed_at":"2024-01-02T23:38:29.242Z","dependency_job_id":"4aa8eb95-4c50-4bfe-87de-01d4dfce8150","html_url":"https://github.com/ndelvalle/v-blur","commit_stats":{"total_commits":133,"total_committers":8,"mean_commits":16.625,"dds":0.6015037593984962,"last_synced_commit":"835ce3d2fcbe56963ea8136a3ec1e462eb68d421"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndelvalle%2Fv-blur","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndelvalle%2Fv-blur/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndelvalle%2Fv-blur/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndelvalle%2Fv-blur/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ndelvalle","download_url":"https://codeload.github.com/ndelvalle/v-blur/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247423515,"owners_count":20936626,"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":["vue","vue-directive","vuejs"],"created_at":"2024-08-01T13:01:23.751Z","updated_at":"2025-04-06T02:11:34.756Z","avatar_url":"https://github.com/ndelvalle.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","UI实用程序","Components \u0026 Libraries","UI Utilities","UI Utilities [🔝](#readme)"],"sub_categories":["杂","UI Utilities","Miscellaneous"],"readme":"# v-blur\n\n[ ![Codeship Status for ndelvalle/v-blur](https://app.codeship.com/projects/3a56b780-4639-0135-c530-069e5644f905/status?branch=master)](https://app.codeship.com/projects/231348)\n[![Coverage Status](https://coveralls.io/repos/github/ndelvalle/v-blur/badge.svg?branch=master)](https://coveralls.io/github/ndelvalle/v-blur?branch=master)\n[![dependencies Status](https://david-dm.org/ndelvalle/v-blur/status.svg)](https://david-dm.org/ndelvalle/v-blur)\n[![devDependencies Status](https://david-dm.org/ndelvalle/v-blur/dev-status.svg)](https://david-dm.org/ndelvalle/v-blur?type=dev)\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/4b151e093b7e44ffbb660a84381d84ed)](https://www.codacy.com/app/ndelvalle/v-blur?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=ndelvalle/v-blur\u0026amp;utm_campaign=Badge_Grade)\n\nVue directive to blur an element dynamically. Useful to partially hide elements, use it with a spinner when content is not ready among other things.\n\n## Install\n\n```bash\n$ npm install --save v-blur\n```\n\n```bash\n$ yarn add v-blur\n```\n## Binding value\n\nThe binding value can be a Boolean or an Object. If a Boolean is provided, the directive uses default values for [opacity](https://www.w3schools.com/cssref/css3_pr_opacity.asp), [filter](https://www.w3schools.com/jsref/prop_style_filter.asp) and [transition](https://www.w3schools.com/jsref/prop_style_transition.asp). To use a custom configuration, an object with these attributes plus `isBlurred` (To determine when to apply these styles) can be provided.\n\n### Binding object attributes\n\n| option     | default          | type   |\n| -----------|:----------------:| ------:|\n| isBlurred  | false            | boolean|\n| opacity    | 0.5              | number |\n| filter     | 'blur(1.5px)'    | string |\n| transition | 'all .2s linear' | string |\n\n## Use\n\n```js\nimport Vue from 'vue'\nimport vBlur from 'v-blur'\n\nVue.use(vBlur)\n\n// Alternatively an options object can be used to set defaults. All of these\n// options are not required, example:\n// Vue.use(vBlur, {\n//   opacity: 0.2,\n//   filter: 'blur(1.2px)',\n//   transition: 'all .3s linear'\n// })\n\n```\n\n```js\n\u003cscript\u003e\n  export default {\n      data () {\n        return {\n          // Example 1:\n          // Activate and deactivate blur directive using defaults values\n          // provided in the Vue.use instantiation or by the library.\n          isBlurred: true,\n\n          // Example 2:\n          // Activate and deactivate blur directive providing a local\n          // configuration object.\n          blurConfig: {\n            isBlurred: false,\n            opacity: 0.3,\n            filter: 'blur(1.2px)',\n            transition: 'all .3s linear'\n          }\n        }\n      }\n    }\n  };\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003c!-- Example 1 using just a boolean (Uses default values) --\u003e\n  \u003cdiv v-blur=\"isBlurred\"\u003e\u003c/div\u003e\n\n  \u003c!-- Example 2 using an object (Uses config values) --\u003e\n  \u003cdiv v-blur=\"blurConfig\"\u003e\u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Example\n[![Edit Vue Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/823o069zoj?module=%2Fsrc%2Fcomponents%2FHelloWorld.vue)\n![v-blur](https://raw.githubusercontent.com/ndelvalle/v-blur/master/v-blur-image.png)\n\n## License\n[MIT License](https://github.com/ndelvalle/v-blur/blob/master/LICENSE)\n\n## Style guide\n[![Standard - JavaScript Style Guide](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fndelvalle%2Fv-blur","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fndelvalle%2Fv-blur","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fndelvalle%2Fv-blur/lists"}