{"id":13491091,"url":"https://github.com/Inndy/vue-clipboard2","last_synced_at":"2025-03-28T07:31:49.761Z","repository":{"id":38361739,"uuid":"78017582","full_name":"Inndy/vue-clipboard2","owner":"Inndy","description":"A simple vue2 binding to clipboard.js","archived":false,"fork":false,"pushed_at":"2023-10-25T04:53:36.000Z","size":561,"stargazers_count":1765,"open_issues_count":37,"forks_count":242,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-03-20T06:53:11.203Z","etag":null,"topics":["clipboard","copy","vue","vue2","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":"https://vue-clipboard2.inndy.tw/","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/Inndy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"dei":null}},"created_at":"2017-01-04T13:23:48.000Z","updated_at":"2025-03-01T08:32:30.000Z","dependencies_parsed_at":"2023-02-08T04:15:30.605Z","dependency_job_id":"ff519748-1a6a-4c46-acc6-59565df53dd9","html_url":"https://github.com/Inndy/vue-clipboard2","commit_stats":{"total_commits":67,"total_committers":10,"mean_commits":6.7,"dds":"0.14925373134328357","last_synced_commit":"be0e6df47b46b8cb834991a3188a2b604a06b4fa"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Inndy%2Fvue-clipboard2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Inndy%2Fvue-clipboard2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Inndy%2Fvue-clipboard2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Inndy%2Fvue-clipboard2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Inndy","download_url":"https://codeload.github.com/Inndy/vue-clipboard2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245798318,"owners_count":20673901,"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","copy","vue","vue2","vuejs","vuejs2"],"created_at":"2024-07-31T19:00:53.458Z","updated_at":"2025-03-28T07:31:49.751Z","avatar_url":"https://github.com/Inndy.png","language":"JavaScript","funding_links":[],"categories":["Components \u0026 Libraries","JavaScript","UI组件","UI Components [🔝](#readme)","UI Components"],"sub_categories":["UI Components","杂","Miscellaneous"],"readme":"# vue-clipboard2\n\nA simple vuejs 2 binding for clipboard.js\n\n## DEPRECATED\n\nI'm so grateful for all of you who have used and supported this project over the years.\nIt's been a fun ride, but it's time to say goodbye.\n\nAs of 2023, Vue2 is on its way out and the\n[Clipboard API](https://caniuse.com/?search=clipboard.writeText) is now pretty much everywhere.\n\nSo you don't need this plugin anymore, just use `navigator.clipboard.writeText('text')`\nand you're good to go. Thanks again for everything and happy coding!\n\n## Install\n\n`npm install --save vue-clipboard2` or use `dist/vue-clipboard.min.js` without webpack\n\n## Usage\n\nFor vue-cli user:\n\n```javascript\nimport Vue from 'vue'\nimport VueClipboard from 'vue-clipboard2'\n\nVue.use(VueClipboard)\n```\n\nFor standalone usage:\n\n```html\n\u003cscript src=\"vue.min.js\"\u003e\u003c/script\u003e\n\u003c!-- must place this line after vue.js --\u003e\n\u003cscript src=\"dist/vue-clipboard.min.js\"\u003e\u003c/script\u003e\n```\n\n## I want to copy texts without a specific button!\n\nYes, you can do it by using our new method: `this.$copyText`. See\n[sample2](https://github.com/Inndy/vue-clipboard2/blob/master/samples/sample2.html),\nwhere we replace the clipboard directives with a v-on directive.\n\nModern browsers have some limitations like that you can't use `window.open` without a user interaction.\nSo there's the same restriction on copying things! Test it before you use it. Make sure you are not\nusing this method inside any async method.\n\nBefore using this feature, read:\n[this issue](https://github.com/zenorocha/clipboard.js/issues/218) and\n[this page](https://github.com/zenorocha/clipboard.js/wiki/Known-Limitations) first.\n\n## It doesn't work with bootstrap modals\n\nSee [clipboardjs](https://clipboardjs.com/#advanced-usage) document and [this pull request](https://github.com/Inndy/vue-clipboard2/pull/23), `container` option is available like this:\n\n```js\nlet container = this.$refs.container\nthis.$copyText(\"Text to copy\", container)\n```\n\nOr you can let `vue-clipboard2` set `container` to current element by doing this:\n\n```js\nimport Vue from 'vue'\nimport VueClipboard from 'vue-clipboard2'\n\nVueClipboard.config.autoSetContainer = true // add this line\nVue.use(VueClipboard)\n```\n\n## Sample\n\n```html\n\u003cdiv id=\"app\"\u003e\u003c/div\u003e\n\n\u003ctemplate id=\"t\"\u003e\n  \u003cdiv class=\"container\"\u003e\n    \u003cinput type=\"text\" v-model=\"message\"\u003e\n    \u003cbutton type=\"button\"\n      v-clipboard:copy=\"message\"\n      v-clipboard:success=\"onCopy\"\n      v-clipboard:error=\"onError\"\u003eCopy!\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nnew Vue({\n  el: '#app',\n  template: '#t',\n  data: function () {\n    return {\n      message: 'Copy These Text'\n    }\n  },\n  methods: {\n    onCopy: function (e) {\n      alert('You just copied: ' + e.text)\n    },\n    onError: function (e) {\n      alert('Failed to copy texts')\n    }\n  }\n})\n\u003c/script\u003e\n```\n\n## Sample 2\n\n```html\n\u003cdiv id=\"app\"\u003e\u003c/div\u003e\n\n  \u003ctemplate id=\"t\"\u003e\n    \u003cdiv class=\"container\"\u003e\n    \u003cinput type=\"text\" v-model=\"message\"\u003e\n    \u003cbutton type=\"button\" @click=\"doCopy\"\u003eCopy!\u003c/button\u003e\n    \u003c/div\u003e\n  \u003c/template\u003e\n\n  \u003cscript\u003e\n  new Vue({\n    el: '#app',\n    template: '#t',\n    data: function () {\n      return {\n        message: 'Copy These Text'\n      }\n    },\n    methods: {\n      doCopy: function () {\n        this.$copyText(this.message).then(function (e) {\n          alert('Copied')\n          console.log(e)\n        }, function (e) {\n          alert('Can not copy')\n          console.log(e)\n        })\n      }\n    }\n  })\n  \u003c/script\u003e\n\n```\n\nYou can use [your Vue instance ```vm.$el```](https://vuejs.org/v2/api/#vm-el) to get DOM elements via the usual traversal methods, e.g.:\n\n```this.$el.children[1].children[2].textContent```\n\nThis will allow you to access the *rendered* content of your components, rather than the components themselves.\n\n### Contribution\n\nPRs welcome, and issues as well! If you want any feature that we don't have currently,\nplease fire an issue for a feature request.\n\n### License\n\n[MIT License](https://github.com/Inndy/vue-clipboard2/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FInndy%2Fvue-clipboard2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FInndy%2Fvue-clipboard2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FInndy%2Fvue-clipboard2/lists"}