{"id":18518365,"url":"https://github.com/javisperez/vuelongpress","last_synced_at":"2025-04-09T08:31:41.449Z","repository":{"id":65378507,"uuid":"80578158","full_name":"javisperez/vuelongpress","owner":"javisperez","description":"Confirmation button for sensitive action, which requires to be hold for an amount of seconds","archived":false,"fork":false,"pushed_at":"2019-02-15T07:10:35.000Z","size":23,"stargazers_count":74,"open_issues_count":2,"forks_count":10,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T03:53:08.984Z","etag":null,"topics":["button","component","confirmation","longpress","plugin","vuejs"],"latest_commit_sha":null,"homepage":"","language":"Vue","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/javisperez.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}},"created_at":"2017-02-01T01:00:36.000Z","updated_at":"2023-05-05T07:20:47.000Z","dependencies_parsed_at":"2023-01-20T07:55:14.292Z","dependency_job_id":null,"html_url":"https://github.com/javisperez/vuelongpress","commit_stats":null,"previous_names":["javisperez/vue-longpress"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javisperez%2Fvuelongpress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javisperez%2Fvuelongpress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javisperez%2Fvuelongpress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javisperez%2Fvuelongpress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/javisperez","download_url":"https://codeload.github.com/javisperez/vuelongpress/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248003160,"owners_count":21031743,"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":["button","component","confirmation","longpress","plugin","vuejs"],"created_at":"2024-11-06T17:13:08.090Z","updated_at":"2025-04-09T08:31:41.177Z","avatar_url":"https://github.com/javisperez.png","language":"Vue","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","UI组件","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["Libraries \u0026 Plugins","形成","UI Components","Form"],"readme":"## VueLongpress\n\nA VueJS (2.x) button component that requires you to keep pressing to confirm a given action.\n\n## DEMO\n\n[Live demo on jsFiddle](https://jsfiddle.net/qr9ykxpp/)\n\n### What is this?\n\nA component that will generate a button that requires you to keep pressing for a given time to execute a given action.\n\n### Why would i need that?\n\nThink of a sensitive scenario, something like deleting a user's data, you might need to confirm for 5 seconds that you actually want to delete it, to prevent unintentional clicks\n\n## Install\n\nInstall from npm:\n```js\nnpm install vue-longpress --save\n```\n\n## Example\n\n```js\nimport Longpress from 'vue-longpress';\n\nvar vm = new Vue({\n\tel: '#app',\n\t\n\tcomponents: {Longpress},\n\n    methods: {\n        deleteUser() {\n            // Delete the user login here\n            console.log('user deleted');\n        }\n    },\n\t\n\ttemplate: `\u003cdiv\u003e\n\t    \u003clongpress duration=\"5\" pressing-text=\"Keep pressing for {$rcounter} seconds to delete\" action-text=\"Deleting, please wait...\"\u003eClick and hold to delete this user\u003c/longpress\u003e\n\t\u003c/div\u003e`\n});\n```\n\n### Options / Props\n\nThis component support five (5) props:\n\n1. *on-confirm*: a callback function that will be called when the time has ellapsed (i.e. when the counter is 0)\n2. *value*: a value that is passed as an argument to the confirmation function\n3. *duration*: how long (_in seconds_) the user will need to keep pressing\n4. *pressing-text*: the text to display while the user needs to \"hold\" the click (e.g. Keep pressing to confirm)\n5. *action-text*: the text to display when the action is executing (e.g. Please wait...)\n\nAlso there's a `reset` method in case you need to reset your button status. To use it you'll need to add a `ref` to your button and call it from there.\n\ne.g.:\n\nIn your template:\n\n```js\n\u003clongpress ref=\"deleteButton\"\u003e\u003c/longpress\u003e\n```\n\nIn your method:\n\n```js\ndoDelete() {\n    // delete logic here\n    ...\n    // and now reset the button if needed\n    this.$refs.deleteButton.reset();\n}\n```\n\n### Labels templates\n\nYou can use these placeholders to display dynamic texts:\n\n1. {$counter} - how much time (in seconds) has ellapsed (i.e. from 0 to {$duration})\n2. {$rcounter} - how much time (in seconds) is remaining (i.e. from {$duration} to 0)\n3. {$duration} - how much should the user press the button in total (in seconds)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavisperez%2Fvuelongpress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjavisperez%2Fvuelongpress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavisperez%2Fvuelongpress/lists"}