qql-vbind
v1.0.1
Published
这是公共的自定义命令,包括禁止输入表情,防抖,防止重复点击,复制等功能
Downloads
1
Readme
欢迎使用自动指令qql-vbind,你只需要在标签上加上以下指令,即可达到一些常用但写起来麻烦的业务效果:
v-killEmoji
禁止输入表情
v-preventReClick
防止按钮重复点击
v-debounce
div防抖(点击)
v-copy
点击自动复制文案
手把手教你如何使用:
下载
通过npm下载插件到自己的项目中
npm i qql-vbind
- 引入和注入
在入口文件(默认是根目录下的main.js)中引入该插件,用Vue.use使用这个插件
// 引入自定义指令
import QQLvBind from 'qql-vbind'
// 使用自定义指令
Vue.use(QQLvBind)
项目中使用自定义指令,只需要在目标标签上加上这条指令即可生效!(下面的演示包括了原生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
后点击自动复制<div class="box" v-copy="被复制的文件">点我就复制</div>