1.0.1 • Published 2 years ago

qql-vbind v1.0.1

Weekly downloads
-
License
ISC
Repository
-
Last release
2 years ago

欢迎使用自动指令qql-vbind,你只需要在标签上加上以下指令,即可达到一些常用但写起来麻烦的业务效果:

v-killEmoji禁止输入表情

v-preventReClick 防止按钮重复点击

v-debounce div防抖(点击)

v-copy 点击自动复制文案

手把手教你如何使用:
  1. 下载

    通过npm下载插件到自己的项目中

npm i qql-vbind
  1. 引入和注入

在入口文件(默认是根目录下的main.js)中引入该插件,用Vue.use使用这个插件

// 引入自定义指令
import QQLvBind from 'qql-vbind'
// 使用自定义指令
Vue.use(QQLvBind)
  1. 项目中使用自定义指令,只需要在目标标签上加上这条指令即可生效!(下面的演示包括了原生html标签和vantUI组件库的标签)

1)自动过滤表情的输入,在html对应标签上加上v-killEmoji后,input框自动输入不起表情emoji

<input type="text" v-killEmoji placeholder="请输入" v-model="val">
<van-field v-model="val" placeholder="请输入" v-killEmoji /> 

2)防止按钮重复点击,在Button标签上加上v-preventReClick后,可以防止该标签的重复点击

<button @click="onClickMe()" v-preventReClick="1000">可以防止重复点我</button>
<van-button @click="onClickMe()" v-preventReClick="1000">可以防止重复点我</van-button>

3)防抖,在html对应标签上加上v-debounce后,多次连续触发点击事件时只执行最后一次

 <div class="box" v-debounce="onClickMe">连续点我只执行最后一次onClickMe</div>

4)自动复制文案,在html对应标签上加上v-copy后点击自动复制

  ```html
   <div class="box" v-copy="被复制的文件">点我就复制</div>
  ```