码迷,mamicode.com
首页 > Web开发 > 详细

vue中使用剪切板插件 clipboard.js

时间:2019-09-16 23:22:31      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:简单   board   方法   console   成功   插件   rom   nbsp   boa   

vue中使用剪切板需要借助一个插件,clipboard,使用方法还是很简单的,先下载,然后引入:

npm i clipboard -S

//引入
import Clipboard from ‘clipboard‘;

下面就是使用了,比如说,比较常见的是,上面一行文字,下面有一个复制的按钮,
<p id="share-code">{{init.code}}</p>
<button class="copy-btn" data-clipboard-action="copy" data-clipboard-target="#share-code" @click="copy">copy</button>

<script> copy() { if(!this.init) return; var clipboard = new Clipboard(‘.copy-btn‘) clipboard.on(‘success‘, e => { console.log(‘复制成功‘) this.toast(‘copy success‘); // 释放内存 clipboard.destroy(); }) clipboard.on(‘error‘, e => { // 不支持复制       //console.log(‘该浏览器不支持自动复制‘) // 释放内存 clipboard.destroy() }) } }, </script>

 

vue中使用剪切板插件 clipboard.js

标签:简单   board   方法   console   成功   插件   rom   nbsp   boa   

原文地址:https://www.cnblogs.com/ysla/p/11530815.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!