{"id":19057376,"url":"https://github.com/euvl/v-clipboard","last_synced_at":"2025-05-15T18:07:17.373Z","repository":{"id":22475120,"uuid":"96355570","full_name":"euvl/v-clipboard","owner":"euvl","description":"Simple and powerful clipboard plugin for Vue.js 2 and 3 ","archived":false,"fork":false,"pushed_at":"2023-05-04T08:41:15.000Z","size":217,"stargazers_count":522,"open_issues_count":3,"forks_count":39,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-04-14T04:55:36.619Z","etag":null,"topics":["clipboard","vue","vuejs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/euvl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2017-07-05T19:47:44.000Z","updated_at":"2024-04-04T13:18:49.000Z","dependencies_parsed_at":"2024-04-12T22:00:06.686Z","dependency_job_id":null,"html_url":"https://github.com/euvl/v-clipboard","commit_stats":{"total_commits":89,"total_committers":8,"mean_commits":11.125,"dds":0.2134831460674157,"last_synced_commit":"42e4527db0b5587a9eb3774e724410194561940c"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/euvl%2Fv-clipboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/euvl%2Fv-clipboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/euvl%2Fv-clipboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/euvl%2Fv-clipboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/euvl","download_url":"https://codeload.github.com/euvl/v-clipboard/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247430836,"owners_count":20937873,"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":["clipboard","vue","vuejs"],"created_at":"2024-11-08T23:56:00.649Z","updated_at":"2025-04-07T23:07:49.453Z","avatar_url":"https://github.com/euvl.png","language":"TypeScript","funding_links":[],"categories":["UI组件","Components \u0026 Libraries","TypeScript","UI Components","UI Components [🔝](#readme)"],"sub_categories":["杂","UI Components","Miscellaneous"],"readme":"[![npm](https://img.shields.io/npm/v/v-clipboard)](https://img.shields.io/npm/v/v-clipboard)\n[![npm](https://img.shields.io/npm/dy/v-clipboard)](https://img.shields.io/npm/dy/v-clipboard)\n\n\n### Supporters\n\n\u003cp \u003e\n  \u003ca href=\"https://blitz.so/yev_vlasenko?utm_source=github\" target=\"_blank\" align=\"left\"\u003e\n      \u003cimg src=\"https://user-images.githubusercontent.com/1577802/208237314-b5921a5a-4b90-4689-8c0d-4948f98b6ba1.png\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://shareback.com?utm_source=github\" align=\"right\" target=\"_blank\"\u003e\n      \u003cimg src=\"https://user-images.githubusercontent.com/1577802/208237315-4039fb0e-dd59-42e6-829c-bd6fdae7a673.png\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nCheck them out.\n\n### Install\n\n```bash\nnpm install --save v-clipboard\n```\n\n```bash\nyarn add v-clipboard\n```\n\n```javascript\nimport Vue from 'vue'\nimport Clipboard from 'v-clipboard'\n\nVue.use(Clipboard)\n```\n\n### Usage\n\nWhen an element that contains `v-clipboard` directive is clicked, the value of `value` will be copied into clipboard.\n\n---\n\nCopying **static** value (directive should receive actual value):\n\n```vue\n\u003cbutton v-clipboard=\"value\"\u003e\n  Copy to clipboard\n\u003c/button\u003e\n```\n\n```vue\n\u003cbutton v-clipboard=\"'some text'\"\u003e\n  Copy to clipboard\n\u003c/button\u003e\n```\n\nCopying **dynamic** value (directive should recieve a function that returns value):\n\n```vue\n\u003cbutton v-clipboard=\"() =\u003e value\"\u003e\n  Copy to clipboard\n\u003c/button\u003e\n```\n\nCopying **anything** in your methods:\n\n```js\nthis.$clipboard(value)\n```\n\nWithout plugin:\n\n```js\nimport { Clipboard } from 'v-clipboard'\n\nawait Clipboard.copy(value)\n```\n\n### Events\n\n```vue\n\u003cbutton\n  v-clipboard=\"foo\"\n  v-clipboard:success=\"clipboardSuccessHandler\"\n  v-clipboard:error=\"clipboardErrorHandler\"\n\u003e\n  Copy to clipboard\n\u003c/button\u003e\n```\n\n```js\n{\n  methods: {\n    clipboardSuccessHandler (value, event) {\n      console.log('success', value)\n    },\n\n    clipboardErrorHandler (value, event) {\n      console.log('error', value)\n    }\n  }\n}\n```\n\n### How it works\n\n`copy / $clipboard` is an `async` call. Firstly, library makes an attempt to update clibpoard using `execCommand`, if that operation is unsuccessful it makes an attemnt to use Navigator Clipboard API and automatically requests access, waits for access to be granted, then writes to clipboard.\n\n\n### Demo\n\nhttps://codesandbox.io/s/epic-waterfall-17yet5?file=/src/App.vue\n\n\n### Compatibility\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/1577802/28269902-8ae0e01e-6afb-11e7-9981-d4965bac69d1.png\"\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feuvl%2Fv-clipboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feuvl%2Fv-clipboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feuvl%2Fv-clipboard/lists"}