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

一、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>
原文地址:https://www.cnblogs.com/goloving/p/8921419.html