vue项目如何实现剪切板功能--vue-clipboard2

2018/04/23 19:58
阅读数 104

一、vue项目利用vue-clipboard2实现剪切板的功能

  1、安装vue-clipboard2插件:cnpm install --save vue-clipboard2

  2、main.js添加

import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

  3、copy组件:message绑定需要复制的文本/onCopy复制成功回调/onError复制失败回调

  v-clipboard:copy="message"

  v-clipboard:success="onCopy"

  v-clipboard:error="onError"

二、原生js实现点击按钮,复制文本框中的的内容

<body>
    <textarea cols="20" rows="10" id="test">用户定义的代码区域</textarea>
    <input type="button" onClick="copyUrl2()" value="点击复制代码" />
</body>
<script type="text/javascript">
function copyUrl2(){
    var Url2=document.getElementById("test");
    Url2.select(); // 选择对象
    document.execCommand("Copy"); // 执行浏览器复制命令
    alert("已复制好,可贴粘。");
}
</script>

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
在线直播报名
返回顶部
顶部