# v-prevent-dbclick > A component that avoids repeated clicks on the slot. Latest version **0.1.3** (published 2021-03-11) · MIT license · 0 weekly downloads ## Install ```sh npm install v-prevent-dbclick pnpm add v-prevent-dbclick yarn add v-prevent-dbclick bun add v-prevent-dbclick ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.3 | | Published | 2021-03-11 | | First published | 2020-12-24 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 3 | | Unpacked size | 116.8 KB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 0 | | Author | wuchouchou | | Maintainers | wuchouchou | | Keywords | v-prevent-dbclick, prevent-dbclick, dbclick, vue | ## Links - npm: https://www.npmjs.com/package/v-prevent-dbclick - Repository: https://github.com/w1301625107/v-prevent-dbclick - Homepage: https://github.com/w1301625107/v-prevent-dbclick#readme - Issues: https://github.com/w1301625107/v-prevent-dbclick/issues - npm.io page: https://npm.io/package/v-prevent-dbclick ## Dependencies (3) - [vue](https://npm.io/package/vue.md) ^2.6.11 - [core-js](https://npm.io/package/core-js.md) ^3.6.5 - [highlight.js](https://npm.io/package/highlight.js.md) ^10.4.1 ## Alternatives - [async-exit-hook](https://npm.io/package/async-exit-hook.md) — 3.7M weekly downloads - [evnty](https://npm.io/package/evnty.md) — 7.2K weekly downloads - [eleventy-plugin-asciidoc](https://npm.io/package/eleventy-plugin-asciidoc.md) — 3.5K weekly downloads - [@jswork/next-get2get](https://npm.io/package/@jswork/next-get2get.md) — 945 weekly downloads - [@dashersw/axon](https://npm.io/package/@dashersw/axon.md) — 934 weekly downloads ## Recent versions - 0.1.3 (latest) — 2021-03-11 - 0.1.2 — 2020-12-28 - 0.1.1 — 2020-12-25 - 0.1.0 — 2020-12-24 ## README # v-prevent-dbclick 用于各种需要避免重复点击的地方。比如 - 多个购买按钮，在其中一个购买完成前避免其他购买按钮的点击 - 保存按钮，保存成功前避免重复提交 - 各种 ajax 请求，避免因点击重复请求 ## [example here](https://w1301625107.github.io/v-prevent-dbclick/demo/index.html) ## Install ### npm 安装 ```bash npm i v-prevent-dbclick --save ``` Include plugin in your `main.js` file. ```js import Vue from 'vue' import PreventDbClick from 'v-prevent-dbclick'; Vue.use(PreventDbClick); ``` ### 使用链接引入 ```html ``` ```html

``` ## usage ```html ``` ```js ``` ## props > 下面中所指的 `status 均为 slot-scope 中的 status` | param | required | type | default | describe | | :-------------: | :------: | :-----: | :-------: | :------------------------------------------------------------- | | debounce | ❌ | number | 0 | 就是 `debounce`啦 | | group | ❌ | string | undefined | 分组名称，`相同组的状态将会同步` | | stopPropagation | ❌ | boolean | true | 阻止冒泡，默认在`status`为`true`时，阻止 slot 内所有的点击操作 | | doNothing | ❌ | boolean | false | 什么都不做，可以接收同一个`group`传递的状态 | > 如果你需要使用`throttle`，只需要`定时调用onTap`即可 ## slot-scope | param | type | describe | | :--------: | :------------: | :----------------------------------------------------------- | | status | Boolean | 代表当前状态是否是点击过 | | isEmitter | Boolean | 代表当前状态的`改变`是否是`当前 v-prevent-dbclick 触发 ` | | customInfo | Any | 调用 `sendInfo` 时传入的数据，可以用来传递各种东西，比如消息 | | release | Function | release `调用`后将使状态变为`未点击过`， | | sendInfo | Function(info) | 设置自定义的 `customInfo` | ## caution - 注意查看 vue 版本，不是 2.6 以上 vue 版本，不能直接使用 demo 中的 v-slot 的语法，需要使用旧的 slot 语法[2.6 之前的 slot 语法](https://cn.vuejs.org/v2/guide/components-slots.html#%E5%BA%9F%E5%BC%83%E4%BA%86%E7%9A%84%E8%AF%AD%E6%B3%95) ```html 2.6+语法 ``` ```html 2.6之前的语法 ``` ## changelog 0.1.2 - add test case - fix isEmitter error 0.1.1 - 替换更恰当的命名 - 打包体积优化 --- _Source: https://npm.io/package/v-prevent-dbclick · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._