脚本宝典收集整理的这篇文章主要介绍了Vue中配合clipboard.js实现点击按钮复制内容到剪切板,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
Flash
,以最小的代码实现该功能,并能兼容所有主流浏览器clipboard.js
:
引入方式:
NPM方式
:npm install clipboard --save
直接引入
:下载源代码以后将相关JS
放在目录下,之后引入:<script src="xxx/clipboard.min.js"></script>
使用方式(官方文档例子):
HTML
(target
包括但不限于input
)<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- 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了,应该是可以的。使用过程中的注意事项
使用过程中若有任何疑问,欢迎留言询问!^_^^_^ 不足之处,欢迎各位批评指正!
以上是脚本宝典为你收集整理的Vue中配合clipboard.js实现点击按钮复制内容到剪切板全部内容,希望文章能够帮你解决Vue中配合clipboard.js实现点击按钮复制内容到剪切板所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。