前言:
当前兄弟们对“js调用点击事件”大体比较看重,各位老铁们都想要知道一些“js调用点击事件”的相关文章。那么小编在网上收集了一些有关“js调用点击事件””的相关知识,希望咱们能喜欢,大家快快来了解一下吧!需求设定
点击某个按钮,将设置的目标内容(例如下载链接地址)复制到剪切板,可以在电脑上任何地方粘贴不使用任何框架和使用Flash,以最小的代码实现该功能,并能兼容所有主流浏览器
插件选择
clipboard.js:官网链接地址:clipboard.js引入方式:NPM方式:npm install clipboard --save直接引入:下载源代码以后将相关JS放在目录下,之后引入:<script src="xxx/clipboard.min.js"></script>使用方式(官方文档例子):HTML(target包括但不限于input)
<!-- Target --><input id="foo" value=""><!-- Trigger --><button class="btn" data-clipboard-target="#foo"> 点击复制</button>JS
var clipboard = new ClipboardJS('.btn');//成功回调clipboard.on('success', function(e) { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger); e.clearSelection();});//失败回调clipboard.on('error', function(e) { console.error('Action:', e.action); console.error('Trigger:', e.trigger);});
更多使用方式和功能请参考官方文档,这里只举例一个实用且常用的功能!
兼容性:
正文开始了!!!,在Vue中咋用?
Vue项目所使用的相关插件(这仅是本人使用到clipboard.js那个项目用到的,不全是必须的):vue-router、vue-cli、es6-promise、axios、scss、element-ui、clipboard。使用clipboard步骤介绍开始:安装:npm install clipboard --save引入(main.js):
import clipboard from 'clipboard';//注册到vue原型上Vue.prototype.clipboard = clipboard;template:
<input type="text" id="success_form_input" readonly="readonly" v-model="link"/>/*button上的这个ref需要命名一个,名字自己取,下面会讲解为什么*/<button ref="copy" data-clipboard-action="copy" data-clipboard-target="#success_form_input" @click="copyLink">复制</button>Events:
data() { return { copyBtn: null //存储初始化复制按钮事件 }},mounted() {/*这里使用了刚开始注册到vue原型上的clipboard(使用注册到vue原型的插件的方法就是:this + 注册时命名名字)*这里需要用到刚才给button命名的ref的名字,因为这是vue提供的获取DOM的方法,虽然可以通过引入jQuery来获取,但是不推荐这样做,具体原因可以看官方文档和网上论坛搜索*这里是在挂载到DOM节点时将button按钮传入clipboard并存储起来,具体原因下面会有详述*/ this.copyBtn = new this.clipboard(this.$refs.copy);},methods: { copyLink() { /*这是点击按钮触发的点击事件,关于clipboard的使用就不再赘述了,上面介绍时已经讲述过,并且使用方法在官方文档上有*/ let _this = this; let clipboard = _this.copyBtn; clipboard.on('success', function() { _this.$message({ /*这是使用了element-UI的信息弹框*/ message: '复制成功!', type: 'success' }); }); clipboard.on('error', function() { _this.$message({ message: '复制失败,请手动选择复制!', type: 'error' }); }); }}对Events的写法解惑及使用clipboard过程中的注意事项:为什么要在mounted周期中把按钮先存储起来?答:经过亲自测试,若在点击事件中再初始话,即把mounted中的内容放到copyLink函数中,那么第一次点击会无效,第二次及以后便能生效,这样肯定是不符合要求的,因此我想了这么一个办法来解决这么一个问题,当然不单单不是mounted周期,放在created和beforeMounted周期应该也是行的,虽然没有亲自测试,但是因为这两个周期已经能获取DOM了,应该是可以的。使用过程中的注意事项使用NPM安装完成之后记得在main.js中引入并注册到Vue原型上,名字可以自己取。使用时通过this + 原型上命名名字来调用clipboard。按钮通过ref的命名来取,就是this.$refs.xxx,不推荐使用jQuery来获取DOM。关于clipboard复制按钮的要求请遵从官方文档要求,例如加上data-clipboard-action和data-clipboard-target等。
使用过程中若有任何疑问,欢迎留言询问!^_^^_^ 不足之处,欢迎各位批评指正!
标签: #js调用点击事件